WebSocket开发(心跳监测)功能

news2025/2/24 1:08:45

前言

在之前的文章中完成了客服对话的Demo功能,但是现在的连接是无限制的长时间连接没有做心跳失活超时断连等功能,心跳的实现方法有很多种,并且WebSocket就提供了ping/pong类型的消息。

心跳的触发方式也分两种:

  • 客户端触发:如果是前端发送心跳,后端需要返回心跳,也就是ping pong的过程会有两次数据传递。
  • 服务端触发:后端来发送心跳的话,就只需要发送ping,前端不需要回应。

这两种后续的处理方式也有各自优缺点。

  • 客户端触发:
    • 优点
      • 灵活控制
      • 无需设置主动超时
      • 逻辑清晰
      • 服务端简单
    • 缺点
      • 两次消息传递
      • 消息内容容易篡改
  • 服务端触发:
    • 优点
      • 节省宽带
      • 服务端控制频率
      • 消息体固定
    • 缺点
      • 处理逻辑复杂
      • 需要添加定时任务
      • 考虑稳定性

两种方式各有利弊,看具体的应用场景选择心跳方式是最好的,这里使用客户端触发心跳进行Demo实验,前端变更比较容易,服务端也不需要写定时等处理复杂的业务,只需要在收到固定消息后返回对应消息即可。

1. WebSocket心跳

客户端触发心跳的话就是在服务端的OnMessage事件里进行截获处理,如果是接受参数为String,就在之前的逻辑之上加上判断健康检查的逻辑,功能很简单,客户端发送了特点消息直接返回对应的消息即可。

1.1 字符串消息

WebSocket已经设计了心跳,也就是Ping/Pong,这个功能可以到达检测链接是否可用,但是如果要携带数据还是需要自己用字符串对象的消息类型进行实现。

代码如下:

	@OnMessage
    public void onMessage(String message, Session session,@PathParam("clientId") String clientId){
        /**
         * 持久化
         */
        baseWebSocketService.saveClientSendMsg(clientId,message,new Date());
        /**
         * 处理消息
         */
        UserMessageModel userMessageModel = JSONObject.parseObject(message, UserMessageModel.class);
        if (userMessageModel == null){
            this.sendMessage(BaseResponseMessage.error(null,"传递参数结构异常"));
        }
        userMessageModel.setSendId(clientId);
        /**
         * 健康检查
         */
        if ("HEALTH".equals(userMessageModel.getMessage())){
            this.sendText(WebSocketHealthEnum.HEALTH.result);
            return;
        }

        /**
         * 发送消息
         */
        HashMap<String,WebSocketClient> hashMap = webSocketClientMap.get(WebSocketTypeEnum.getAcceptType(this.type));
        if (!CollectionUtils.isEmpty(hashMap)){
            if (StringUtils.isEmpty(bindKfClients.get(this.clientId))){
                List<UserMessageModel> list = new ArrayList();
                list.addAll(baseWebSocketService.queryClientSendMsg(clientId));
                list.forEach(model-> {
                    this.toCSucceed(model);
                });
            }else{
                this.toCSucceed(userMessageModel);
            }
        }else{
            baseWebSocketService.saveClientCompensateMsg(userMessageModel.getAcceptId(),message,(byte) 0);
            log.info("客户端:{} 发送消息到接受端:{} 不在线,放置到代发送列表,当前待发送列表:{}条",clientId,userMessageModel.getAcceptId());
            this.sendMessage(BaseResponseMessage.error(null,"接收端不在线"));
        }
    }

如果客户端发送了内容HEALTH则回复对应消息,我这里回复了SUCCESS

在这里插入图片描述

但是这样有个问题,用户发送了HEALTH这个字符串服务端会将这个消息当作健康检查进行处理,而不是消息,这样影响了用户端的使用。

还记得之前预留了一个发送类型字段sendType吗,这时候这个类型就起作用了,如果要做健康检查的操作就将这个sendType设置为HEALTH,服务端根据sendType字段进行判断业务处理,修改一下代码:

        /**
         * 健康检查
         */
        if (WebSocketHealthEnum.HEALTH.msg.equals(userMessageModel.getSendType())){
            this.sendText(WebSocketHealthEnum.HEALTH.result);
            return;
        }

