解决 JS WebSocket 心跳检测 重连

解决 JS WebSocket 心跳检测 重连

在这里插入图片描述

文章目录

      • 解决 JS WebSocket 心跳检测 重连
        • 一、WebSocket 心跳检测的作用
        • 二、心跳检测的处理方案
          • 1. 创建 WebSocket 连接
          • 2. 心跳参数设置
          • 3. 心跳检测逻辑
          • 4. 心跳包响应处理
          • 5. 断线重连机制
        • 三、总结

一、WebSocket 心跳检测的作用

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。然而,由于网络条件、防火墙设置或服务器配置等因素,WebSocket 连接可能会因为长时间没有数据传输而被认为是非活跃的,进而被关闭。为了保持连接的稳定性和可靠性,WebSocket 心跳检测机制显得尤为重要。其主要作用包括:

  1. 保持连接活跃:通过定期发送心跳包,可以确保 WebSocket 连接保持活跃状态,避免因长时间无数据传输而被网络设备或防火墙关闭。
  2. 检测连接状态:心跳包的发送和接收可以实时检测连接的状态。如果服务器没有响应心跳包,客户端可以判断连接可能已经断开,并采取相应的处理措施,如重新连接或显示错误信息。
  3. 减少资源浪费:通过心跳机制,可以及时关闭无效的连接,减少服务器资源的浪费。

二、心跳检测的处理方案

在 JavaScript 中,实现 WebSocket 心跳检测主要涉及到前端定时发送心跳包和检测服务器的响应。以下是一个详细的处理方案:

1. 创建 WebSocket 连接

首先,需要创建一个 WebSocket 连接。

const socket = new WebSocket('ws://your-websocket-server');
2. 心跳参数设置

定义心跳间隔和心跳超时时间。

const heartbeatInterval = 30 * 1000; // 心跳间隔为30秒
const heartbeatTimeout = 60 * 1000; // 心跳超时时间为60秒
3. 心跳检测逻辑

通过 JavaScript 的 setIntervalsetTimeout 函数来实现心跳检测逻辑。

