WebSocket 断网重连、心跳检测功能封装

2024-06-04 06:12
文章标签 封装 功能 检测 websocket 重连 心跳 断网

本文主要是介绍WebSocket 断网重连、心跳检测功能封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 简介
    • 特点
    • 优缺点
    • 使用场景
  • 用法
  • 封装
    • 断网重连
    • 心跳检测
    • WebSocket 封装
  • 注意

简介

WebSocket协议是基于TCP协议上的独立的通信协议，在建立WebSocket通信连接前，需要使用HTTP协议进行握手，从HTTP连接升级为WebSocket连接。

浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 一旦WebSocket连接建立，服务器和客户端就可以通过发送消息来进行实时通信。这种双向通信机制。

Websocket 协议与 HTTP 协议没有关系，它是一个建立在 TCP 协议上的全新协议，为了兼容 HTTP 握手规范，在握手阶段依然使用 HTTP 协议，握手完成之后，数据通过 TCP 通道进行传输。

Websoket 数据传输是通过 frame 形式，一个消息可以分成几个片段传输。这样大数据可以分成一些小片段进行传输，不用考虑由于数据量大导致标志位不够的情况。也可以边生成数据边传递消息，提高传输效率。

WebSocket定义了两种URI格式, ws:// 和 wss:// ，类似于 HTTP 和 HTTPS , ws:// 使用明文传输，默认端口为80，wss:// 使用TLS加密传输，默认端口为443。

特点

  • 双向通信：服务器和客户端可以通过发送消息进行实时双向通信。

  • 持久连接：WebSocket连接是持久的，不需要在每次通信时重新建立连接。

  • 低开销：与传统的HTTP请求相比，WebSocket通信的开销较低，因为不需要频繁地建立和关闭连接。

  • 低延迟：由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少。

  • 支持跨域：WebSocket协议支持跨域通信，可以在不同域名或端口之间进行通信。

  • 减少数据传输：由于WebSocket是基于消息的，而不是基于请求/响应的，因此可以减少不必要的数据传输，从而提高传输效率。

优缺点

优点：
双向通信。客户端和服务端双方 都可以主动发起通讯。 没有同源限制。客户端可以与任意服务端通信，不存在跨域问题。 数据量轻。第一次连接时需要携带请求头，后面数据通信都不需要带请求头，减少了请求头的负荷。 传输效率高。因为只需要一次连接，所以数据传输效率高。

缺点：
长连接需要后端处理业务的代码更稳定，推送消息相对复杂； 兼容性，WebSocket 只支持 IE10 及其以上版本。 服务器长期维护长连接需要一定的成本，各个浏览器支持程度不一； 【需要后端代码稳定，受网络限制大，兼容性差，维护成本高，生态圈小】

使用场景

  1. 协同编辑：

    • 场景描述：WebSocket可用于实现多人协同编辑，如在线文档协作、团队代码编辑等。
    • 实际应用：多个用户可以同时编辑同一个文档或代码文件，他们的编辑结果会实时地同步到其他用户的界面上。
      .

  2. 实时监控：

    • 场景描述：WebSocket适用于实时监控系统，如监控设备的运行状态、实时监测交通流量等。
    • 实际应用：服务器可以实时地将监控数据推送给客户端，客户端可以及时地显示最新的监控信息。
      .

  3. 实时聊天：

    • 场景描述：WebSocket是即时通讯的理想选择，如在线聊天室、多人游戏等。
    • 实际应用：客户端和服务器可以实时地发送和接收消息，无需频繁地发起HTTP请求。
      .

  4. 实时数据更新：

    • 场景描述：WebSocket能够实时推送数据更新，如实时股票行情、实时天气预报等。
    • 实际应用：服务器可以实时地将最新的数据推送给客户端，客户端无需主动发起请求。
      .

  5. 游戏开发：

    • 场景描述：WebSocket在游戏开发中具有重要作用，特别是在多人在线游戏中。
    • 实际应用：
      • 多人游戏协同：允许多个客户端同时连接到服务器，使多人协同游戏变得容易。
      • 实时聊天：游戏内的实时聊天变得非常容易实现。
      • 服务器推送：服务器可以主动推送消息给客户端，降低了服务器和网络的负担。
      • 实时排行榜和统计：游戏服务器可以实时更新排行榜和统计信息。
      • 游戏状态同步：通过建立持久的WebSocket连接，游戏服务器可以实时广播游戏状态的更新。

