前端加springboot实现Web Socket连接通讯以及测试流程(包括后端实现心跳检测)

【2023】前端加springboot实现Web Socket连接通讯(包括后端实现心跳检测)

  • 前言
  • 一、Web Socket 简绍
    • 1 为什么用 websocket?
  • 二、代码实现
    • 1、前端(html)
      • 1.1、无前端向后端发送消息
      • 1.2、有前端向后端发送消息
    • 2、后端具体代码(spring boot)
    • 2.1、maven依赖
    • 2.2、配置类
    • 3、Web Socket连接工具类
    • 2.3、Controller用于测试主动发送消息
    • 2.4、定时任务,用于调用主动向客户端发送心跳
  • 三、测试
    • 1、 测试消息发送
      • 1.1、前端日志
      • 1.2、后端日志
    • 2、测试客户端异常断开,服务器通过心跳检测自动剔除掉异常对话。

前言

写这个项目主要是有有个项目需要后端有数据实话返回前端,一开始采用前端轮询的方式,后面觉得及时性上有些不行,然后改为使用websocket ,具体实现demo以及测试流程发出来提供交流学习,

一、Web Socket 简绍

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

1 为什么用 websocket?

换句话说,websocket 解决了什么问题?答案是,解决了两个主要问题:

  • 只能客户端发送请求
  • 一段时间内的频繁信息发送

假设现在需要设计一个实时预警系统的通知模块,那么作为工程师我们应该怎么设计通知的这个功能呢?因为这些系统的数据来源,一般他通过硬件设备采集到后台的,如果我们现在只有 http 协议,那么我们只能让客户端不断地轮询服务器,轮询的时间间隔越小越能接近实时的效果。可是,轮询的效率低,又浪费资源。针对这样的场景,websocket 应运而生。

在这里插入图片描述
特点:
(1)建立在 TCP 协议之上,服务器端的实现比较容易,是一个可靠的传输协议。
(2)与 HTTP协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

二、代码实现

1、前端(html)

1.1、无前端向后端发送消息

在这里插入图片描述

uid实际开发中应该使用唯一值作为当前对话的key

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
消息展示区:<br/>
<div id="textArea"></div></body>
<script>var textArea = document.getElementById('textArea');var websocket = null;//如果浏览器支持websocket就建立一个websocket,否则提示浏览器不支持websocket //uid应该要用唯一标识,为了测试方便看if('websocket' in window){websocketPage = new WebSocket('ws://localhost:8080/websocket/' + 99);}else{alert('浏览器不支持websocket!');}//建立websocket时自动调用websocketPage.onopen = function (event) {console.log('建立连接');}//关闭webscoket时自动调用websocketPage.oncolse = function (event){console.log('关闭连接');}//websocket接收到消息时调用websocketPage.onmessage = function (event){//将接收到的消息展示在消息展示区  (心跳响应回来的消息不显示)if (event.data !== "conn_success"){textArea.innerText += event.data;textArea.innerHTML += "<br/>";}}//websocket出错自动调用websocketPage.onerror = function () {alert('websocket出错');}//关闭窗口前关闭websocket连接window.onbeforeunload = function (){websocketPage.close();}</script>
</html>

1.2、有前端向后端发送消息

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Java后端WebSocket的Tomcat实现</title><script type="text/javascript" src="js/jquery.min.js"></script></head><body>Welcome<br/><input id="text" type="text" /><button onclick="send()">发送消息</button><hr/><button onclick="closeWebSocket()">关闭WebSocket连接</button><hr/><div id="message"></div></body><script type="text/javascript">var websocket = null;//判断当前浏览器是否支持WebSocketif('WebSocket' in window) {//改成你的地址websocket = new WebSocket("ws://localhost:8080/websocket/100");} else {alert('当前浏览器 Not support websocket')}//连接发生错误的回调方法websocket.onerror = function() {setMessageInnerHTML("WebSocket连接发生错误");};//连接成功建立的回调方法websocket.onopen = function() {setMessageInnerHTML("WebSocket连接成功");}var U01data, Uidata, Usdata//接收到消息的回调方法websocket.onmessage = function(event) {console.log(event);if (event.data !== "conn_success"){setMessageInnerHTML("接收消息:"+event.data);// setMessageInnerHTML(event);setechart()}}//连接关闭的回调方法websocket.onclose = function() {setMessageInnerHTML("WebSocket连接关闭");}// //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。window.onbeforeunload = function() {closeWebSocket();}//将消息显示在网页上function setMessageInnerHTML(innerHTML) {document.getElementById('message').innerHTML += innerHTML + '<br/>';}//关闭WebSocket连接function closeWebSocket() {websocket.close();}//发送消息function send() {var message = document.getElementById('text').value;websocket.send('{"msg":"' + message + '"}');setMessageInnerHTML("--------------发送消息:"+message + "");}</script>
</html>

