WebSocket前端自动发心跳包 WebSocket定时器发送Ping消息【代码】-js教程-PHP中文网

websocket连接后不发心跳，服务端默认60秒无数据即断连；因原生api不支持自动ping，须前端用setinterval每30–45秒主动send("ping")，并在onclose/onerror中clearinterval，配合失败计数与onmessage清零机制实现可靠保活。

websocket前端自动发心跳包 websocket定时器发送ping消息【代码】

WebSocket连接后不发心跳，服务端主动断连怎么办

多数 WebSocket 服务端（如 Nginx 代理、Spring Boot 的 WebSocketHandler、或云厂商网关）默认 60 秒无数据就关闭空闲连接。前端不主动发 Ping，连接大概率在 1–2 分钟内被静默断开。

浏览器原生 WebSocket 对象**不支持自动发送 Ping 帧**——这是关键前提。所谓“心跳”，必须由前端用业务消息模拟（比如发 {"type":"ping"}），或靠定时器触发 send()。

别依赖 ws.ping()：该方法不存在，WebSocket API 没有暴露底层 Ping 控制权
别等 onmessage 回应再发：服务端可能只收不回，心跳只需单向保活
首次心跳应在 onopen 后立即启动，避免刚连上就因延迟触发而掉线

用 `setInterval` 发心跳的正确姿势

最直接的方式是连接就绪后启动定时器，但要注意清理逻辑和异常兜底。

核心原则：定时器 ID 必须绑定到实例上（比如挂到 ws.heartbeatId），且在 onclose 和 onerror 中清除，否则页面未卸载时定时器持续运行，可能对已断开的 ws 调用 send() 报错 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state。

推荐间隔设为 30–45 秒，比服务端超时阈值小 10–15 秒，留出网络抖动余量
心跳内容建议用轻量字符串，如 "ping" 或 {"t":"h"}，避免 JSON 序列化开销
不要在定时器里检查 ws.readyState === WebSocket.OPEN 后再发——这个判断本身就有竞态，应优先 try/catch 包裹 send()

const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
  ws.heartbeatId = setInterval(() => {
    try {
      ws.send('ping'); // 纯字符串最快
    } catch (e) {
      // send 失败说明连接已异常，主动 close 触发重连逻辑
      ws.close();
    }
  }, 35000);
};
<p>ws.onclose = () => {
if (ws.heartbeatId) clearInterval(ws.heartbeatId);
};</p><p>ws.onerror = () => {
if (ws.heartbeatId) clearInterval(ws.heartbeatId);
};</p>