devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

赶快收藏！全网最佳websocket封装：完美支持断网重连、自动心跳！

作者：码创造者 | 2024-08-11 12:24:44

赞

踩

websocket 断网重连

  1. 大厂技术  高级前端  Node进阶
  2. 点击上方 程序员成长指北，关注公众号
  3. 回复1，加入高级Node交流群

简介

websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！

前几天，就遇到这样一个需求，要求界面的数据通过websocket实时推送，并且必须支持断网重连、自动心跳！

自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。

websokect的API非常简单

  1. // 创建ws连接
  2. const ws = new WebSocket('ws://localhost:8080/test');
  3. ws.onopen = function() {
  4.     console.log('WebSocket 连接已经建立。');
  5.     ws.send('Hello, server!');
  6. };
  7. ws.onmessage = function(event) {
  8.     console.log('收到服务器消息：', event.data);
  9. };
  10. ws.onerror = function(event) {
  11.     console.error('WebSocket 连接出现错误：', event);
  12. };
  13. ws.onclose = function() {
  14.     console.log('WebSocket 连接已经关闭。');
  15. }

但是，要封装一个支持断网重连、自动心跳的websokect没有那么容易！

封装成功演示

核心优势

我们先看我封装的websokect，首先，最重要的，它的使用方法和官方Api完全一致！零学习成本，上手即用！

  1. import WebSocketClient from "./WebSocketClient"
  2.  
  3. // 创建实例
  4. const ws = new WebSocketClient('ws://localhost:3200');
  5.  
  6. // 连接
  7. ws.connect()
  8. // 同原生方法
  9. ws.onclose(()=>{})
  10. // 同原生方法
  11. ws.onerror(()=>{})
  12. // 同原生方法
  13. ws.onmessage(()=>{
  14.   // 同原生方法
  15.   ws.send("自定义发送的数据")
  16. })
  17. // 同原生方法
  18. ws.onopen(()=>{})
  19.  
  20. // 关闭连接
  21. ws.close()

效果演示

后端服务创建

我们先使用node创建一个后端服务，安装ws库：

npm install ws

创建node index.js文件，引入WebSocket 服务器

  1. const WebSocket = require("ws");
  2.  
  3. const wss = new WebSocket.Server({ port: 3200 });
  4.  
  5. console.log("服务运行在http://localhost:3200/");
  6.  
  7. wss.on("connection", (ws) => {
  8.   console.log("[服务器]：客官您来了~里边请");
  9.   ws.send(`[websocket云端]您已经连接云端!数据推送中!`);
  10.   let index = 1;
  11.   const interval = setInterval(() => {
  12.     ws.send(`[websocket]数据推送第${index}次`);
  13.     index ++
  14.   }, 1000 * 10);
  15.  
  16.   ws.on("close", () => {
  17.     clearInterval(interval); // 清除定时器
  18.     console.log("[服务器]：客官下次再来呢~");
  19.   });
  20. });

我们启动这个服务

node index.js

现在，我们在前端服务内进行连接测试

前端websokect测试

我们先写前端的相关逻辑

  1. import { WebSocketClient } from '@/utils/dataDispatcher/WebSocketClient';
  2.  
  3. const ws = new WebSocketClient('ws://localhost:3200');
  4.  
  5. // 连接
  6. ws.connect();
  7. // 同原生方法
  8. ws.onclose(() => {});
  9. // 同原生方法
  10. ws.onerror(() => {});
  11. // 同原生方法
  12. ws.onmessage(() => {
  13.     // 同原生方法
  14.     ws.send('自定义发送的数据');
  15. });
  16. // 同原生方法
  17. ws.onopen(() => {});

启动项目，我们会发现控制台已经有了提示

cf9de37e83d28f5c15fc9d889dd1f3c5.jpeg

心跳验证：

等待一段时间后，我们可以看到ws连接里，前端已经发送了多次心跳数据

f02a095224840a084ea0eb44b7ee122b.jpeg

服务端与客户端也一直在进行数据交互

1bf3fd625432840ac7a257dc6866ea7d.jpeg

断网重连验证：

可以看到，当我们断开服务端的时候，断网重连被自动触发。efacab7240fae02ca2f35eec0e14736e.jpeg

技术路线