2、后端具体代码(spring boot)

2.1、maven依赖

        <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

– yml没有东西,只有一个默认端口

2.2、配置类

需要加一个 WebSocket 端点暴露 的bean 和定时器注解

@EnableScheduling  //定时器
@SpringBootApplication
public class WebSocketApplication {public static void main(String[] args) {SpringApplication.run(WebSocketApplication.class, args);}/** * 服务器端点导出 * @author zhengfuping* @date 2023/8/22 * @return ServerEndpointExporter */@Beanpublic ServerEndpointExporter getServerEndpointExporter(){return new ServerEndpointExporter();}
}

3、Web Socket连接工具类

@Slf4j
@Service
@ServerEndpoint("/websocket/{uid}")
public class WebSocketServer2 {//连接建立时长private static final long sessionTimeout = 60000;// 用来存放每个客户端对应的WebSocketServer对象private static Map<String, WebSocketServer2> webSocketMap = new ConcurrentHashMap<>();// 与某个客户端的连接会话,需要通过它来给客户端发送数据private Session session;// 接收idprivate String uid;/*** 连接建立成功调用的方法* @author zhengfuping* @date 2023/8/22* @param session* @param uid*/@OnOpenpublic void onOpen(Session session , @PathParam("uid") String uid){session.setMaxIdleTimeout(sessionTimeout);this.session = session;this.uid = uid;if (webSocketMap.containsKey(uid)){webSocketMap.remove(uid);}webSocketMap.put(uid,this);log.info("websocket连接成功编号uid: " + uid + ",当前在线数: " + getOnlineClients());try{// 响应客户端实际业务数据!sendMessage("conn_success");}catch (Exception e){log.error("websocket发送连接成功错误编号uid: " + uid + ",网络异常!!!");}}/*** 连接关闭调用的方法* @author zhengfuping* @date 2023/8/22*/@OnClosepublic void onClose(){try {if (webSocketMap.containsKey(uid)){webSocketMap.remove(uid);}log.info("websocket退出编号uid: " + uid + ",当前在线数为: " + getOnlineClients());} catch (Exception e) {log.error("websocket编号uid连接关闭错误: " + uid + ",原因: " + e.getMessage());}}/*** 收到客户端消息后调用的方法* @param message 客户端发送过来的消息* @param session*/@OnMessagepublic void onMessage(String message, Session session) {try {WebSocketServer2.sendInfo(message);log.info("websocket收到客户端编号uid消息: " + uid + ", 报文: " + message);} catch (Exception e) {log.error("websocket发送消息失败编号uid为: " + uid + ",报文: " + message);}}/*** 发生错误时调用* @param session* @param error*/@OnErrorpublic void onError(Session session, Throwable error) {log.error("websocket编号uid错误: " + this.uid + "原因: " + error.getMessage());error.printStackTrace();}/*** 实现服务器主动推送* @author yingfeng* @date 2023/8/22 10:11* @Param * @param null* @return*/public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}/*** 获取客户端在线数* @author zhengfuping* @date 2023/8/22 10:11* @param*/public static synchronized int getOnlineClients() {if (Objects.isNull(webSocketMap)) {return 0;} else {return webSocketMap.size();}}/*** 单机使用,外部接口通过指定的客户id向该客户推送消息* @param key* @param message* @return boolean*/public static boolean sendMessageByWayBillId(@NotNull String key, String message) {WebSocketServer2 webSocketServer = webSocketMap.get(key);if (Objects.nonNull(webSocketServer)) {try {webSocketServer.sendMessage(message);log.info("websocket发送消息编号uid为: " + key + "发送消息: " + message);return true;} catch (Exception e) {log.error("websocket发送消息失败编号uid为: " + key + "消息: " + message);return false;}} else {log.error("websocket未连接编号uid号为: " + key + "消息: " + message);return false;}}/*** 群发自定义消息* @author zhengfuping* @date 2023/8/22 9:52* @param message*/public static void sendInfo(String message) {webSocketMap.forEach((k, v) -> {WebSocketServer2 webSocketServer = webSocketMap.get(k);try {webSocketServer.sendMessage(message);log.info("websocket群发消息编号uid为: " + k + ",消息: " + message);} catch (IOException e) {log.error("群发自定义消息失败: " + k + ",message: " + message);}});}/*** 服务端群发消息-心跳包* @author zhengfuping* @date 2023/8/22 10:09* @param message 推送数据* @return int 连接数*/public static synchronized int sendPing(String message){if (webSocketMap.size() == 0)return 0;StringBuffer uids = new StringBuffer();AtomicInteger count = new AtomicInteger();webSocketMap.forEach((uid,server)->{count.getAndIncrement();if (webSocketMap.containsKey(uid)){WebSocketServer2 webSocketServer = webSocketMap.get(uid);try {if (Integer.valueOf(uid) ==101){Integer i=1/0;}webSocketServer.sendMessage(message);if (count.equals(webSocketMap.size() - 1)){uids.append("uid");return;}uids.append(uid).append(",");} catch (Exception e) {webSocketMap.remove(uid);log.info("客户端心跳检测异常移除: " + uid + ",心跳发送失败,已移除!");}}else {log.info("客户端心跳检测异常不存在: " + uid + ",不存在!");}});log.info("客户端心跳检测结果: " + uids + "连接正在运行");return webSocketMap.size();}/*** 连接是否存在* @param uid* @return boolean*/public static boolean isConnected(String uid) {if (Objects.nonNull(webSocketMap) && webSocketMap.containsKey(uid)) {return true;} else {return false;}}
}

