如何在WebSocket中加入心跳检测代码前后端完整实现示例【干货】-js教程-PHP中文网

WebSocket心跳不能只靠自动ping/pong帧，因其仅检测TCP链路可达，无法发现NAT超时、代理丢包、页面冻结或服务端卡死等业务层失效；必须由应用层主动发送心跳消息并显式超时判定。

如何在websocket中加入心跳检测代码前后端完整实现示例【干货】

WebSocket 心跳检测为什么不能只靠 `ping`/`pong` 自动帧？

浏览器和多数 WebSocket 服务端（如 Node.js 的 ws、Python 的 websockets）确实会自动响应 ping 帧并发送 pong，但这只是底层链路可达性检查，不等于业务层连接有效。真实场景中常见：TCP 连接未断，但中间 NAT 超时、代理静默丢包、客户端页面被冻结、服务端逻辑卡死——此时自动 ping/pong 依然成功，但你的消息发不出去、收不到。必须由应用层主动发心跳消息 + 显式超时判定。

前端用 `setInterval` 发心跳 + `setTimeout` 监控响应？别这么干

直接用定时器轮询发心跳容易出问题：网络抖动导致多次心跳堆积、重连后忘记清旧定时器、页面切后台时 setInterval 被节流甚至暂停。正确做法是「按需驱动」：

心跳发送必须绑定在 WebSocket 实例的 open 状态下，且每次发送前先清除上一次的响应等待 timeout
收到服务端回的心跳响应（比如 {type: "pong"}）才重置计时器；收不到就触发断连逻辑
利用 visibilitychange 事件暂停心跳（避免页面不可见时无谓发包），切回前台再恢复

示例关键片段：

let heartbeatTimer = null;
let pongTimeout = null;

function startHeartbeat() {
  if (ws.readyState !== WebSocket.OPEN) return;
  
  // 先清除可能残留的等待响应
  clearTimeout(pongTimeout);
  
  ws.send(JSON.stringify({ type: "ping" }));
  
  // 等待服务端 reply {type:"pong"}，10s 内没等到就断连
  pongTimeout = setTimeout(() => {
    console.error("Heartbeat timeout");
    ws.close();
  }, 10000);
}

// 连接打开后启动
ws.addEventListener("open", () => {
  heartbeatTimer = setInterval(startHeartbeat, 30000);
});

// 收到 pong 响应，重置等待
ws.addEventListener("message", (e) => {
  const data = JSON.parse(e.data);
  if (data.type === "pong") {
    clearTimeout(pongTimeout); // ✅ 关键：收到即清除超时
  }
});

// 页面隐藏时暂停，显示时恢复
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    clearInterval(heartbeatTimer);
  } else if (ws.readyState === WebSocket.OPEN) {
    heartbeatTimer = setInterval(startHeartbeat, 30000);
  }
});

后端收到 `ping` 消息必须立刻回 `pong`，但别用 `send` 方法硬塞

很多后端实现写成「监听到 {type:"ping"} 就调用 send({type:"pong"})」，这在高并发或慢连接下会阻塞或失败。真正可靠的方式是：

使用 WebSocket 库原生的 pong 方法（如 ws 库的 socket.ping() 或 socket.pong()），它走的是底层控制帧通道，不经过消息队列
如果必须走业务消息通道（比如统一用 JSON 格式），确保发送逻辑是非阻塞的，并加 try/catch 防止因连接异常 crash 整个 handler
心跳处理要独立于业务逻辑线程/协程，避免业务卡住导致心跳积压

以 Node.js ws 库为例：

WebSocket 8.18.2

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

下载

wss.on("connection", (socket) => {
  // ✅ 正确：用原生 pong 帧，不走 send 队列
  socket.on("ping", () => {
    socket.pong(); // 注意：这是 ws 库方法，不是发字符串 "pong"
  });

  // ❌ 错误：用 send 回复，可能排队、失败、甚至引发重入
  // socket.on("message", (data) => {
  //   const msg = JSON.parse(data);
  //   if (msg.type === "ping") socket.send(JSON.stringify({type: "pong"}));
  // });
});