基本框架搭建

  1. export class WebSocketClient {
  2.     // #socket链接
  3.     private url = '';
  4.     // #socket实例
  5.     private socket: WebSocket | null = null;
  6.     
  7.     constructor(url: string) {
  8.         super();
  9.         this.url = url;
  10.     }
  11.    
  12.     // >消息发送
  13.     public send(message: string): void {
  14.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  15.             this.socket.send(message);
  16.         } else {
  17.             console.error('[WebSocket] 未连接');
  18.         }
  19.     }
  20.  
  21.     // !初始化连接
  22.     public connect(): void {
  23.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  24.             return;
  25.         }
  26.         this.socket = new WebSocket(this.url);
  27.  
  28.         // !websocket连接成功
  29.         this.socket.onopen = event => {
  30.             console.log(`连接成功,等待服务端数据推送[onopen]...`);
  31.         };
  32.  
  33.         this.socket.onmessage = event => {
  34.         };
  35.  
  36.         this.socket.onclose = event => {
  37.             console.log(`连接断开[onclose]...`);
  38.         };
  39.  
  40.         this.socket.onerror = event => {
  41.             console.log(`连接异常[onerror]...`);
  42.         };
  43.     }
  44.  
  45.     // >关闭连接
  46.     public close(): void {
  47.         if (this.socket) {
  48.             this.socket.close();
  49.             this.socket = null;
  50.         }
  51.     }
  52. }

上述代码借助官方API实现了一个基本的 WebSocket 客户端，具有以下功能：

  • 初始化连接并处理各种 WebSocket 事件（打开、消息、关闭、错误）。

  • 发送消息到服务器。

  • 关闭连接。

现在，我们开始逐步完善代码，进行封装。

