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.rhkb.cn/news/284717.html

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

相关文章

手撕算法-删除有序数组中的重复项

描述 很简单&#xff0c;就是&#xff0c;遇到重复的&#xff0c;只留一个&#xff0c;保存在数组的左半边。如&#xff1a;[0,0,1,1,1,2,2,3,3,4]变为[0,1,2,3,4] 分析 使用双指针。slow指针代表没重复的数应该放置的位置&#xff0c;fast表示遍历的不重复数字的位置&…

【Linux更新驱动、cuda和cuda toolkit】

目录 1. 更新显卡驱动1.1. 查看当前显卡驱动版本1.2. 删除原始显卡驱动1.3. 删除CUDA Toolkit1.4. 在NVIDIA官网找到2080Ti对应的最新驱动程序 2. 更新CUDA Toolkit2.1. 下载CUDA Toolkit2.2. 安装.run2.3. 添加环境变量2.4. 检查是否安装好了 最近需要更新服务器的显卡驱动和C…

SpringBoot3使用响应Result类返回的响应状态码为406

Resolved [org.springframework.web.HttpMediaTypeNotAcceptableException: No acceptable representation] 解决方法&#xff1a;Result类上加上Data注解

文件包含一-WEB攻防-PHP应用文件包含LFIRFI伪协议编码算法无文件利用黑白盒

演示案例&#xff1a; 文件包含-原理&分类&利用&修复黑盒利用-VULWEB-有无包含文件白盒利用-CTFSHOW-伪协议玩法 #文件包含-原理&分类&利用&修复 1、原理 程序开发人员通常会把可重复使用的函数写到单个文件中&#xff0c;在使用某些函数时&#xff0c…

YOLOV5 改进:替换backbone为Swin Transformer

1、前言 本文会将YOLOV5 backbone更换成Swin Transformer 具体为什么这样实现参考上文:YOLOV5 改进:替换backbone(MobileNet为例)-CSDN博客 这里只贴加入的代码 训练结果如下: 2、common文件更改 在common文件中加入下面代码: 这里是swin transformer的实现,参考:…

React函数组件Hook

问题: 相对于类组件, 函数组件的编码更简单, 效率也更高, 但函数组件不能有state (旧版) 解决: React 16.8版本设计了一套新的语法来让函数组件也可以有state Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 Hook也叫钩子…

软件测试 -- Selenium常用API全面解答(java)

写在前面 // 如果文章有问题的地方, 欢迎评论区或者私信指正 目录 什么是Selenium 一个简单的用例 元素定位 id定位 xpath定位 name定位 tag name 定位和class name 定位 操作元素 click send_keys submit text getAttribute 添加等待 显示等待 隐式等待 显示等…

【网络安全】CobaltStrike 使用

本文章仅用于信息安全学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若读者因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与作者无关。 Cobalt Strike是一款渗透测试神器&#xff0c;Cobalt Strike已经不再使用MSF而是作为单独的平台使…

[NLP] 初窥000001

NL(natural language)–自然语言 人类的语言–中文&#xff0c;英语&#xff0c;法语 NLP(Natural Language Processing)–自认语言处理 计算机处理人类语言的技术&#xff0c;它包含翻译、智能问答、文本分类、情感分析等常见应用。 CV(Computational Vision) 感知NLP 认知…

Vue使用font-face自定义字体详解

目录 1 介绍2 使用2.1 语法2.2 属性说明2.3 Vue使用案例2.3.1 全局定义字体2.3.2 在页面使用 3 注意事项 1 介绍 font-face 是 CSS 中的一个规则&#xff0c;它允许你加载服务器上的字体文件&#xff08;远程或者本地&#xff09;&#xff0c;并在网页中使用这些字体。这样&am…

【C语言】——指针四:字符指针与函数指针变量

【C语言】——指针四&#xff1a;字符指针与函数指针变量 一、字符指针二、函数指针变量2.1、 函数指针变量的创建2.2、两段有趣的代码 三、typedef关键字3.1、typedef的使用3.2、typedef与define比较 四、函数指针数组 一、字符指针 在前面的学习中&#xff0c;我们知道有一种…

LeetCode Python - 71. 简化路径

目录 题目描述解法运行结果 题目描述 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 ‘/’ 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&…

【电气安全】ASCP电气防火限流式保护器/末端回路线路保护

为什么要使用电气防火限流式保护器&#xff1f; 应急管理部消防救援局统计&#xff0c;在造成电气火灾事故的原因中&#xff0c;最为主要的当为末端线路短路&#xff0c;在电气火灾事故中占比高达70%以上。如何效预防末端线路短路引发的电气火灾事故&#xff1f; 现阶段最为常…

jmeter断言使用方法

断言主流的有两种&#xff1a;响应断言、JSON断言 响应断言 1、http请求添加响应断言 2、三种作用域&#xff1a;第一种既作用主请求又作用子请求、只作用主请求、只作用子请求。我们默认选中间的仅作用主请求即可。 3、测试字段和匹配规则 测试字段一般选择响应文本即可&am…

Springboot家乡特色推荐系统

目录 背景 技术简介 系统简介 界面预览 背景 在当今这个网络迅猛发展的时代&#xff0c;计算机技术已经广泛应用于我们生活的每个角落&#xff0c;互联网在经济和日常生活等多个方面扮演着至关重要的角色&#xff0c;它已成为人们分享资源和快速交流信息的关键平台。在中国…

灯塔:CSS笔记(5)

定位&#xff1a; 1.标准流 1.块级元素独占一行->垂直布局 2.行内元素/行内块元素一行显示多个->水平布局 2.浮动 可以让原本垂直布局的 块级元素变成水平布局 3.定位 1.可以让元素自由的摆放在网页的任意位置 2.一般用于盒子之间的层叠情况 使用定位的步骤 1.…

基于python+vue超市货品信息管理系统flask-django-php-nodejs

在此基础上&#xff0c;结合现有超市货品信息管理体系的特点&#xff0c;运用新技术&#xff0c;构建了以 python为基础的超市货品信息管理信息化管理体系。首先&#xff0c;以需求为依据&#xff0c;根据需求分析结果进行了系统的设计&#xff0c;并将其划分为管理员和用户二种…

【前端寻宝之路】学习和使用表单标签和表单控件

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-cR8zvB8CkpxTk485 {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

函数作用域和块级作用域:JavaScript中的变量作用域解析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

tabs自定义样式

使用el-tabs 去修改样式的话比较麻烦&#xff0c;索性直接用div来制作。 <div class"contain"><div class"tab_wrap"><div :class"[skew, first, active 1 ? isActive: ]" click"tabClick(1)"><span class&quo…