WebSocket封装

提示：记录工作中遇到的需求及解决办法

---

前言

本文将介绍 WebSocket 的封装，比如：心跳机制，重连和一些问题如何去处理

---

二、背景

之前，钱包相关的查询，我们是使用的轮询方案来做的，后来更新了一次需求，需要做一些实时数据统计的更新，然后顺带给钱包的余额也用长连接来做了，好，那么故事就开始了…

某天，

「老板：」 我钱怎么没了，但是我这里查账户还有。

「我的内心：」 恩？这玩意难道说… 后端没返？

和后端沟通以后，感觉是返回了的，被挤账号了？排查了一段时间以后，最终我将问题锁定在手机息屏的操作上。

因为我们是一个 「H5」 的项目，APP 是嵌套在 webview 中，所以不能操作原生的事件来处理，只能将方案控制在浏览器提供的事件来处理。

好了，接下来各位可以看我是如何处理这个问题，如果没有搞过也是可以有不少收获，也欢迎大神评论区交流其他方案。

三、WebSocket

3.1 什么是 WebSocket ？为什么使用他？

以下是百度百科中对 「WebSocket」 的定义：

WebSocket 是一种在单个 TCP 连接上进行 全双工 通信的协议。WebSocket 通信协议于2011年被 IETF 定为标准 RFC 6455，并由 RFC7936 补充规范。WebSocket API 也被 W3C 定为标准。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

「WebSocket 的关键特点」

1. 「双向通信（Full Duplex）」
   • 客户端和服务器都可以主动发送数据，而不是像 HTTP 一样只能由客户端发起请求。
2. 「实时性」
   • 消息可以实时传递，延迟更低，适合需要实时更新的场景。
3. 「持久化连接」
   • 使用单个 TCP 连接完成多次数据交互，无需为每次通信重新建立连接。
4. 「轻量级协议」
   • WebSocket 头部信息非常小，比传统 HTTP 请求的头部要轻量。
5. 「节约资源」
   • 长连接减少了资源消耗，特别是在频繁通信的场景中。

上述中，是 AI 给我们总结的 WebSocket 的特点，接下来我们要知道我们为什么使用他，HTTP 他能不能做，他的局限性又在哪里？

「传统 HTTP 的局限性：」

1. HTTP 是基于请求-响应模型的，客户端必须发起请求，服务器才能返回数据。
2. 如果需要实时更新（如股票价格、在线聊天），通常需要使用轮询（Polling）或长轮询（Long Polling），这会导致：
   • 高资源消耗（频繁的连接建立和断开）。
   • 高网络流量（每次请求都包含冗长的 HTTP 头部信息）。
   • 更高的延迟（数据可能需要等待较长时间才能返回）。

其实 HTTP 是可以实现的，如果 HTTP 请求频繁三次握手和四次挥手的操作会占用大量资源，HTTP/1.1 以后开启了 「Keep-Alive (长连接)」，可以复用连接，但是实时的情况下，响应模型仍然会导致较高的延迟和资源消耗。

相比之下，WebSocket 通过一次握手建立连接以后，就可以保持双向通信，服务器可以主动推送数据，无需客户端轮询。解决了 HTTP 带来的一些痛点。

四、封装 WebSocket

我们将实现以下几个功能点：

• 「重连」
• 「心跳机制」
• 「事件回调」
• 「连接状态管理」
• 「销毁」

4.1 Javascript 版本

class ReSocket {constructor(url, options = {}) {this.url = url; // WebSocket 服务器地址this.options = options; // 可选参数this.socket = null; // WebSocket 实例this.maxReconnectTimes = options.maxReconnectTimes || 5; // 最大重连次数this.reconnectTimes = 0; // 当前重连次数this.reconnectInterval = options.reconnectInterval || 3000; // 重连间隔时间（毫秒）this.isClosed = false; // 是否已关闭this.isOpen = false; // 是否已打开this.isConnect = false; // 是否已连接this.isReconnecting = false; // 是否正在重连this.isDestroyed = false; // 是否已销毁this.reconnectTimer = null; // 重连定时器this.heartbeatTimer = null; // 心跳定时器this.heartbeatInterval = options.heartbeatInterval || 30000; // 心跳间隔时间（默认30秒）this.heartbeatData = options.heartbeatData || "ping"; // 心跳数据this.onMessageCallback = null; // 消息接收回调this.onOpenCallback = null; // 连接成功回调this.onCloseCallback = null; // 连接关闭回调}// 创建WebSocket实例createSocket() {this.socket = new WebSocket(this.url);this.socket.onopen = () => {this.isOpen = true;this.isConnect = true;this.reconnectTimes = 0; // 重连次数归零this.startHeartbeat(); // 启动心跳机制if (this.onOpenCallback) this.onOpenCallback(); // 调用连接成功回调};this.socket.onmessage = event => {if (this.onMessageCallback) this.onMessageCallback(event.data); // 调用消息接收回调};this.socket.onclose = () => {this.isOpen = false;this.isConnect = false;this.stopHeartbeat(); // 停止心跳机制if (this.onCloseCallback) this.onCloseCallback(); // 调用连接关闭回调if (!this.isClosed && this.reconnectTimes < this.maxReconnectTimes) {this.reconnect(); // 尝试重连}};this.socket.onerror = error => {console.error("WebSocket 错误: ", error); // 错误处理};}// 开始连接connect