断网重连封装

  1. export class WebSocketClient{
  2.     // #socket链接
  3.     private url = '';
  4.     // #socket实例
  5.     private socket: WebSocket | null = null;
  6.     // #重连次数
  7.     private reconnectAttempts = 0;
  8.     // #最大重连数
  9.     private maxReconnectAttempts = 5;
  10.     // #重连间隔
  11.     private reconnectInterval = 10000; // 10 seconds
  12.   
  13.     constructor(url: string) {
  14.         super();
  15.         this.url = url;
  16.     }
  17.     // >消息发送
  18.     public send(message: string): void {
  19.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  20.             this.socket.send(message);
  21.         } else {
  22.             console.error('[WebSocket] 未连接');
  23.         }
  24.     }
  25.  
  26.     // !初始化连接
  27.     public connect(): void {
  28.         if (this.reconnectAttempts === 0) {
  29.             console.log(`初始化连接中...`);
  30.         }
  31.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  32.             return;
  33.         }
  34.         this.socket = new WebSocket(this.url);
  35.  
  36.         // !websocket连接成功
  37.         this.socket.onopen = event => {
  38.             // 重置重连尝试成功连接
  39.             this.reconnectAttempts = 0;
  40.             console.log(`连接成功,等待服务端数据推送[onopen]...`);
  41.         };
  42.  
  43.         this.socket.onmessage = event => {
  44.         };
  45.  
  46.         this.socket.onclose = event => {
  47.             if (this.reconnectAttempts === 0) {
  48.                 console.log(`连接断开[onclose]...`);
  49.             }
  50.             if (!this.stopWs) {
  51.                 this.handleReconnect();
  52.             }
  53.         };
  54.  
  55.         this.socket.onerror = event => {
  56.             if (this.reconnectAttempts === 0) {
  57.                 console.log(`连接异常[onerror]...`);
  58.             }
  59.         };
  60.     }
  61.  
  62.     // > 断网重连逻辑
  63.     private handleReconnect(): void {
  64.         if (this.reconnectAttempts < this.maxReconnectAttempts) {
  65.             this.reconnectAttempts++;
  66.             console.log(`尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
  67.             setTimeout(() => {
  68.                 this.connect();
  69.             }, this.reconnectInterval);
  70.         } else {
  71.             console.log(`最大重连失败，终止重连: ${this.url}`);
  72.         }
  73.     }
  74.  
  75.     // >关闭连接
  76.     public close(): void {
  77.         if (this.socket) {
  78.             this.socket.close();
  79.             this.socket = null;
  80.         }
  81.     }
  82. }

上述代码添加了自动断网重连的机制。其核心逻辑在于以下几个方面：

  1. 记录重连次数：通过 reconnectAttempts 属性记录当前已经尝试重连的次数。

  2. 设置最大重连次数：通过 maxReconnectAttempts 属性设置允许的最大重连次数。

  3. 重连逻辑：在 onclose 和 onerror 事件中调用重连处理函数 handleReconnect。

  4. 重连间隔：通过 reconnectInterval 属性设置每次重连的间隔时间，可以在每次重连时增加间隔以实现指数退避。

初始化连接并处理事件

在 connect 方法中，初始化 WebSocket 连接并为其设置事件处理函数。特别关注 onclose 和 onerror 事件，在连接关闭和出现错误时调用重连逻辑。

  1. public connect(): void {
  2.     if (this.reconnectAttempts === 0) {
  3.         console.log(`初始化连接中...`);
  4.     }
  5.     if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  6.         return;
  7.     }
  8.     this.socket = new WebSocket(this.url);
  9.  
  10.     this.socket.onopen = (event: Event) => {
  11.         this.reconnectAttempts = 0;
  12.         console.log(`连接成功,等待服务端数据推送[onopen]...`);
  13.     };
  14.     this.socket.onclose = (event: CloseEvent) => {
  15.         if (this.reconnectAttempts === 0) {
  16.             console.log(`连接断开[onclose]...`);
  17.         }
  18.         this.handleReconnect();
  19.     };
  20.  
  21.     this.socket.onerror = (event: Event) => {
  22.         if (this.reconnectAttempts === 0) {
  23.             console.log(`连接异常[onerror]...`);
  24.         }
  25.         this.handleReconnect();
  26.     };
  27. }

处理重连逻辑

在 handleReconnect 方法中，实现了实际的重连逻辑。该方法会递增 reconnectAttempts，检查是否达到最大重连次数，如果没有达到，则在指定的重连间隔后再次调用 connect 方法尝试重连。

  1. private handleReconnect(): void {
  2.     if (this.reconnectAttempts < this.maxReconnectAttempts) {
  3.         this.reconnectAttempts++;
  4.         console.log(`尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
  5.         setTimeout(() => {
  6.             this.connect();
  7.         }, this.reconnectInterval * this.reconnectAttempts); // 重连间隔可以增加，例如指数退避
  8.     } else {
  9.         console.log(`最大重连失败，终止重连: ${this.url}`);
  10.     }
  11. }

关闭连接

在 close 方法中，手动关闭 WebSocket 连接并将 socket 设置为 null。

  1. public close(): void {
  2.     if (this.socket) {
  3.         this.socket.close();
  4.         this.socket = null;
  5.     }
  6. }

自动心跳封装

自动心跳（Automatic Heartbeat）是一种在网络通信中常用的机制，用于维持连接的活跃状态，检测连接是否仍然有效，并及时发现和处理连接断开或故障的情况。心跳机制通过定期发送“心跳”消息（通常是一个简单的 ping 或者 pong 消息）来确认连接双方的状态。

实现自动心跳的基本思路

  1. 发送心跳消息：在 WebSocket 连接建立后，启动一个定时器，定期发送心跳消息到服务器。

  2. 接收心跳响应：服务器收到心跳消息后返回响应，客户端接收到响应后重置定时器。

  3. 检测心跳超时：如果在指定时间内没有收到心跳响应，则认为连接断开，进行重连。

  1. export class WebSocketClient {
  2.     // #socket链接
  3.     private url = '';
  4.     // #socket实例
  5.     private socket: WebSocket | null = null;
  6.     // #重连次数
  7.     private reconnectAttempts = 0;
  8.     // #最大重连数
  9.     private maxReconnectAttempts = 5;
  10.     // #重连间隔
  11.     private reconnectInterval = 10000; // 10 seconds
  12.     // #发送心跳数据间隔
  13.     private heartbeatInterval = 1000 * 30;
  14.     // #计时器id
  15.     private heartbeatTimer?: NodeJS.Timeout;
  16.     // #彻底终止ws
  17.     private stopWs = false;
  18.     // *构造函数
  19.     constructor(url: string) {
  20.         super();
  21.         this.url = url;
  22.     }
  23.     // >消息发送
  24.     public send(message: string): void {
  25.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  26.             this.socket.send(message);
  27.         } else {
  28.             console.error('[WebSocket] 未连接');
  29.         }
  30.     }
  31.  
  32.     // !初始化连接
  33.     public connect(): void {
  34.         if (this.reconnectAttempts === 0) {
  35.             console.log('WebSocket', `初始化连接中...`);
  36.         }
  37.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  38.             return;
  39.         }
  40.         this.socket = new WebSocket(this.url);
  41.  
  42.         // !websocket连接成功
  43.         this.socket.onopen = event => {
  44.             this.stopWs = false;
  45.             // 重置重连尝试成功连接
  46.             this.reconnectAttempts = 0;
  47.             // 在连接成功时停止当前的心跳检测并重新启动
  48.             this.startHeartbeat();
  49.             console.log(`连接成功,等待服务端数据推送[onopen]...`);
  50.         };
  51.  
  52.         this.socket.onmessage = event => {
  53.             this.dispatchEvent('message', event);
  54.             this.startHeartbeat();
  55.         };
  56.  
  57.         this.socket.onclose = event => {
  58.             if (this.reconnectAttempts === 0) {
  59.                 console.log(`连接断开[onclose]...`);
  60.             }
  61.             if (!this.stopWs) {
  62.                 this.handleReconnect();
  63.             }
  64.         };
  65.  
  66.         this.socket.onerror = event => {
  67.             if (this.reconnectAttempts === 0) {
  68.                 console.log(`连接异常[onerror]...`);
  69.             }
  70.             this.closeHeartbeat();
  71.         };
  72.     }
  73.  
  74.     // > 断网重连逻辑
  75.     private handleReconnect(): void {
  76.         if (this.reconnectAttempts < this.maxReconnectAttempts) {
  77.             this.reconnectAttempts++;
  78.             console.log('WebSocket', `尝试重连...`);
  79.             setTimeout(() => {
  80.                 this.connect();
  81.             }, this.reconnectInterval);
  82.         } else {
  83.             this.closeHeartbeat();
  84.             console.log(`最大重连失败，终止重连: ${this.url}`);
  85.         }
  86.     }
  87.  
  88.     // >关闭连接
  89.     public close(): void {
  90.         if (this.socket) {
  91.             this.stopWs = true;
  92.             this.socket.close();
  93.             this.socket = null;
  94.         }
  95.         this.closeHeartbeat();
  96.     }
  97.  
  98.     // >开始心跳检测 -> 定时发送心跳消息
  99.     private startHeartbeat(): void {
  100.         if (this.stopWs) return;
  101.         if (this.heartbeatTimer) {
  102.             this.closeHeartbeat();
  103.         }
  104.         this.heartbeatTimer = setInterval(() => {
  105.             if (this.socket) {
  106.                 this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
  107.                 console.log('WebSocket', '送心跳数据...');
  108.             } else {
  109.                 console.error('[WebSocket] 未连接');
  110.             }
  111.         }, this.heartbeatInterval);
  112.     }
  113.  
  114.     // >关闭心跳
  115.     private closeHeartbeat(): void {
  116.         clearInterval(this.heartbeatTimer);
  117.         this.heartbeatTimer = undefined;
  118.     }
  119. }