用法

在JavaScript中使用WebSocket相当直观。以下是一个基本的WebSocket客户端使用示例，它演示了如何连接到WebSocket服务器、发送消息、接收消息以及处理连接关闭。

首先，确保你的WebSocket服务器已经启动并在监听某个端口（比如ws://localhost:8080）。

// 创建一个新的WebSocket实例，连接到指定的URL  
var socket = new WebSocket('ws://localhost:8080');  // 连接打开事件  
socket.onopen = function(event) {  console.log("WebSocket连接已打开");  // 连接打开后，可以发送消息   socket.send('Hello Server!');  
};  // 接收消息事件  
socket.onmessage = function(event) {  console.log("收到来自服务器的消息: " + event.data);  // 处理接收到的消息  // 可以将event.data解析为JSON或其他格式  // let data = JSON.parse(event.data);  
};  // 错误事件  
socket.onerror = function(error) {  console.error('WebSocket连接发生错误:', error);  // 在这里处理错误情况  
};  // 连接关闭事件  
socket.onclose = function(event) {  if (event.wasClean) {  console.log("WebSocket连接已正常关闭");  } else {  console.log("WebSocket连接发生异常关闭");  }  // 可以在这里尝试重新连接  
};  // 发送消息的函数  
function sendMessage(message) {  if (socket.readyState === WebSocket.OPEN) {  socket.send(message);  } else {  console.log('WebSocket连接未打开，消息未发送: ' + message);  }  
}  // 你可以在其他地方调用sendMessage函数来发送消息  
// sendMessage('这是一条新的消息');  // 当你不再需要WebSocket连接时，可以手动关闭它  
// socket.close();

  • 创建了一个新的WebSocket对象，并指定了要连接的WebSocket服务器URL

  • 为WebSocket对象添加了几个事件监听器，以处理连接建立、接收到消息、发生错误和连接关闭等事件:

    • onopen：在连接建立时触发，你可以在这个事件处理函数中发送初始消息

    • onmessage：在接收到消息(来自服务器)时触发，你可以在这个事件处理函数中处理接收到的消息

    • onerror：在发生错误时触发

    • onclose：在连接关闭时触发

  • sendMessage函数是一个简单的封装，用于在WebSocket连接打开时发送消息。如果连接未打开，它会打印一条消息到控制台。

  • 最后，调用 socket.close() 来手动关闭 WebSocket 连接。但通常，当不再需要 WebSocket 连接时，或者当服务器关闭连接时，连接会自动关闭。

封装

封装一个支持断网重连、心跳检测功能，并且兼容原生WebSocket写法的JavaScript WebSocket类

断网重连

WebSocket 断网重连（Reconnect after Network Disconnection）是指在 WebSocket 连接因为网络问题（如网络不稳定、临时断网、服务器宕机等）而断开后，客户端能够自动检测到连接已断开，并在网络恢复后尝试重新建立与服务器的 WebSocket 连接的过程。

在网络通信中，由于各种不可控因素，WebSocket 连接可能会意外断开。为了确保服务的连续性和可用性，很多 WebSocket 客户端库或框架都会提供断网重连的功能。

  1. 连接状态监听：客户端需要监听 WebSocket 的 onclose 事件，该事件会在连接关闭时被触发。一旦接收到 onclose 事件，客户端就知道连接已经断开。

  2. 重连策略：在连接断开后，客户端会根据预定义的重连策略来决定是否尝试重新连接。重连策略可以包括重连间隔、重连次数限制等。例如，客户端可能会等待一段时间后再次尝试连接，如果连接仍然失败，它会继续等待更长的时间再次尝试，直到达到最大重连次数或用户干预。

  3. 重连实现：在决定重连后，客户端会重新调用 WebSocket 的构造函数或相关方法，以尝试与服务器建立新的 WebSocket 连接。如果连接成功，客户端会恢复正常的通信。

  4. 心跳检测：为了更准确地检测连接状态，很多 WebSocket 客户端还会实现心跳检测机制。客户端定期向服务器发送心跳消息，如果服务器在规定的时间内没有响应，客户端就认为连接已经断开，并开始执行重连逻辑。

  5. 日志和通知：在重连过程中，客户端可能会记录日志以便后续分析，并在需要时向用户或开发者发送通知。

