Ts中WebSocket连接管理与维护教程

2024-06-10 14:27| 来源: 网络整理| 查看: 265

一、WebSocket基础

WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务端主动向客户端推送数据。在JavaScript中，可以通过WebSocket对象创建并维护WebSocket连接。

let webSocket: WebSocket; webSocket = new WebSocket(url); 二、初始化WebSocket连接（InitWS函数）检查浏览器是否支持WebSocket，不支持则返回null。创建WebSocket实例，并监听其生命周期事件（如onopen、onmessage、onclose）。 onopen事件处理程序：发送connectionKey建立连接，并重置相关状态变量；如果连接成功建立，则启动心跳保活定时器。 onmessage事件处理程序：接收到消息时调用传入的回调函数处理数据。 onclose事件处理程序：当连接关闭时，尝试重新连接。 /** * 初始化WebSocket连接。 * @param url WebSocket服务器地址，字符串类型。 * @param connectionKey 连接密钥，用于身份验证，字符串类型。 * @param activeToken 活跃令牌，用于保持连接心跳，字符串类型。 * @param callBack 接收到WebSocket消息时的回调函数，接收MessageEvent对象的data属性作为参数。 * @returns 返回新建的WebSocket实例或null（如果浏览器不支持WebSocket）。 * * 函数执行流程： * 1. 检查浏览器是否支持WebSocket，不支持则返回null。 * 2. 创建WebSocket实例并连接到指定url。 * 3. 当WebSocket连接打开时： * - 发送connectionKey以建立连接； * - 重置相关连接状态变量； * - 如果WebSocket连接已准备好，则启动心跳保活定时器（每60秒发送一次活跃令牌）。 * 4. 当接收到WebSocket消息时，调用传入的callBack回调函数处理数据。 * 5. 当WebSocket连接关闭时，自动尝试重新连接。 */ export const InitWS = (url: string, connectionKey: string, activeToken: string, callBack: (data: any) => void): WebSocket | null => { if (!window.WebSocket) { alert("你的浏览器不支持Socket的长连接!"); return null; } webSocket = new WebSocket(url); webSocket.onopen = () => { webSocket?.send(connectionKey); lastActiveTime = -1; reconnectCount = 0; reconnectTime = -1; reconnectIng = false; // 清除可能存在的重连定时器 if (reconnectTimer) { clearInterval(reconnectTimer); } // 只有在WebSocket准备就绪后才开启心跳保活定时器 if (webSocket.readyState === WebSocket.OPEN) { activeTimer = setInterval(() => { keepalive(activeToken); }, 60000); } }; webSocket.onmessage = (e: MessageEvent) => { callBack(e.data); }; webSocket.onclose = () => { reConnect(url, connectionKey, activeToken, callBack); }; // 返回创建的WebSocket实例 return webSocket; }; 三、维持连接活性（keepalive函数）

为了保持WebSocket连接活跃，定时向服务器发送心跳包。只有当WebSocket实例存在、没有缓冲数据且处于打开状态时，才发送活跃令牌以维持连接。

/** * 维持连接活性的函数。 * @param activeToken 一个字符串，用于发送给服务器以维持连接活性。 */ function keepalive(activeToken: string) { // 确保WebSocket实例存在且没有缓冲数据、处于打开状态时，发送活性令牌以维持连接 if (webSocket && webSocket.readyState === WebSocket.OPEN && webSocket.bufferedAmount === 0) { webSocket.send(activeToken); lastActiveTime = Date.now(); } } 四、尝试重新连接WebSocket（reConnect函数）

当WebSocket连接断开时，尝试重新连接。清除可能存在的活跃定时器，并根据重试策略判断是否发起重连请求。若满足条件，设置重连计时器，每隔一段时间尝试重新初始化WebSocket连接，一旦重连成功，停止重连计时器。

/** * 尝试重新连接 WebSocket。 * @param url 连接的URL。 * @param connectionKey 连接的关键字。 * @param activeToken 活跃令牌，用于认证。 * @param callBack 连接状态回调函数。 */ function reConnect(url: string, connectionKey: string, activeToken: string, callBack: (data: any) => void) { // 清除可能存在的活跃定时器 if (activeTimer) { clearInterval(activeTimer); } reconnectIng = true; // 满足重连条件时，尝试重新连接 if (reconnectIng && reconnectCount < 10 && reconnectTime + 10000 < Date.now() && !activeClose) { reconnectCount++; reconnectTime = Date.now(); reconnectTimer = setInterval(() => { const ws = InitWS(url, connectionKey, activeToken, callBack); // 若重连成功，则停止重连计时器 if (ws && ws.readyState === WebSocket.OPEN) { clearInterval(reconnectTimer); } }, 2000); } } 五、销毁函数（destroy函数）

用于清理资源，包括清除活跃定时器及关闭WebSocket连接。同时捕获并记录可能出现的异常信息。

/** * 销毁函数，用于清理资源。 * 主要作用是清除活跃的定时器、关闭WebSocket连接。 */ export function destroy() { try { // 清除活跃定时器 if (activeTimer) { clearInterval(activeTimer); } // 设置主动关闭标志并关闭WebSocket连接 activeClose = true; if (webSocket) { webSocket.close(); } } catch (error) { // 捕获并记录可能发生的异常 console.error("destroy ws error:", error); } } 六、完整代码段 // 定义全局WebSocket实例和相关变量 let webSocket: WebSocket; let activeTimer: ReturnType; let lastActiveTime: number = -1; let reconnectTimer: ReturnType; let reconnectCount: number = 0; let reconnectTime: number = -1; let activeClose: boolean = false; let reconnectIng: boolean = false; /** * 初始化WebSocket连接。 * @param url WebSocket服务器地址，字符串类型。 * @param connectionKey 连接密钥，用于身份验证，字符串类型。 * @param activeToken 活跃令牌，用于保持连接心跳，字符串类型。 * @param callBack 接收到WebSocket消息时的回调函数，接收MessageEvent对象的data属性作为参数。 * @returns 返回新建的WebSocket实例或null（如果浏览器不支持WebSocket）。 * * 函数执行流程： * 1. 检查浏览器是否支持WebSocket，不支持则返回null。 * 2. 创建WebSocket实例并连接到指定url。 * 3. 当WebSocket连接打开时： * - 发送connectionKey以建立连接； * - 重置相关连接状态变量； * - 如果WebSocket连接已准备好，则启动心跳保活定时器（每60秒发送一次活跃令牌）。 * 4. 当接收到WebSocket消息时，调用传入的callBack回调函数处理数据。 * 5. 当WebSocket连接关闭时，自动尝试重新连接。 */ export const InitWS = (url: string, connectionKey: string, activeToken: string, callBack: (data: any) => void): WebSocket | null => { if (!window.WebSocket) { alert("你的浏览器不支持Socket的长连接!"); return null; } webSocket = new WebSocket(url); webSocket.onopen = () => { webSocket?.send(connectionKey); lastActiveTime = -1; reconnectCount = 0; reconnectTime = -1; reconnectIng = false; // 清除可能存在的重连定时器 if (reconnectTimer) { clearInterval(reconnectTimer); } // 只有在WebSocket准备就绪后才开启心跳保活定时器 if (webSocket.readyState === WebSocket.OPEN) { activeTimer = setInterval(() => { keepalive(activeToken); }, 60000); } }; webSocket.onmessage = (e: MessageEvent) => { callBack(e.data); }; webSocket.onclose = () => { reConnect(url, connectionKey, activeToken, callBack); }; // 返回创建的WebSocket实例 return webSocket; }; /** * 维持连接活性的函数。 * @param activeToken 一个字符串，用于发送给服务器以维持连接活性。 */ function keepalive(activeToken: string) { // 确保WebSocket实例存在且没有缓冲数据、处于打开状态时，发送活性令牌以维持连接 if (webSocket && webSocket.readyState === WebSocket.OPEN && webSocket.bufferedAmount === 0) { webSocket.send(activeToken); lastActiveTime = Date.now(); } } /** * 尝试重新连接 WebSocket。 * @param url 连接的URL。 * @param connectionKey 连接的关键字。 * @param activeToken 活跃令牌，用于认证。 * @param callBack 连接状态回调函数。 */ function reConnect(url: string, connectionKey: string, activeToken: string, callBack: (data: any) => void) { // 清除可能存在的活跃定时器 if (activeTimer) { clearInterval(activeTimer); } reconnectIng = true; // 满足重连条件时，尝试重新连接 if (reconnectIng && reconnectCount < 10 && reconnectTime + 10000 < Date.now() && !activeClose) { reconnectCount++; reconnectTime = Date.now(); reconnectTimer = setInterval(() => { const ws = InitWS(url, connectionKey, activeToken, callBack); // 若重连成功，则停止重连计时器 if (ws && ws.readyState === WebSocket.OPEN) { clearInterval(reconnectTimer); } }, 2000); } } /** * 销毁函数，用于清理资源。 * 主要作用是清除活跃的定时器、关闭WebSocket连接。 */ export function destroy() { try { // 清除活跃定时器 if (activeTimer) { clearInterval(activeTimer); } // 设置主动关闭标志并关闭WebSocket连接 activeClose = true; if (webSocket) { webSocket.close(); } } catch (error) { // 捕获并记录可能发生的异常 console.error("destroy ws error:", error); } } 七、使用这段代码进行WebSocket连接、发送消息以及处理关闭和重连(使用案列) // 假设我们有一个WebSocket服务器地址、连接密钥和活跃令牌 const wsUrl = 'wss://example.com/websocket'; const connectionKey = 'your-connection-key'; const activeToken = 'your-active-token'; // 定义一个处理接收到的WebSocket消息的回调函数 const handleMessage = (data: any) => { console.log('Received data from WebSocket:', data); // 在这里根据实际需求处理数据 }; // 初始化WebSocket连接 const socketInstance = InitWS(wsUrl, connectionKey, activeToken, handleMessage); // 定义发送消息至WebSocket服务器的函数 const sendMessageToServer = (message: string) => { if (socketInstance && socketInstance.readyState === WebSocket.OPEN) { socketInstance.send(message); console.log(`Sent message to WebSocket server: ${message}`); } else { console.error("Can't send message. WebSocket is not connected or in OPEN state."); } }; // 当需要关闭WebSocket连接并清理资源时，调用destroy函数 window.addEventListener('beforeunload', () => { destroy(); }); // 在页面加载完成后发送一条测试消息给服务器 document.addEventListener('DOMContentLoaded', () => { const testMessage = JSON.stringify({ action: 'hello', payload: 'From client' }); sendMessageToServer(testMessage); });

在这个示例中，我们首先导入了InitWS和destroy函数。然后定义了WebSocket连接所需的参数和消息处理回调函数。通过调用InitWS初始化WebSocket连接，并在成功建立连接后发送一条测试消息。

同时，在页面卸载前，监听beforeunload事件并调用destroy来清理资源并关闭WebSocket连接。当然，可以根据实际需求在任意时刻调用ws.send发送更多数据。

八、总结概念:

这个代码片段提供WebSocket连接管理模块，包括初始化连接、心跳保活、自动重连以及资源清理等功能。主要功能点如下：

初始化WebSocket连接（InitWS函数）：首先检查浏览器是否支持WebSocket，然后创建并初始化WebSocket实例，连接到指定服务器地址。在连接打开时发送认证信息（connectionKey），同时设置心跳保活定时器以维持连接活跃状态。当接收到消息时调用回调函数处理数据，而当连接关闭时，则触发自动重连逻辑。

维持连接活性（keepalive函数）：定期向服务器发送活跃令牌（activeToken），确保WebSocket连接不会因长时间无通信而被服务器断开。

尝试重新连接WebSocket（reConnect函数）：当检测到WebSocket连接关闭时，启动一个重连计时器，在满足特定条件（如重试次数小于阈值且达到重试间隔时间）的情况下尝试重新建立连接。一旦成功重连，则停止重连计时器。

销毁函数（destroy函数）：用于在需要关闭和清理WebSocket资源时使用，它会清除心跳保活定时器，并主动关闭WebSocket连接，确保资源的正确释放。

【本文地址】

公司简介

联系我们