详解JS WebSocket断开原因和心跳机制

WebSocket 是一个重要的协议，可在浏览器和服务器之间双向通信，且具有较低的延迟和较高的带宽利用率。但是，在实际应用中，WebSocket 经常会由于各种原因而断开连接，为此，我们需要对 WebSocket 的断开原因和心跳机制做详细了解。

WebSocket断开原因

1. 服务器主动关闭

服务器端主动关闭连接时，WebSocket 处于 CLOSED 状态，并触发 onclose 事件。在这种情况下，我们可以读取 event.code 和 event.reason 属性获取关闭代码和关闭原因。

示例代码（服务端）：

wsServer.close(reason, code);

示例代码（客户端）：

ws.onclose = function(event) {
  console.log("WebSocket已关闭。");
  console.log("关闭代码：" + event.code);
  console.log("关闭原因：" + event.reason);
}

2. 客户端主动关闭

客户端主动关闭连接时，WebSocket 处于 CLOSED 状态，并触发 onclose 事件。在这种情况下，我们需要手动调用 WebSocket.close() 方法来关闭连接。

示例代码：

ws.close();

3. 网络异常

网络异常是导致断开连接的最常见原因之一。在这种情况下，WebSocket 处于 CLOSED 状态，并触发 onclose 事件。网络异常断开连接时，event.code 的值为 1006，event.reason 的值可能为空字符串或某些异常信息。

4. 服务器异常

服务器异常有许多种，可能是服务器程序崩溃、服务器网络故障等。在这种情况下，WebSocket 处于 CLOSED 状态，并触发 onclose 事件。服务器异常断开连接时，event.code 的值可能是任意的 4000 到 4999 之间的错误代码（由服务器指定），event.reason 的值可能为空字符串或某些错误信息。

WebSocket心跳机制

WebSocket 心跳机制是指定期向服务器发送一条心跳消息来保持连接的机制。WebSocket 心跳一般有两种实现方式：

1. 客户端轮询

客户端轮询是指客户端间隔一段时间向服务器发送一条消息，服务器收到消息后立即回复，客户端收到回复后重新计时。如果一定时间内没有收到服务器回复，客户端即认为连接断开。

示例代码：

let heartbeatTimer = null;

function startHeartbeat() {
  heartbeatTimer = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({type: "heartbeat"}));
    }
  }, 3000);
}

function stopHeartbeat() {
  clearInterval(heartbeatTimer);
}

2. 服务器推送

服务器推送是指服务器定期向客户端推送一条消息，客户端收到消息后重新计时。如果一定时间内没有收到服务器推送，客户端即认为连接断开。

示例代码：

ws.onmessage = function(event) {
  let data = JSON.parse(event.data);
  if (data.type === "heartbeat") {
    // 接收到服务器心跳消息，重新计时
    resetHeartbeat();
  }
}

let heartbeatTimer = null;

function resetHeartbeat() {
  clearInterval(heartbeatTimer);
  heartbeatTimer = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({type: "heartbeat"}));
    }
  }, 3000);
}