WebSocket前端断网监测 WebSocket监听在线离线状态【技巧】-js教程-PHP中文网

WebSocket连接状态检测必须依赖自身通信行为而非navigator.onLine；需结合onclose/onerror事件、readyState值、心跳双向验证（客户端发ping+服务端回pong+超时主动断连）、CloseEvent.code判断（如1006需重连）及指数退避重连机制。

websocket前端断网监测 websocket监听在线离线状态【技巧】

WebSocket本身不感知网络层断开，`navigator.onLine`不能替代连接检测

浏览器的 navigator.onLine 只反映操作系统是否报告有网络接口（比如 Wi-Fi 开关开了、手机蜂窝已启用），但完全无法判断 WebSocket 连接是否真实可用。常见陷阱是：用户开着 Wi-Fi，但路由器断了上行、或防火墙拦截了 WebSocket 端口，此时 navigator.onLine === true，但 ws.readyState 早已卡在 1（OPEN）却收不到任何消息——连接实际已“假死”。

真正可靠的判断必须基于 WebSocket 自身状态和通信行为：

ws.onclose 和 ws.onerror 是唯一能捕获连接异常的入口，但它们只在断开发生后触发，不具备预测性
ws.readyState 值为 0（CONNECTING）、1（OPEN）、2（CLOSING）、3（CLOSED）——但值为 1 不代表连接健康，只是“当时连上了”
服务端主动关闭时会带 CloseEvent.code（如 1000 正常、1006 异常、1013 重试），这些 code 必须在 onclose 中显式读取，否则会被忽略

必须实现心跳机制，且心跳要双向验证

单纯客户端发 ping、服务端不回 pong，等于没做心跳。很多前端只在 setInterval 里调用 ws.send('ping')，却没监听服务端的响应，结果网络中断后仍认为连接正常。

正确做法是：客户端定时发 ping，同时启动一个超时计时器；服务端收到后必须立即回 pong；客户端收到 pong 后清除该计时器；若超时未收到，则判定连接失效并主动 ws.close()。

示例关键逻辑：

let heartbeatTimeout = null;
const HEARTBEAT_INTERVAL = 30000;
const HEARTBEAT_TIMEOUT = 10000;

function startHeartbeat() {
  ws.addEventListener('message', (e) => {
    if (e.data === 'pong') {
      clearTimeout(heartbeatTimeout);
      return;
    }
  });

  const sendPing = () => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send('ping');
      heartbeatTimeout = setTimeout(() => {
        console.warn('Heartbeat timeout, closing connection');
        ws.close(4999, 'heartbeat timeout');
      }, HEARTBEAT_TIMEOUT);
    }
  };

  setInterval(sendPing, HEARTBEAT_INTERVAL);
}