上述代码通过定时发送心跳消息来实现自动心跳机制，并结合断网重连逻辑来确保 WebSocket 连接的稳定性。

心跳机制的实现原理简析：

  • 在连接成功时启动心跳检测

在 connect() 方法中，当 WebSocket 连接成功（onopen 事件触发）时，调用 startHeartbeat() 方法。

  1. this.socket.onopen = event => {
  2.   this.stopWs = false;
  3.   this.reconnectAttempts = 0;
  4.   this.startHeartbeat();
  5.   console.log(`连接成功,等待服务端数据推送[onopen]...`);
  6. };

  • 定时发送心跳消息

startHeartbeat() 方法启动一个定时器，每隔 heartbeatInterval 时间（30秒）发送一次心跳消息。

  1. private startHeartbeat(): void {
  2.   if (this.stopWs) return;
  3. if (this.heartbeatTimer) {
  4.   this.closeHeartbeat();
  5. }
  6. this.heartbeatTimer = setInterval(() => {
  7.   if (this.socket) {
  8.     this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
  9.     console.log('WebSocket', '发送心跳数据...');
  10.   } else {
  11.     console.error('[WebSocket] 未连接');
  12.   }
  13. }, this.heartbeatInterval);
  14. }

  • 停止心跳检测

closeHeartbeat() 方法用于停止心跳检测，清除定时器。

  1. private closeHeartbeat(): void {
  2.   clearInterval(this.heartbeatTimer);
  3.     this.heartbeatTimer = undefined;
  4. }

  • 在连接断开或发生错误时停止心跳检测