.

心跳检测

WebSocket 心跳（Heartbeat）是指为了在 WebSocket 连接中检测连接的活跃性和可用性而定期发送的简短消息。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许服务器主动向客户端推送信息，客户端也可以主动向服务器发送信息。

由于网络环境的复杂性，如网络不稳定、防火墙或代理服务器配置不当等原因，WebSocket 连接有时可能会“假死”，即连接仍然处于打开状态（readyState 为 OPEN），但实际上数据已经无法传输。在这种情况下，如果没有任何数据在连接上传输，双方都无法得知连接是否已经失效。

为了解决这个问题，可以定期发送心跳消息来检测连接的活跃性。心跳消息通常是一个简短的数据包，例如一个简单的字符串或数字。客户端和服务器都可以发送心跳消息，但通常是由客户端发送，因为服务器可以更容易地检测和管理多个连接。

当接收到心跳消息时，接收方会重置其心跳定时器，并知道连接仍然是活跃的。如果在指定的时间间隔内没有收到心跳消息，接收方可以认为连接已经失效，并采取相应的措施，如关闭连接、尝试重新连接或通知用户。

  1. 发送频率：心跳消息的发送频率应该根据具体的应用场景和网络环境来确定。过于频繁的心跳消息可能会增加网络负担，而发送间隔过长则可能无法及时发现连接问题。

  2. 消息内容：心跳消息的内容应该简短，以减少网络带宽的占用。通常，一个简单的字符串或数字就足够了。

  3. 处理接收到的消息：当接收到心跳消息时，接收方应该重置其心跳定时器，并继续等待下一个心跳消息。如果接收到非心跳消息，则应该根据应用的逻辑来处理。

  4. 重连机制：如果心跳检测发现连接已经失效，接收方应该尝试重新建立连接。重连的间隔和次数可以根据需要来配置。

.

WebSocket 封装

// ReliableWebSocket 类，封装了原生 WebSocket，支持断网重连和自动心跳功能  
class ReliableWebSocket {  // 构造函数，接收 WebSocket 服务器的 URL 和可选的配置选项  constructor(url, options = {}) {  this.url = url;                               // WebSocket 服务器的 URL  this.options = options;                       // 可选配置选项  // 重连间隔时间，默认为 5000 毫秒（5 秒）  this.reconnectInterval = options.reconnectInterval || 5000;  // 心跳间隔时间，默认为 30000 毫秒（30 秒）  this.heartbeatInterval = options.heartbeatInterval || 30000;  // 心跳消息内容，默认为 'ping'  this.heartbeatMessage = options.heartbeatMessage || 'ping';  // WebSocket 实例  this.socket = null;  // 心跳定时器  this.heartbeatTimer = null;  // 初始化 WebSocket 连接  this.init();  }  // 初始化 WebSocket 连接  init() {  // 创建 WebSocket 实例  this.socket = new WebSocket(this.url);  // 当 WebSocket 连接打开时  this.socket.onopen = (event) => {  // 开始发送心跳消息  this.startHeartbeat();  console.log('WebSocket 连接已打开');  };  // 当接收到 WebSocket 消息时  this.socket.onmessage = (event) => {  // 重置心跳定时器  this.resetHeartbeat();  console.log('收到消息:', event.data);  };  // 当 WebSocket 连接关闭时  this.socket.onclose = (event) => {  // 停止发送心跳消息  this.stopHeartbeat();  console.log('WebSocket 连接已关闭', event);  // 尝试重新连接  this.reconnect();  };  // 当 WebSocket 连接发生错误时  this.socket.onerror = (error) => {  console.error('WebSocket 连接发生错误:', error);  };  }  // 开始发送心跳消息  startHeartbeat() {  // 设置定时器，按照指定的间隔发送心跳消息  this.heartbeatTimer = setInterval(() => {  if (this.socket.readyState === WebSocket.OPEN) {  this.socket.send(this.heartbeatMessage);  }  }, this.heartbeatInterval);  }  // 重置心跳定时器  resetHeartbeat() {  // 清除旧的心跳定时器并重新开始  clearInterval(this.heartbeatTimer);  this.startHeartbeat();  }  // 停止发送心跳消息  stopHeartbeat() {  // 清除心跳定时器  clearInterval(this.heartbeatTimer);  }  // 尝试重新连接 WebSocket  reconnect() {  // 设置定时器，按照指定的间隔尝试重新连接  let intervalId = setInterval(() => {  try {  // 尝试重新初始化 WebSocket 连接  this.init();  // 如果连接成功，则清除定时器  clearInterval(intervalId);  } catch (e) {  console.error('重连失败，稍后重试...', e);  }  }, this.reconnectInterval);  }  // 发送消息到 WebSocket 服务器  send(data) {  if (this.socket.readyState === WebSocket.OPEN) {  this.socket.send(data);  } else {  console.error('WebSocket 连接未打开，无法发送消息');  }  }  // 关闭 WebSocket 连接  close() {  if (this.socket) {  this.socket.close();  }  }  // ... 可以继续封装其他 WebSocket 原生方法，如添加事件监听器等  
}  // 使用示例  
const ws = new ReliableWebSocket('ws://your-websocket-server-url');  
ws.send('Hello, Server!');  // 如果需要监听事件，可以在 ReliableWebSocket 类中添加事件触发逻辑  
// 例如，使用 EventEmitter 或者发布订阅模式