1.2 Ping/Pong消息

  • Ping的协议头是0x9,Pong的协议头是0xA
  • 控制帧最大载荷为125bytes且不能拆分

服务端可以主动发生Ping/Pong消息,之前文章中写过WebSocket发送消息的四种类型,这里将上面发送Text文本类型换成发送Ping类型的消息,当然也可以发送Pong类型的消息。

代码如下:

        if (WebSocketHealthEnum.HEALTH.msg.equals(userMessageModel.getSendType())){
            try {
                session.getBasicRemote().sendPing(ByteBuffer.wrap("SUCCESS".getBytes()));
            } catch (IOException e) {
                throw new RuntimeException(e);
            }
            return;
        }

Ping消息是不会被我们的OnMessage事件接收的,所以不需要特殊处理,如果是Pong消息在服务的接收是可以的。

代码如下:

    @OnMessage
    public void onPong(PongMessage pongMessage) {
        ByteBuffer byteBuffer = pongMessage.getApplicationData();
    }

具体的业务可以二次处理

2. 服务心跳

上面的心跳是对每个客户端的心跳监测,服务的心跳也要做,服务的心跳就简单了,前端定时请求HTTP/HTTPS协议接口。

代码如下:

@Slf4j
@RestController
public class CheckHealthController {

    @GetMapping("/health")
    public ResponeApi health() {
        log.info("健康检查chatroom-IM --> 检查成功!");
        return ResponeApi.success(ResponeCodeEnum.SUCCESS,"SUCCESS");
    }
    
}

效果如下:

在这里插入图片描述

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

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

相关文章

微信小程序实现图片上传

前言 手机上传图片的功能大家一定都用过吧&#xff0c;今天教你用微信小程序实现这个小功能。 实现效果如下&#xff1a; 实现思路&#xff1a; 首先我们需要定义一个存放图片的数组&#xff0c;通过方法拿取图片的详细信息&#xff0c;然后调用微信小程序的 wx.uploadFile 方…

element ui datepicker时间控件实现范围选择周,季,年。

因项目要求&#xff0c;需日&#xff0c;周&#xff0c;月&#xff0c;季&#xff0c;年五种日期范围选择器&#xff0c;故参考文章&#xff08;在末尾&#xff09;后分享 一.效果图 二、版本及下载 1.实现需要修改源码&#xff0c;目前修改的版本为2.15.3&#xff0c;所以想要…

Vue3路由配置createRouter、createWebHistory、useRouter,useRoute

目录 手动配置Vue-router环境&#xff1a; 组件内部跳转路由、传参useRouter,useRoute Vue3和Vue2基本差不多&#xff0c;只不过需要将createRouter、createWebHistory从vue-router中引入&#xff0c;再进行使用。 手动配置Vue-router环境&#xff1a; 1、下载包&#xff1a…

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘result‘)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading result) 如题所示问题&#xff0c;耽误三天寻找bug&#xff0c;终于在我睡意朦胧之际发现了一道光&#xff0c;发现 await 出现的三个点&#xff1a; 于是打开 findAllCategory()这个函数 对应…

电商后台管理系统简介

项目介绍 黑马后台管理系统是一个电商后台管理系统的前端项目&#xff0c;基于VueElement实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能 开发技术 此项目开发我用到的技术有&#xff1a;vue2node.…

Vant 2 - 移动端 Vue 组件库 _ 问题记录

目录 Popup 弹出层 DatetimePicker 时间选择 Field 输入框 Picker 选择器 List 列表 Tab 标签页 发布初衷 &#xff1a; 记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题 &#xff0c; 方便以后再次遇到类似问题 &#xff0c; 能够快时查阅解决 &#xff0c; …

Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

问题&#xff1a;Vue3TypeScriptVite的项目中如何使用require动态引入类似于图片等静态资源&#xff01; 描述&#xff1a;今天在开发项目时&#xff08;项目框架为Vue3TypeScriptVite&#xff09;需要 动态引入静态资源&#xff0c;也就是img标签的src属性值为动态获取&#…

Lodash 使用及常用方法

简介 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 官网 Lodash 简介 | Lodash 中文文档…

TypeScript详解十六:类型声明(declare)