2.3、Controller用于测试主动发送消息

@RestController
@RequestMapping("/test")
public class WebSocketController{/*** 检验连接* @date 2023/8/22* @Param * @param webSocketId* @return * @return String*/@GetMapping("/webSocketIsConnect/{webSocketId}")public String webSocketIsConnect(@PathVariable("webSocketId") String webSocketId){if (WebSocketServer2.isConnected(webSocketId)) {return webSocketId+"正在连接";}return webSocketId+"连接断开!";}/*** 单发 消息* @author zhengfuping* @date 2023/8/22 10:25* @param webSocketId  指定 连接* @param message  数据* @param pwd 验证密码* @return String*/@GetMapping("/sendMessageByWayBillId")public String sendMessageByWayBillId(String webSocketId, String message, String pwd) {boolean flag = false;flag = WebSocketServer2.sendMessageByWayBillId(webSocketId, message);if (flag) {return "发送成功!";}return "发送失败!";}/*** 群发* @author zhengfuping* @date 2023/8/22 10:26* @param message* @param pwd*/@GetMapping("/broadSendInfo")public void sendInfo(String message, String pwd) {WebSocketServer2.sendInfo(message);}
}

2.4、定时任务,用于调用主动向客户端发送心跳

每10秒调用一次,主动检测,查看客户端连接是否异常断开,如果异常断开,则把该会话从集合中剔除掉,避免无限积压。

@Component
@Slf4j
public class WebSocketTask {@Scheduled(cron = "0/10 * * * * ?")public void clearOrders(){int num = 0;try {num = WebSocketServer2.sendPing("conn_success");} finally {log.info("websocket心跳检测结果,共【" + num + "】个连接");}}
}

三、测试

1、 测试消息发送

1.1、前端日志

在这里插入图片描述

1.2、后端日志

在这里插入图片描述

2、测试客户端异常断开,服务器通过心跳检测自动剔除掉异常对话。