注意

  • WebSocket连接可以使用安全的WebSocket协议(wss://)进行保护，它使用SSL/TLS添加了额外的加密层。这确保了在客户端和服务器之间传输的数据的机密性和完整性。

  • WebSocke t是一种基于TCP的协议，支持长连接。在实际使用中，需要注意及时维护长连接，避免因连接长时间不活跃而被网络设备断开。为了确保长连接的稳定性，可以定时发送心跳包，以保持连接的活跃状态。

  • 大多数现代Web浏览器都支持WebSocket协议，包括Chrome、Firefox、Safari和Edge。然而，需要考虑WebSocket在旧浏览器或支持有限的环境中的兼容性。在这种情况下，可以使用回退机制。

这篇关于WebSocket 断网重连、心跳检测功能封装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1029282。

相关文章

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动，这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升：减少抖动，提高图像的清晰度和细节表现力，使得监控画面更加真实可信。 - 细节增强：在低光条件下，抖
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
烟火目标检测数据集 7800张 烟火检测 带标注 voc yolo

烟火目标检测数据集 7800张 烟火检测 带标注 voc yolo

一个包含7800张带标注图像的数据集，专门用于烟火目标检测，是一个非常有价值的资源，尤其对于那些致力于公共安全、事件管理和烟花表演监控等领域的人士而言。下面是对此数据集的一个详细介绍： 数据集名称：烟火目标检测数据集 数据集规模： 图片数量：7800张类别：主要包含烟火类目标，可能还包括其他相关类别，如烟火发射装置、背景等。格式：图像文件通常为JPEG或PNG格式；标注文件可能为X
阅读更多...
基于 YOLOv5 的积水检测系统：打造高效智能的智慧城市应用

基于 YOLOv5 的积水检测系统：打造高效智能的智慧城市应用

在城市发展中，积水问题日益严重，特别是在大雨过后，积水往往会影响交通甚至威胁人们的安全。通过现代计算机视觉技术，我们能够智能化地检测和识别积水区域，减少潜在危险。本文将介绍如何使用 YOLOv5 和 PyQt5 搭建一个积水检测系统，结合深度学习和直观的图形界面，为用户提供高效的解决方案。 源码地址： PyQt5+YoloV5 实现积水检测系统 预览： 项目背景
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring+MyBatis+jeasyui 功能树列表

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent
阅读更多...
JavaSE——封装、继承和多态

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性：封装、继承、多态 。而类和对象阶段，主要研究的就是封装特性。何为封装呢？简单来说就是套壳屏蔽细节 。     比如：对于电脑这样一个复杂的设备，提供给用户的就只是：开关机、通过键盘输入，显示器， USB 插孔等，让用户来和计算机进行交互，完成日常事务。但实际上：电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2