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

一、WebSocket基础

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

let webSocket: WebSocket;
webSocket = new WebSocket(url);

二、初始化WebSocket连接（InitWS函数）

1. 检查浏览器是否支持WebSocket，不支持则返回null。

2. 创建WebSocket实例，并监听其生命周期事件（如onopen、onmessage、onclose）。

• onopen事件处理程序：发送connectionKey建立连接，并重置相关状态变量；如果连接成功建立，则启动心跳保活定时器。

• onmessage事件处理程序：接收到消息时调用传入的回调函数处理数据。

• onclose事件处理程序：当连接关闭时，尝试重新连接。

三、维持连接活性（keepalive函数）

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

四、尝试重新连接WebSocket（reConnect函数）

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

五、销毁函数（destroy函数）

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

 六、完整代码段

// 定义全局WebSocket实例和相关变量
let webSocket: WebSocket;
let activeTimer: ReturnType<typeof setInterval>;
let lastActiveTime: number = -1;
let reconnectTimer: ReturnType<typ