Websocket + Vue使用

这里有一篇文档可以参考一下> 闪现

POM文件

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.0</version>
</dependency>

WebSocketConfig配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {/*** 	注入ServerEndpointExporter,* 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

Ccontroller接口

import com.alibaba.fastjson2.JSONObject;
import com.rise.common.utils.StringUtils;
import com.rise.domain.ProTriaxialData;
import com.rise.service.IProTriaxialDataService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArraySet;@ServerEndpoint("/websocket")//表示将该类标识为一个 WebSocket 服务端端点,客户端可以通过该端点进行 WebSocket 连接。/websocket 是客户端连接的 URL 路径。
@EnableScheduling//表示启用 Spring 的定时任务调度功能。在该类中使用的 @Scheduled 注解才能生效。
@Component//表示将该类标识为一个 Spring 组件,由 Spring 自动进行管理和注入。
public class MyWebSocket {private static final Logger log = LoggerFactory.getLogger(MyWebSocket.class);private static int onlineCount = 0;private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<>();private Session session;private Boolean isReceive = true;private Double lat = 36.679071;//业务注入private static IProTriaxialDataService proTriaxialDataService;@Autowiredpublic void proTriaxialDataService(IProTriaxialDataService proTriaxialDataService){//WebScoketController是该类的类名 需要换成自己的类名MyWebSocket.proTriaxialDataService = proTriaxialDataService;}@OnOpenpublic void onOpen(Session session) {this.session = session;webSocketSet.add(this);addOnlineCount();log.info("有新链接加入!当前在线人数:{}",getOnlineCount());}@OnClosepublic void onClose() {webSocketSet.remove(this);subOnlineCount();log.info("有一链接关闭!当前在线人数:{}",getOnlineCount());}@OnMessagepublic void onMessage(String message, Session session) throws IOException {log.info("socket 接收到信息{}",message);//判断前端是否已消费上一条信息if (StringUtils.isNotEmpty(message) && message.equals("已消费")){isReceive = true;} else {// 连接已断开isReceive = false;}}public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}@Scheduled(cron = "*/2 * * * * *")public void sendMessageScheduledTask()throws Exception{log.info("socket 执行三数据推送给前端");try{if (isReceive){//测试数据ProTriaxialData data = new ProTriaxialData();data.setId(1);data.setLng(117.175169);data.setLat(lat);data.setWeight(13.96);data.setCarNumber("鲁A·88888");lat = lat + 0.001;if(lat>36.69){lat =  36.679071;}//每2秒发送一次
//                List<ProTriaxialData> proTriaxialData = proTriaxialDataService.selectProTriaxialDataByCreateTimeDesc();
//                if (proTriaxialData!=null && proTriaxialData.size()>0){String message = JSONObject.toJSONString(data);for (MyWebSocket item : webSocketSet) {item.sendMessage(message);}
//                }}log.info("socket 数据发送成功!");}catch (Exception e){log.info("socket 数据发送失败!");e.printStackTrace();}}public static synchronized int getOnlineCount() {return MyWebSocket.onlineCount;}public static synchronized void addOnlineCount() {MyWebSocket.onlineCount++;}public static synchronized void subOnlineCount() {MyWebSocket.onlineCount--;}}

前端

initWebSocket(){let that = this;var ws = new WebSocket("ws://IP:PORT/websocket");// 连接成功后的回调函数ws.onopen = function (params) {console.log('客户端连接成功')// 向服务器发送消息ws.send('认证成功!')};// 从服务器接受到信息时的回调函数ws.onmessage = function (e) {console.log('收到服务器响应', e.data)var data = e.data;if(data!=undefined){if(data.indexOf("{") != -1){var obj = JSON.parse(data);//接收后台发送的消息数据做后续处理}else{console.log(data);}}};// 连接关闭后的回调函数ws.onclose = function(evt) {console.log("关闭客户端连接");};// 连接失败后的回调函数ws.onerror = function (evt) {console.log("连接失败了",evt);};// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,这样服务端会抛异常。window.onbeforeunload = function() {ws.close();}console.log(ws)},

如果发现连接不通可能需要在后台接口将url设置白名单

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/766721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库之MongoDB应用与开发

MongoDB应用与开发 1. MongoDB安装 l 官网下载安装介质&#xff1a; Try MongoDB Atlas Products | MongoDB 选择对应版本 修改环境变量 vi /etc/profile export MONGODB_HOME/home/lijin/mongodb export PATH P A T H : PATH: PATH:MONGODB_HOME/bin source /etc/profile …

TnT-LLM: Text Mining at Scale with Large Language Models

TnT-LLM: Text Mining at Scale with Large Language Models 相关链接&#xff1a;arxiv 关键字&#xff1a;Large Language Models (LLMs)、Text Mining、Label Taxonomy、Text Classification、Prompt-based Interface 摘要 文本挖掘是将非结构化文本转换为结构化和有意义的…

矩阵计算-线性系统和 LU 分解

一、三角系统 …… 二、高斯消元法 …… 三、LU分解--直接三角分解法 求解线性方程Axb&#xff1a; 参考视频&#xff1a;【数值分析】矩阵LU三角分解| 速成讲解 考试宝典_哔哩哔哩_bilibili 令ALU&#xff0c;其中L是单位下三角矩阵&#xff08;对角线上元素都是1&#xff…

精神暴力的来源与解药

导致人生病的&#xff0c;不仅是病毒或细菌&#xff0c;也有精神暴力。与病毒破坏物理肌体、摧毁生命不同&#xff0c;精神暴力是让人们在过度的自我狂热中燃尽自我、而毁灭自身的。 21世纪以来&#xff0c;精神方面的疾病越来越多&#xff0c;为什么这样呢&#xff1f;大的背景…

git基础-查看提交历史

查看提交历史 在创建了多个提交之后&#xff0c;或者如果克隆了一个具有现有提交历史的存储库&#xff0c;可能会想要回顾一下发生了什么。最基本和强大的工具就是 git log 命令。 运行下git log查看下输出状态 默认情况下&#xff0c;不带任何参数运行 git log 命令会以逆时…

【工具】cassetteai — 制作音乐就像现在写提示一样简单

Cassette 是一种人工智能驱动的音乐创作工具,使各种技能水平的用户都可以根据自己的特定需求和偏好生成高质量、免版税的音乐曲目。它基于基于潜在扩散 (LDM) 的机器学习模型,可以使用用户提供的文本描述来想象节拍。它具有易于使用的界面,用户可以输入各种参数,例如所需的…

AGV|机器人导航识别二维码视觉传感器TDCS-0100与上位机PLC联机实例说明

目前二维码视觉导航的AGV出货量非常大&#xff0c;几乎都是仓储型AGV使用的导航方式。在地面或者天花板等位置标贴二维码作为标记点&#xff0c;通过扫描读取二维码信息和二维码相对相机的角度来确定当前位置。 本文重点介绍AGV|机器人导航识别二维码视觉传感器TDCS-0100与上位…

unity学习(68)——相机/模型的旋转/位置计算

这个比想象中要难&#xff0c;而且需要自己写。 1.相机可以转xy两个位置&#xff0c;可以点头和转圈。注意这里有一个if判断&#xff08;后面返回来发现了这些问题&#xff09; 2.角色不能点头&#xff0c;只能转圈。 难得是移动方向&#xff0c;因为移动方向(位置)和转向是相…

在Sequence中缓存Niagara粒子轨道

当Sequence中粒子特效较多时&#xff0c;播放检查起来较为麻烦&#xff0c;而使用Niagara缓存功能可将粒子特效方便的缓存起来&#xff0c;并且还可以更改播放速度与正反播放方向&#xff0c;便于修改。 1.使用Niagara缓存需要先在插件里打开NiagaraSimCaching 2.创建一个常…

web前端之行为验证码、不同设备和屏幕尺寸呈现不同大小、元素宽度根据视口宽度进行调整、元素或图片裁剪、图片验证码

MENU 前言版本一(htmlJScss)版本二(htmlJScsscanvas) 前言 1、版本一的样式比较齐全&#xff1b; 2、版本二的JS逻辑和功能效果比较完善&#xff0c;且是别人的代码&#xff0c;后续会对样式进行完善。[Gitee | 哔哩哔哩]&#xff1b; 3、两个版本各有千秋&#xff0c;主要学习…

CRC计算流程详解和FPGA实现

一、概念 CRC校验&#xff0c;中文翻译过来是&#xff1a;循环冗余校验&#xff0c;英文全称是&#xff1a;Cyclic Redundancy Check。是一种通过对数据产生固定位数的校验码&#xff0c;以检验数据是否存在错误的技术。 其主要特点是检错能力强、开销小&#xff0c;易于电路实…

政安晨:【深度学习实践】【使用 TensorFlow 和 Keras 为结构化数据构建和训练神经网络】(二)—— 深度神经网络

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras实战演绎 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 概述 深度神经网络&#xff08;Deep Neural Network…

SQLiteC/C++接口详细介绍sqlite3_stmt类(六)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;五&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;七&#xff09; 17. sqlite3_clear_bindings函数 sqlite3_clear_bindings函…

Day44:WEB攻防-PHP应用SQL盲注布尔回显延时判断报错处理增删改查方式

目录 PHP-MYSQL-SQL操作-增删改查 PHP-MYSQL-注入函数-布尔&报错&延迟 基于布尔的SQL盲注-逻辑判断(需要有回显,没回显搞不了)跟union需要的条件差不多 基于时间的SQL盲注-延时判断(不需要任何回显) 基于报错的SQL盲注-报错回显(需要报错回显&#xff0c;没报错回…

【LabVIEW FPGA入门】FPGA 存储器(Memory)

可以使用内存项将数据存储在FPGA块内存中。内存项以2kb为倍数引用FPGA目标上的块内存。每个内存项引用一个单独的地址或地址块&#xff0c;您可以使用内存项访问FPGA上的所有可用内存。如果需要随机访问存储的数据&#xff0c;请使用内存项。 内存项不消耗FPGA上的逻辑资源&…

leetcode 2671

leetcode 2671 题目 例子 思路1 使用哈希&#xff0c; unordered_map 是基于hash 实现的key,val 存储。 代码1 class FrequencyTracker {unordered_map<int, int>m;public:FrequencyTracker() { }void add(int number) {if(m.find(number) m.end()){m.insert({num…

备战蓝桥杯---牛客寒假算法基础集训6

1.并查集数学 分析&#xff1a; 首先我们知道算数基本定理&#xff0c;如果两个数有大于1的质因子&#xff0c;那么我们就需要把他们放在同一个集合&#xff0c;因此我们可以用欧拉刷出1e6范围内的素数&#xff0c;然后依次看输入的数。 拿202*2*5举例子&#xff0c;我们在求…

算法系列--链表刷题(二)

&#x1f495;"轻舟已过万重山"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;算法系列–链表刷题(二) 今天为大家带来的是算法系列--链表刷题(二),带来了几道经典的有关链表的面试题(合并K个有序列表) 1.两数相加 https://leetcode.cn/problems/a…

测试ALPHA开发板CAN1的设备树文件

一. 简介 前面一篇文章学习了 ALPHA开发板上的 CAN接口的设备节点信息&#xff0c;文章如下&#xff1a; ALPHA开发板修改CAN的设备树节点信息-CSDN博客 本文对设备树文件进行测试&#xff0c;即开发板加载 .dtb设备树文件。 二. 加载测试 CAN的设备树文件 1. 拷贝设备树…

fiddler过滤器使用,隐藏图片、js、css请求

如果抓包过程中不想查看图片、js、css请求&#xff0c;或者只想抓某个ip或者某个网页下的请求&#xff0c;可以在过滤器中设置。 &#xff08;1&#xff09;没有开启过滤器 可以看出所有的请求都会抓取&#xff0c;cs、js、图片请求都有 &#xff08;2&#xff09;开启过滤器 …