在 onclose 和 onerror 事件中调用 closeHeartbeat()，停止心跳检测。

  1. this.socket.onclose = event => {
  2.   if (this.reconnectAttempts === 0) {
  3.     console.log(`连接断开[onclose]...`);
  4.   }
  5.   if (!this.stopWs) {
  6.     this.handleReconnect();
  7.   }
  8. };
  9.  
  10. this.socket.onerror = event => {
  11.   if (this.reconnectAttempts === 0) {
  12.     console.log(`连接异常[onerror]...`);
  13.   }
  14.   this.closeHeartbeat();
  15. };

如何触发原生函数

现在，我们已经基本完成了功能的封装，那么，我们如何在外部调用原生的websokectApi呢？非常简单，借助几个自定义的生命周期函数即可！

  1. import { EventDispatcher } from './dispatcher';
  2.  
  3. export class WebSocketClient extends EventDispatcher {
  4.  
  5.     //...
  6.     constructor(url: string) {
  7.         super();
  8.         this.url = url;
  9.     }
  10.     // >生命周期钩子
  11.     onopen(callBack: Function) {
  12.         this.addEventListener('open', callBack);
  13.     }
  14.     onmessage(callBack: Function) {
  15.         this.addEventListener('message', callBack);
  16.     }
  17.     onclose(callBack: Function) {
  18.         this.addEventListener('close', callBack);
  19.     }
  20.     onerror(callBack: Function) {
  21.         this.addEventListener('error', callBack);
  22.     }
  23.  
  24.     // !初始化连接
  25.     public connect(): void {
  26.         // ...
  27.  
  28.         // !websocket连接成功
  29.         this.socket.onopen = event => {
  30.             // ...
  31.             this.dispatchEvent('open', event);
  32.         };
  33.  
  34.         this.socket.onmessage = event => {
  35.             this.dispatchEvent('message', event);
  36.             this.startHeartbeat();
  37.         };
  38.  
  39.         this.socket.onclose = event => {
  40.             // ...
  41.             this.dispatchEvent('close', event);
  42.         };
  43.  
  44.         this.socket.onerror = event => {
  45.             // ...
  46.             this.closeHeartbeat();
  47.             this.dispatchEvent('error', event);
  48.         };
  49.     }
  50.  
  51.     // >关闭连接
  52.     public close(): void {
  53.         if (this.socket) {
  54.             this.stopWs = true;
  55.             this.socket.close();
  56.             this.socket = null;
  57.             this.removeEventListener('open');
  58.             this.removeEventListener('message');
  59.             this.removeEventListener('close');
  60.             this.removeEventListener('error');
  61.         }
  62.         this.closeHeartbeat();
  63.     }
  64.  
  65.     // ...
  66. }

当原生的onclose、onopen方法触发时，会通过dispatchEvent触发相应的调度，进而触发通过addEventListener绑定的生命周期函数！

注意，这里的this.dispatchEvent方法，addEventListener方法都是通过类继承EventDispatcher方法获得的！

EventDispatcher源码如下：

  1. export class EventDispatcher {
  2.     private listeners: { [type: string]: Function[] } = {};
  3.  
  4.     protected addEventListener(type: string, listener: Function) {
  5.         if (!this.listeners[type]) {
  6.             this.listeners[type] = [];
  7.         }
  8.         if (this.listeners[type].indexOf(listener) === -1) {
  9.             this.listeners[type].push(listener);
  10.         }
  11.     }
  12.  
  13.     protected removeEventListener(type: string) {
  14.         this.listeners[type] = [];
  15.     }
  16.  
  17.     protected dispatchEvent(type: string, data: any) {
  18.         const listenerArray = this.listeners[type] || [];
  19.         if (listenerArray.length === 0) return;
  20.         listenerArray.forEach(listener => {
  21.             listener.call(this, data);
  22.         });
  23.     }
  24. }

关于EventDispatcher的实现原理，请参考博主的其他文章：

juejin.cn/post/735851…[1]

完整代码