因为测试不方便,只能通过断点实现效果

  1. 前端需要把主动关闭会话的注释掉,不让主动关闭
    在这里插入图片描述

  2. 先在连接关闭的地方和心跳检测地方打上断点,断点需要设置成Thread,要不然没法异步
    在这里插入图片描述

  3. 然后关闭掉一个前端页面让他把会话关闭,就会进入该断点位置,通过断点让它停住不让他去正常关闭

在这里插入图片描述4. 然后选择执行该心跳检测的断点代码
在这里插入图片描述
5. 进入心跳的循环给每个会话发送心跳检测,此时前端已经异常断开了
在这里插入图片描述
6. 因为前端已经关闭会话了,则发送心跳会失败,会直接进入catch块,然后把该会话从集合中剔除掉
在这里插入图片描述
最终日志
在这里插入图片描述

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

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

相关文章

springboot整合jquery实现前后端数据交互

一 实施逻辑 1.1 前端 <!doctype html> <html lang"en"><head><meta charset"UTF-8"><meta name"Generator" content"EditPlus"><meta name"Author" content""><meta n…

C# 生成唯一ID

1.首先通过nuget安装yitter.idgenerator 下面的三行代码搞定

win11 docker-desktop安装记录

win11安装Docker踩坑实录 马上开始正式工作了&#xff0c;需要用到docker&#xff0c;以前在win10上安装过&#xff0c;新电脑是win11&#xff0c;心想肯定会遇到坑&#xff0c;就浅浅记录一下 首先看一下安装要求 需要wsl2 那么就先进行 wsl的更新 wsl --update注意这里网络…

【STM32】串口初步使用

本文只作为学习笔记&#xff0c;对串口进行一个简单的介绍&#xff0c;正确的使用方式还需要进行实际的调试 通信的类型&#xff1a; 同步 异步 单工 双工 串行 并行 STM32的串口通信&#xff1a; 配置片上外设的控制寄存器&#xff0c;通信双方进行相同的配置&#xff0c;…

VScode代码自动补全提示

VScode代码自动补全提示 打开设置 搜索 Suggest:Snippets Prevent Quick Suggestions &#xff0c;去掉勾选 CtrlShiftP打开setting.json文件&#xff0c;添加以下代码 "editor.suggest.snippetsPreventQuickSuggestions": false,"editor.quickSuggestions…

C++标准库STL容器详解

目录 C标准模板库STL容器容器分类容器通用接口 顺序容器vectorlistdeque 容器适配器queuestackpriority_queue 关联容器&#xff1a;红黑树setmultisetmapmultimap 关联容器&#xff1a;哈希表unordered_set和unordered_multisetunordered_map和unordered_multimap 附1&#xf…

数据库集群的简单了解

Update 关于操作的日志 1.0 redo log 读一次写一次 一共2次, 不安全 注意redo log是顺写 而file是随机 所以Mysql做出类似HDFS的操作 行为日志和数据分离&#xff0c;但是不同的是&#xff0c;Mysql在内存中操作修改&#xff0c;如果不出事故&#xff0c;由内存中的行为来直接…

ES 7.6 - JAVA应用基础操作篇

ES 7.6 - JAVA应用基础操作篇 环境准备依赖配置 实体类准备使用说明索引/映射操作创建索引和映射索引和映射相关查询删除索引 文档操作插入数据更新数据删除数据批量操作 文档查询根据ID查询根据字段精准查询根据字段分词查询控制返回字段范围查询组合查询排序分页高亮搜索聚合…

装备一台ubuntu

配置远程连接&#xff1a; ubuntu的root用户无法远程登入问题&#xff1a; openssh安装命令&#xff1a; sudo apt-get install openssh-server 安装完成通过以下命令查看SSH是否启动 ps -e | grep ssh 如果只有ssh-agent表示还没启动&#xff0c;需要&#xff1a; /etc/i…

面试了38位Java候选人之后,我总结出了他们关于面试中的16条通病

都说现在Java面试卷&#xff0c;前段时间项目招人的时候&#xff0c;我刚好就作为面试官面试了一些人 在整个面试的过程中&#xff0c;我就发现了一些关于面试的通病 所以呢&#xff0c;趁着这次金&#xff08;铜&#xff09;九银&#xff08;铁&#xff09;十的机会&#xf…

matlab-对数据集加噪声并实现tsne可视化