目录前言一、类型声明的作用&#xff1f;1.1 declare 关键字1.2 示例二、常见的几种类型声明2.1 普通类型声明2.2 外部枚举2.3 命名空间三、类型声明文件3.1 模拟类型声明文件&#xff0c;以 jquery 为例3.2 使用手动实现的jquery.d.ts声明文件3.3 第三方声明文件&#xff08;以…

Django web 开发(三) - Django的使用

文章目录Django安装Django安装Pythonpip加速安装Django创建项目文件介绍简单访问APP添加新的app注册app创建blog的页面templates模板templates模板语法单一变量列表循环(列表)字典循环(字典)列表套字典条件判断请求和响应案例: 用户登录数据库操作安装第三方模块ORM创建数据库D…

node版本、npm版本随意切换

前言 随着项目越做越多&#xff0c;难免会有a项目需要12.x的node版本&#xff0c;b项目需要>16.0.0的情况。 为了避免出现node版本切换的繁琐&#xff0c;特意找了这么一个工具&#xff0c;主要是方便管理node版本。 请按照以下步骤来实现 官方地址: 传送门 1、下载软件 …

使用react实现后台管理系统项目

一.开发React必须依赖三个库 1.react&#xff1a;包含react所必须的核心代码 2.react-dom&#xff1a;react渲染在不同平台所需要的核心代码 3.babel&#xff1a;将jsx转换成React代码的工具 二.React的依赖引入 1.方式一&#xff1a;直接CDN引入 2.方式二&#xff1a;下载后&…

vue高级特性总结

文章目录一、修饰符1、事件修饰符案例1案例22、按键修饰符案例33、表单修饰符案例4二、计算属性computed案例5三、监听器watch案例6案例7&#xff1a;当商品数量大于1000时&#xff0c;输入框中数字自动设置成1000&#xff1b;当商品数量小于0时&#xff0c;输入框中数字自动设…

vue中如何使用vue-pdf及相应报错解决

目录 一、安装npm 依赖 二、引入组件 1、html中使用组件 单页 多页 2、数据处理 单页 多页 三、项目使用--代码部分 四、报错解决 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf&#xff0c;vue3项目用pdfjs-dist一、安装npm 依赖…

【Vue】Vue简介、引入、命令式和声明式编程

&#x1f4ad;&#x1f4ad; ✨&#xff1a; 开始陆陆续续更新vue啦   &#x1f49f;&#xff1a;东非不开森的主页   &#x1f49c;&#xff1a;如果有幸和你一起学习一起进步&#xff0c;那就太棒啦&#xff0c;一起学习吧。&#x1f49c;&#x1f49c;   初识vue一、初识…

从零入门开源框架---若依(前后端分离版)

一、若依是什么&#xff1f; 若依它就是一个开源项目&#xff0c;别人写好的代码&#xff0c;我们拿来进行二次开发,它主要是做数据和权限管理系统。 二、使用背景 任何公司的各种大的项目必然需要一个后台权限管理系统&#xff0c;这是必然的&#xff0c;但是如果不想投入太多…

windows安装yarn 详细教程

1、yarn介绍&#xff1a;yarn是一个代码包管理器&#xff0c;它允许我们与来自世界各地的其他开发人员共享代码。想要更多了解可以进入官网查看&#xff1a;https://yarnpkg.com/getting-started 2、进入yarn官网&#xff0c;可以看见官网已经声明从新版本(16.10)开始&#xf…

Vue项目二 登录注册功能的实现

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、系统注册功能的实现1.配置注册页面路由2.注册页面的搭建3.api下发送ajax请求的文件创建二、后台数据服务的创建1.app.js文件的建立2.User.js文件的建立3.配置…

目前最流行的 5 大 Vue 动画库,使用后太炫酷了

⭐️ 本文首发自 前端修罗场(点击加入)&#xff0c;是一个由 资深开发者 独立运行 的专业技术社区&#xff0c;我专注 Web 技术、答疑解惑、面试辅导以及职业发展。现在加入&#xff0c;私聊我即可获取一次免费的模拟面试机会&#xff0c;帮你评估知识点的掌握程度&#xff0c;…

vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】

vue3 antd项目实战——table表格自定义筛选&#xff08;使用filters属性实现表头列columns自定义筛选&#xff09;往期知识调用&#xff08;步骤不懂就看这儿&#xff09;场景复现实战演示实例1——筛选发布状态&#x1f525;1、双向绑定表格列目录、表格数据2、编写列目录内容…