ts版本

  1. import { EventDispatcher } from './dispatcher';
  2.  
  3. export class WebSocketClient extends EventDispatcher {
  4.     // #socket链接
  5.     private url = '';
  6.     // #socket实例
  7.     private socket: WebSocket | null = null;
  8.     // #重连次数
  9.     private reconnectAttempts = 0;
  10.     // #最大重连数
  11.     private maxReconnectAttempts = 5;
  12.     // #重连间隔
  13.     private reconnectInterval = 10000; // 10 seconds
  14.     // #发送心跳数据间隔
  15.     private heartbeatInterval = 1000 * 30;
  16.     // #计时器id
  17.     private heartbeatTimer?: NodeJS.Timeout;
  18.     // #彻底终止ws
  19.     private stopWs = false;
  20.     // *构造函数
  21.     constructor(url: string) {
  22.         super();
  23.         this.url = url;
  24.     }
  25.     // >生命周期钩子
  26.     onopen(callBack: Function) {
  27.         this.addEventListener('open', callBack);
  28.     }
  29.     onmessage(callBack: Function) {
  30.         this.addEventListener('message', callBack);
  31.     }
  32.     onclose(callBack: Function) {
  33.         this.addEventListener('close', callBack);
  34.     }
  35.     onerror(callBack: Function) {
  36.         this.addEventListener('error', callBack);
  37.     }
  38.     // >消息发送
  39.     public send(message: string): void {
  40.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  41.             this.socket.send(message);
  42.         } else {
  43.             console.error('[WebSocket] 未连接');
  44.         }
  45.     }
  46.  
  47.     // !初始化连接
  48.     public connect(): void {
  49.         if (this.reconnectAttempts === 0) {
  50.             this.log('WebSocket', `初始化连接中...          ${this.url}`);
  51.         }
  52.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  53.             return;
  54.         }
  55.         this.socket = new WebSocket(this.url);
  56.  
  57.         // !websocket连接成功
  58.         this.socket.onopen = event => {
  59.             this.stopWs = false;
  60.             // 重置重连尝试成功连接
  61.             this.reconnectAttempts = 0;
  62.             // 在连接成功时停止当前的心跳检测并重新启动
  63.             this.startHeartbeat();
  64.             this.log('WebSocket', `连接成功,等待服务端数据推送[onopen]...     ${this.url}`);
  65.             this.dispatchEvent('open', event);
  66.         };
  67.  
  68.         this.socket.onmessage = event => {
  69.             this.dispatchEvent('message', event);
  70.             this.startHeartbeat();
  71.         };
  72.  
  73.         this.socket.onclose = event => {
  74.             if (this.reconnectAttempts === 0) {
  75.                 this.log('WebSocket', `连接断开[onclose]...    ${this.url}`);
  76.             }
  77.             if (!this.stopWs) {
  78.                 this.handleReconnect();
  79.             }
  80.             this.dispatchEvent('close', event);
  81.         };
  82.  
  83.         this.socket.onerror = event => {
  84.             if (this.reconnectAttempts === 0) {
  85.                 this.log('WebSocket', `连接异常[onerror]...    ${this.url}`);
  86.             }
  87.             this.closeHeartbeat();
  88.             this.dispatchEvent('error', event);
  89.         };
  90.     }
  91.  
  92.     // > 断网重连逻辑
  93.     private handleReconnect(): void {
  94.         if (this.reconnectAttempts < this.maxReconnectAttempts) {
  95.             this.reconnectAttempts++;
  96.             this.log('WebSocket', `尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})       ${this.url}`);
  97.             setTimeout(() => {
  98.                 this.connect();
  99.             }, this.reconnectInterval);
  100.         } else {
  101.             this.closeHeartbeat();
  102.             this.log('WebSocket', `最大重连失败，终止重连: ${this.url}`);
  103.         }
  104.     }
  105.  
  106.     // >关闭连接
  107.     public close(): void {
  108.         if (this.socket) {
  109.             this.stopWs = true;
  110.             this.socket.close();
  111.             this.socket = null;
  112.             this.removeEventListener('open');
  113.             this.removeEventListener('message');
  114.             this.removeEventListener('close');
  115.             this.removeEventListener('error');
  116.         }
  117.         this.closeHeartbeat();
  118.     }
  119.  
  120.     // >开始心跳检测 -> 定时发送心跳消息
  121.     private startHeartbeat(): void {
  122.         if (this.stopWs) return;
  123.         if (this.heartbeatTimer) {
  124.             this.closeHeartbeat();
  125.         }
  126.         this.heartbeatTimer = setInterval(() => {
  127.             if (this.socket) {
  128.                 this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
  129.                 this.log('WebSocket', '送心跳数据...');
  130.             } else {
  131.                 console.error('[WebSocket] 未连接');
  132.             }
  133.         }, this.heartbeatInterval);
  134.     }
  135.  
  136.     // >关闭心跳
  137.     private closeHeartbeat(): void {
  138.         clearInterval(this.heartbeatTimer);
  139.         this.heartbeatTimer = undefined;
  140.     }
  141. }
  1. class Log {
  2.     private static console = true;
  3.     log(title: string, text: string) {
  4.         if (!Log.console) return;
  5.         if (import.meta.env.MODE === 'production') return;
  6.         const color = '#ff4d4f';
  7.         console.log(
  8.             `%c ${title} %c ${text} %c`,
  9.             `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
  10.             `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
  11.             'background:transparent'
  12.         );
  13.     }
  14.     closeConsole() {
  15.         Log.console = false;
  16.     }
  17. }
  18. export class EventDispatcher extends Log {
  19.     private listeners: { [type: string]: Function[] } = {};
  20.  
  21.     protected addEventListener(type: string, listener: Function) {
  22.         if (!this.listeners[type]) {
  23.             this.listeners[type] = [];
  24.         }
  25.         if (this.listeners[type].indexOf(listener) === -1) {
  26.             this.listeners[type].push(listener);
  27.         }
  28.     }
  29.  
  30.     protected removeEventListener(type: string) {
  31.         this.listeners[type] = [];
  32.     }
  33.  
  34.     protected dispatchEvent(type: string, data: any) {
  35.         const listenerArray = this.listeners[type] || [];
  36.         if (listenerArray.length === 0) return;
  37.         listenerArray.forEach(listener => {
  38.             listener.call(this, data);
  39.         });
  40.     }
  41. }