let heartbeatIntervalId, heartbeatTimeoutId;// 心跳检测启动函数
function startHeartbeat() {heartbeatIntervalId = setInterval(function() {socket.send('ping'); // 发送心跳包// 重置心跳超时定时器clearTimeout(heartbeatTimeoutId);heartbeatTimeoutId = setTimeout(function() {console.log('Heartbeat timeout, closing the connection.');socket.close(); // 超时未收到响应,关闭连接// 这里可以添加重新连接的逻辑}, heartbeatTimeout);}, heartbeatInterval);
}// WebSocket 连接打开时启动心跳检测
socket.onopen = function() {console.log('WebSocket connection established.');startHeartbeat();
};// 收到服务器消息时处理
socket.onmessage = function(event) {// 判断是否为心跳响应(如pong消息)if (isPongMessage(event.data)) {// 重置心跳超时定时器clearTimeout(heartbeatTimeoutId);// 如果需要,可以再次启动心跳定时器(在某些实现中可能不需要)} else {// 处理其他消息}
};// 判断消息是否为pong消息
function isPongMessage(message) {return message === 'pong';
}// 连接关闭时清除定时器
socket.onclose = function() {console.log('WebSocket connection closed.');clearInterval(heartbeatIntervalId);clearTimeout(heartbeatTimeoutId);// 可以添加重新连接的逻辑
};// 处理错误
socket.onerror = function(error) {console.error('WebSocket error:', error);// 处理错误,例如重新连接
};

4. 心跳包响应处理

在服务器端,需要配置以响应客户端发送的心跳包。当服务器收到心跳包(如 'ping')时,应回复一个心跳响应(如 'pong')。

5. 断线重连机制

为了进一步增强连接的稳定性,可以在连接关闭时(onclose 事件触发时)添加自动重连的逻辑。这可以通过递归调用创建 WebSocket 连接的函数或使用第三方库(如 ReconnectingWebSocket)来实现。

function reconnect() {setTimeout(function() {// 重新创建 WebSocket 连接socket = new WebSocket('ws://your-websocket-server');// 重新绑定事件处理函数socket.onopen = function() { ... };socket.onmessage = function(event) { ... };socket.onclose = function() { ... };socket.onerror = function(error) { ... };// 启动心跳检测startHeartbeat();}, 1000); // 延迟1秒重连,避免过于频繁
}// 在 onclose 中添加重连逻辑
socket.onclose = function() {console.log('WebSocket connection closed. Attempting to reconnect...');reconnect();
};
三、总结

通过心跳检测机制,JavaScript WebSocket 应用能够保持连接的稳定性和可靠性。通过定期发送心跳包并检测服务器的响应,可以及时发现并解决连接问题,确保数据的实时传输。同时,通过实现断线重连机制,可以进一步提升用户体验和应用的健壮性。

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

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

相关文章

序列化组件对比

1、msgpack介绍 1.MsgPack产生的数据更小,从而在数据传输过程中网络压力更小 2.MsgPack兼容性差,必须按照顺序保存字段 3.MsgPack是二进制序列化格式,兼容跨语言 官网地址: https://msgpack.org/ 官方介绍:Its lik…

C++ 移动构造函数为什么设置noexcept?

答案显然是&#xff1a; 移动构造函数设置了noexcept后STL的容器可以显著提高性能。 For example: class MyClass { public:MyClass(int v) { val v; }MyClass(const MyClass& o) {val o.val;std::cout << "Copy constructor " << val << …

Go 语言协程管理精解

1.基础 协程切换需要操作寄存器&#xff0c;这些操作需要通过汇编辅助实现。另外&#xff0c;每一个协程都有一个协程栈&#xff0c;实际上协程栈也是有结构的。汇编程序和栈结构这些概念可能大部分开发者都不太了解&#xff0c;在介绍协程管理之间&#xff0c;先简要介绍。 1…

一、undo log、Buffer Pool、WAL、redo log

目录 1、undo log2、Buffer Pool3、WAL4、redo log5、总结6、问题 1、undo log undo log日志是一种用于撤销回退的逻辑日志&#xff0c;在事务未提交前会记录相反的操作到undo log&#xff0c;当事务回滚&#xff0c;使用undo log 进行回滚&#xff0c;保证了事务的原子性。MV…

【生活英语】1、高兴与难过

【生活英语】1、高兴与难过 一、我非常非常开心二、心情三、不开心四、运气五、英语对话1、We broke up2、中奖了 一、我非常非常开心 (1) I’m really happy. (2) I’m really overjoyed. (3) I couldn’t be happier. I couldn’t agree with you more. 我非常赞同你。 (4) …

C++ TinyWebServer项目总结(8. 高性能服务器程序框架)

《Linux 高性能服务器编程》一书中&#xff0c;把这一章节作为全书的核心&#xff0c;同时作为后续章节的总览。这也意味着我们在经历了前置知识的学习后&#xff0c;正式进入了 Web 服务器项目的核心部分&#xff01; 前置内容回顾&#xff1a; 1. C TinyWebServer项目总结&…

每日一问:GET请求和POST请求的区别

每日一问&#xff1a;GET请求和POST请求的区别 在Web开发中&#xff0c;GET请求和POST请求是最常见的两种HTTP请求方法。尽管它们在功能上有许多相似之处&#xff0c;但在使用场景、数据传递方式、缓存策略等方面存在显著差异。了解这些区别不仅有助于我们在开发中做出正确的选…

Docker拉取镜像-2024-07-有效

Docker拉取镜像-有效 配置加速地址 首先&#xff0c;创建Docker配置目录&#xff1a;sudo mkdir -p /etc/docker然后&#xff0c;编辑daemon.json文件&#xff0c;添加以下加速地址&#xff1a;sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors"…

go gc信息如何查看

目录 1.几种常见方法1.1.设置环境变量 GODEBUG打印GC日志1.2.使用 debug.ReadGCStats1.3.使用 runtime.ReadMemStats 2.GC日志打印示例3.参考 在Go语言中&#xff0c;可以通过设置环境变量和使用运行时包中的调试功能来打印垃圾回收&#xff08;GC&#xff09;的信息。 1.几种…

等保测评中的安全测试方法

等保测评&#xff0c;即信息安全等级保护测评&#xff0c;是我国网络安全领域的重要评估机制&#xff0c;用于验证网络系统或应用是否满足相应的安全保护等级要求。在等保测评中&#xff0c;安全测试方法扮演着至关重要的角色。本文将详细介绍等保测评中常用的安全测试方法及其…

LinkedHashMap和TreeMap的基本使用

一.LinkedHashMap集合&#xff1a;&#xff08;是HashMap集合的儿子&#xff0c;Map集合的孙子&#xff09; 1.特点&#xff1a; 2.代码实现&#xff1a; 1)键的唯一性&#xff1a; package com.itheima.a01myMap; ​ import java.util.LinkedHashMap; ​ public class A07_…

二十三种模式之单例模式(基础了解)

1.设计模式的分类 创建型模式(五种)&#xff1a;工厂方法模式、单例模式、抽象工厂模式、原型模式、建造者模式。结构型模式(七种)&#xff1a;适配器模式、代理模式、装饰器模式、桥接模式、外观模式、享元模式、组合模式。行为型模式(十一种)&#xff1a;状态模式、模板方法…

Flamingo中的Perceiver Resampler

在 Flamingo 模型中&#xff0c;Perceiver Resampler 是一个关键组件&#xff0c;用于将输入的多模态数据&#xff08;如图像和文本&#xff09;转化为适合Transformer处理的表示形式。具体来说&#xff0c;它是为了解决高维视觉输入&#xff08;如图像&#xff09;和低维语言表…

【Docker项目实战】使用Docker部署webtop桌面版Linux环境

【Docker项目实战】使用Docker部署webtop桌面版Linux环境 一、webtop介绍1.1 webtop简介1.2 主要特点1.3 使用场景二、webtop相关说明2.2 webtop支持架构2.2 镜像版本说明三、本地环境介绍3.1 本地环境规划3.2 本次实践介绍四、本地环境检查4.1 检查Docker服务状态4.2 检查Dock…

YOLOv8目标检测部署RK3588全过程,附代码pt->onnx->rknn,附【详细代码】

目录 一、训练yolov8模型&#xff0c;得到最佳权重文件best.pt 二、pt转onnx,即best.pt->best11.onnx 1、对下载的YOLOv8代码修改 2、加入模型导出功能&#xff0c; 3、导出指令采用如下代码 三、ONNX转RKNN 四、RK3588部署 1、拷贝rknn文件到rk3588板子内 2、执行…

48.x86游戏实战-封包抓取进图call

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

使用Supervisor守护Nginx进程

supervisor是个好工具。superviosr是一个Linux/Unix系统上的进程监控工具&#xff0c;Supervisor是用Python开发的一套通用的进程管理程序&#xff0c;能将一个普通的命令行进程变为后台daemon&#xff0c;并监控进程状态&#xff0c;异常退出时能自动重启。只要在supervisor的…

递归神经网络 (RNN) 简介

文章目录 一、介绍二、什么是递归神经网络 &#xff08;RNN&#xff09;&#xff1f;三、展开递归神经网络四、训练递归神经网络五、RNN 的类型六、现实生活中的 RNN 用例七、RNN 的两个主要限制八、RNN的变体8.1 双向递归神经网络 &#xff08;BRNN&#xff09;8.2 长短期记忆…

YOLOv8改进 | 融合改进 | C2f融合Faster-GELU模块提升检测速度【完整代码 + 主要代码解析】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

240824字节笔试题复盘

测试/测试开发方向 1、用户文档测试场景 2、大根堆排列顺序 3、时间复杂度对比 4、资源分配 5、矩阵排列 6、TCP和UDP区别 7、栈 8、用例分析与选择 9、信息脱敏 10、数据库并发 11、锁 12、边界值等价类用例设计 13、信息安全与防御 14、有关复选框的测试用例 …