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;
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连接管理模块，包括初始化连接、心跳保活、自动重连以及资源清理等功能。主要功能点如下：

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

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

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

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