js版本

  1. export class WebSocketClient extends EventDispatcher {
  2.     // #socket链接
  3.     url = '';
  4.     // #socket实例
  5.     socket = null;
  6.     // #重连次数
  7.     reconnectAttempts = 0;
  8.     // #最大重连数
  9.     maxReconnectAttempts = 5;
  10.     // #重连间隔
  11.     reconnectInterval = 10000; // 10 seconds
  12.     // #发送心跳数据间隔
  13.     heartbeatInterval = 1000 * 30;
  14.     // #计时器id
  15.     heartbeatTimer = undefined;
  16.     // #彻底终止ws
  17.     stopWs = false;
  18.     // *构造函数
  19.     constructor(url) {
  20.         super();
  21.         this.url = url;
  22.     }
  23.     // >生命周期钩子
  24.     onopen(callBack) {
  25.         this.addEventListener('open', callBack);
  26.     }
  27.     onmessage(callBack) {
  28.         this.addEventListener('message', callBack);
  29.     }
  30.     onclose(callBack) {
  31.         this.addEventListener('close', callBack);
  32.     }
  33.     onerror(callBack) {
  34.         this.addEventListener('error', callBack);
  35.     }
  36.     // >消息发送
  37.     send(message) {
  38.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  39.             this.socket.send(message);
  40.         } else {
  41.             console.error('[WebSocket] 未连接');
  42.         }
  43.     }
  44.  
  45.     // !初始化连接
  46.     connect() {
  47.         if (this.reconnectAttempts === 0) {
  48.             this.log('WebSocket', `初始化连接中...          ${this.url}`);
  49.         }
  50.         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
  51.             return;
  52.         }
  53.         this.socket = new WebSocket(this.url);
  54.  
  55.         // !websocket连接成功
  56.         this.socket.onopen = event => {
  57.             this.stopWs = false;
  58.             // 重置重连尝试成功连接
  59.             this.reconnectAttempts = 0;
  60.             // 在连接成功时停止当前的心跳检测并重新启动
  61.             this.startHeartbeat();
  62.             this.log('WebSocket', `连接成功,等待服务端数据推送[onopen]...     ${this.url}`);
  63.             this.dispatchEvent('open', event);
  64.         };
  65.  
  66.         this.socket.onmessage = event => {
  67.             this.dispatchEvent('message', event);
  68.             this.startHeartbeat();
  69.         };
  70.  
  71.         this.socket.onclose = event => {
  72.             if (this.reconnectAttempts === 0) {
  73.                 this.log('WebSocket', `连接断开[onclose]...    ${this.url}`);
  74.             }
  75.             if (!this.stopWs) {
  76.                 this.handleReconnect();
  77.             }
  78.             this.dispatchEvent('close', event);
  79.         };
  80.  
  81.         this.socket.onerror = event => {
  82.             if (this.reconnectAttempts === 0) {
  83.                 this.log('WebSocket', `连接异常[onerror]...    ${this.url}`);
  84.             }
  85.             this.closeHeartbeat();
  86.             this.dispatchEvent('error', event);
  87.         };
  88.     }
  89.  
  90.     // > 断网重连逻辑
  91.     handleReconnect() {
  92.         if (this.reconnectAttempts < this.maxReconnectAttempts) {
  93.             this.reconnectAttempts++;
  94.             this.log('WebSocket', `尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})       ${this.url}`);
  95.             setTimeout(() => {
  96.                 this.connect();
  97.             }, this.reconnectInterval);
  98.         } else {
  99.             this.closeHeartbeat();
  100.             this.log('WebSocket', `最大重连失败，终止重连: ${this.url}`);
  101.         }
  102.     }
  103.  
  104.     // >关闭连接
  105.     close() {
  106.         if (this.socket) {
  107.             this.stopWs = true;
  108.             this.socket.close();
  109.             this.socket = null;
  110.             this.removeEventListener('open');
  111.             this.removeEventListener('message');
  112.             this.removeEventListener('close');
  113.             this.removeEventListener('error');
  114.         }
  115.         this.closeHeartbeat();
  116.     }
  117.  
  118.     // >开始心跳检测 -> 定时发送心跳消息
  119.     startHeartbeat() {
  120.         if (this.stopWs) return;
  121.         if (this.heartbeatTimer) {
  122.             this.closeHeartbeat();
  123.         }
  124.         this.heartbeatTimer = setInterval(() => {
  125.             if (this.socket) {
  126.                 this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
  127.                 this.log('WebSocket', '送心跳数据...');
  128.             } else {
  129.                 console.error('[WebSocket] 未连接');
  130.             }
  131.         }, this.heartbeatInterval);
  132.     }
  133.  
  134.     // >关闭心跳
  135.     closeHeartbeat() {
  136.         clearInterval(this.heartbeatTimer);
  137.         this.heartbeatTimer = undefined;
  138.     }
  139. }
  1. class Log {
  2.     static console = true;
  3.     log(title, text) {
  4.         if (!Log.console) return;
  5.         if (import.meta.env.MODE === 'production') return;
  6.         const color = '#ff4d4f';
  7.         console.log(
  8.             `%c ${title} %c ${text} %c`,
  9.             `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
  10.             `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
  11.             'background:transparent'
  12.         );
  13.     }
  14.     closeConsole() {
  15.         Log.console = false;
  16.     }
  17. }
  18. export class EventDispatcher extends Log {
  19.     listeners = {};
  20.  
  21.     addEventListener(type, listener) {
  22.         if (!this.listeners[type]) {
  23.             this.listeners[type] = [];
  24.         }
  25.         if (this.listeners[type].indexOf(listener) === -1) {
  26.             this.listeners[type].push(listener);
  27.         }
  28.     }
  29.  
  30.     removeEventListener(type) {
  31.         this.listeners[type] = [];
  32.     }
  33.  
  34.     dispatchEvent(type, data) {
  35.         const listenerArray = this.listeners[type] || [];
  36.         if (listenerArray.length === 0) return;
  37.         listenerArray.forEach(listener => {
  38.             listener.call(this, data);
  39.         });
  40.     }
  41. }

总结

这篇文章封装了weboskect，完美支持了断网重连、自动心跳的功能，且完全兼容原生写法，无任何学习负担，开开箱即用！但美中不足的是，断网重连时间、心跳数据内容目前都是写死的，大家可以根据自己的情况做一些更改，让它更灵活！

参考资料

[1]

https://juejin.cn/post/7358518759118700607: https://juejin.cn/post/7358518759118700607

Node 社群

 
 
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
 
 
3b864a72689f6aa149f50ac73c92fb14.png
 
 
“分享、点赞、在看” 支持一下
 


                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/964220
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号