WebSocket 经验与最佳实践

最新推荐文章于 2025-04-30 09:41:33 发布

阿智@11

最新推荐文章于 2025-04-30 09:41:33 发布

阅读量324

点赞数 3

文章标签： websocket 网络协议网络

本文链接：https://blog.youkuaiyun.com/webzqr/article/details/144276344

版权

连接管理：心跳检测与断线重连
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;
  }
};