当前位置：首页 > article >正文

WebSocket 经验与最佳实践

article 2025/1/11 21:46:45

连接管理：心跳检测与断线重连
WebSocket 是实时应用的核心，但网络的不稳定可能导致连接中断。因此，心跳检测和断线重连至关重要。
心跳检测实现：
客户端定期向服务器发送“心跳包”，服务器收到后返回确认，用于维持连接有效性。

let socket = new WebSocket("wss://example.com/socket");
let heartbeatInterval;

socket.onopen = () => {
  heartbeatInterval = setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(JSON.stringify({ type: "heartbeat" }));
    }
  }, 30000); // 每30秒发送一次心跳包
};

socket.onclose = () => {
  clearInterval(heartbeatInterval); // 连接断开时清除心跳
};

断线重连：
监听 onclose 事件，并在连接断开时尝试重新连接。

function reconnect() {
  setTimeout(() => {
    socket = new WebSocket("wss://example.com/socket");
  }, 3000); // 3秒后重连
}

socket.onclose = () => {
  console.warn("连接断开，尝试重连...");
  reconnect();
};

调试与监控
在浏览器开发者工具的“网络”标签中，找到 WebSocket 请求，查看其帧和数据，方便调试。

日志记录
在服务端和客户端记录关键的连接状态、心跳包和消息流量，便于定位问题。

常见坑与解决方案
消息乱序:
WebSocket 并不保证消息顺序，尤其是多线程环境中。建议为每条消息加上序号，客户端按序处理。

socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  if (message.sequence > lastSequence) {
    processMessage(message);
    lastSequence = message.sequence;
  }
};