matlab-对数据集加噪声并实现tsne可视化 最近才知道&#xff0c;原来可以不用模型&#xff0c;也能实现对数据集数据的可视化。 **一、**以COIL-100数据集为例子。 问题&#xff1a; 前提&#xff1a;首先对COIL-100数据集根据角度0-175和180-255&#xff0c;分别划分成C1,C…

动态场景建图 Removert(offline) 和 DynamicFilter(online)前端部分对比

1.Removert 简单来说2020年的REMOVERT是针对动态环境下的建图进行优化的一篇很好的作品。 针对的主要问题&#xff1a;若是采用点云特征进行匹配的话&#xff0c;动态障碍物在预处理阶段也会被剔除。那么&#xff0c;另一个方面&#xff0c;动态障碍物对点云地图的构建的影响在…

Moonbeam生态跨链互操作项目汇总

立秋已过&#xff0c;今年的夏天已经接近尾声&#xff0c;即将迎来凉爽的秋天。Moonbeam生态一同以往持续成长&#xff0c;在8月也举办了不少活动、完成集成合作以及协议更新。让我们一同快速了解Moonbeam生态项目近期发生的大小事件吧&#xff01; Moonwell Moonwell是一个建…

查局域网所有占用IP

查局域网所有占用IP 按&#xff1a;winr 出现下面界面&#xff0c;在文本框中输入 cmd 按确定即可出现cmd命令界面 在cmd命令窗口输入你想要ping的网段&#xff0c;下面192.168.20.%i即为你想要ping的网段&#xff0c;%i代表0-255 for /L %i IN (1,1,254) DO ping -w 1 -n 1…

linux/centos zookeeper 使用记录

配置cfg 下载zookeeper-3.4.14.tar.gz负责到centos服务器解压 /xxx/zookeeper-3.4.14/conf/下创建zoo.cfg文件并配置以下属性&#xff0c;/bsoft/zookeeperdata/目录先预先创建 tickTime2000 initLimit10 syncLimit5 dataDir/bsoft/zookeeperdata/ clientPort2181zk启动/重启/关…

11.物联网lwip,网卡原理

一。LWIP协议栈内存管理 1.LWIP内存管理方案 &#xff08;1&#xff09;堆heap 1.灰色为已使用内存 2.黑色为未使用内存 3.紫色为使用后内存 按照某种算法&#xff0c;把数据放在内存块中 &#xff08;2&#xff09;池pool 设置内存池&#xff0c;设置成大小相同的内存块。 2…

Easy Rules规则引擎(2-细节篇)

目录 一、序言二、规则引擎参数配置实例1、skipOnFirstAppliedRules示例(1) FizzRule(2) BuzzRule(3) FizzBuzzRule(4) NonFizzBuzzRule(5) FizzBuzzRulesLauncher 2、skipOnFirstNonTriggeredRule示例3、skipOnFirstFailedRule示例 三、组合规则1、UnitRuleGroup组合规则2、Ac…

基于Java的基数排序(详述)

基于Java的基数排序&#xff08;详述&#xff09; 原理介绍Java实现文献参考 原理介绍 一、什么是基数排序 &#xff08;1&#xff09;通过键值得各个位的值&#xff0c;将要排序的元素分配至一些桶中&#xff0c;达到排序的作用 &#xff08;2&#xff09;基数排序法是属于稳…

Unity Meta Quest MR 开发教程:(二)自定义透视 Passthrough【透视功能进阶】

文章目录 &#x1f4d5;教程说明&#x1f4d5;动态开启和关闭透视⭐方法一&#xff1a;OVRManager.instance.isInsightPassthroughEnabled⭐方法二&#xff1a;OVRPassthroughLayer 脚本中的 hidden 变量 &#x1f4d5;透视风格 Passthrough Styling⭐Inspector 面板控制⭐代码…

固定资产台账怎么管理

固定资产台账是指企业对固定资产进行登记、分类、统计和管理的账簿。固定资产管理系统是一款专业的固定资产管理软件&#xff0c;可以帮助企业实现资产全生命周期管理&#xff0c;包括资产采购、入库、领用、归还、维修、报废等环节。系统具有实时监控、预警提醒、报表分析等功…