WebSocket断线重连怎么实现心跳检测机制写法【教程】-js教程-PHP中文网

结论：WebSocket断线重连需结合readyState状态判断与心跳超时兜底，业务级心跳包须服务端明确响应；onclose中不可立即重连，应延迟检查readyState===CLOSED；心跳必须自定义+超时检测+服务端ACK；重连需指数退避、防抖限频、网络状态感知及服务端协同。

websocket断线重连怎么实现心跳检测机制写法【教程】

直接说结论：断线重连不能只靠 onclose 触发重连，必须结合 readyState 状态判断 + 心跳超时兜底；心跳也不能只发 PING 帧，得用业务级心跳包 + 服务端明确响应。

WebSocket.onclose 触发时，`readyState` 很可能还是 `CLOSING`

很多开发者一看到控制台报 WebSocket is already CLOSED 就立刻在 onclose 里调 new WebSocket()，结果频繁报错。这是因为：

onclose 是事件回调，不是状态同步点——它可能在 readyState === CLOSING 时就触发，此时 socket 还没真正释放
手动调用 ws.close() 后，readyState 不会立刻变成 CLOSED，中间有延迟（尤其弱网下可达数秒）
如果在 CLOSING 状态下立即新建连接，旧 socket 可能还在发帧，导致服务端混乱或拒绝新连接

正确做法是：在 onclose 中清空定时器、标记重连意向，然后用 setTimeout 延迟 100–300ms 再执行重连，并先检查 ws.readyState === CLOSED。

心跳检测必须用业务消息，别依赖原生 `PING/PONG` 帧

浏览器 WebSocket API 对 PING 帧是静默处理的：onmessage 不会收到，onping 事件根本不存在。服务端即使回了 PONG，客户端也感知不到是否成功送达。

所以必须自己定义心跳格式，比如 { type: "heartbeat", ts: Date.now() }
客户端发心跳后启动一个 setTimeout，比如 5s 超时；服务端收到后必须原样或带 ack: true 回复，客户端收到才清除超时定时器
连续 2–3 次心跳无响应，就主动 ws.close()，再走重连流程（而不是等 onclose 自然触发）

示例关键逻辑：

WebSocket 8.18.2

WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。

下载

startHeartbeat() {
  this.heartbeatTimer = setInterval(() => {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify({ type: 'heartbeat' }));
      this.heartbeatTimeout = setTimeout(() => {
        console.warn('heartbeat timeout');
        this.ws?.close();
      }, 5000);
    }
  }, 10000);
}
<p>this.ws.onmessage = (e) => {
const data = JSON.parse(e.data);
if (data.type === 'heartbeat_ack') {
clearTimeout(this.heartbeatTimeout);
}
};
</p>