目录
1. 心跳机制的作用
- 保持连接活跃：防止因长时间无数据传输导致连接被防火墙或网关断开。
- 检测连接状态：通过定期通信判断客户端与服务器是否正常连接。
- 异常断开重连：在检测到连接异常时主动重连，提升稳定性。
2. 客户端实现核心步骤
建立连接后启动心跳：
使用setInterval定期发送心跳包（如{"type": "ping"}），间隔建议 30-60秒。const ws = new WebSocket('wss://your-server-url'); let heartbeatInterval = setInterval(() => { if (ws.readyState === WebSocket.OPEN) { ws.send('heartbeat'); } }, 30000); // 30秒发送一次超时检测与重连：设置超时时间（通常为心跳间隔的 1.5-2倍），若未收到服务器响应，则主动关闭连接并重连。
let timeout = setTimeout(() => {
if (ws.readyState !== WebSocket.OPEN) {
ws.close(); // 主动断开
reconnect(); // 重连逻辑
}
}, 60000); // 60秒超时重置计时器：
每次收到服务器消息或发送心跳后，重置超时计时器，避免误判。
3. 服务器端配合
- 接收心跳并响应：
服务器需监听心跳消息（如heartbeat），并返回确认响应（如{"type": "pong"}）。 - 主动断开异常连接：
若服务器长时间未收到客户端心跳，主动关闭连接以释放资源。
4. 关键注意事项
- 频率设置：
- 心跳间隔不宜过短（避免资源浪费），也不宜过长（及时发现断开）。
- 超时时间通常设为心跳间隔的 1.5-2倍。
- 异常处理：
- 网络波动时需重连，并限制最大重连次数（如 3-5次）。
- 使用递增延迟重连（如 1s, 2s, 4s...）避免频繁请求。
- 与后端协同：
确保前后端心跳消息格式一致，服务器需正确处理心跳逻辑。
5. 常见问题与解决
- 问题1：心跳导致连接频繁断开
→ 检查服务器是否未正确响应心跳，或心跳间隔过短。 - 问题2：重连后消息丢失
→ 在重连前记录未发送的消息队列，重连成功后补发。
总结
心跳机制的核心是 定期通信 + 超时检测 + 异常重连，需结合业务场景合理配置频率与超时阈值。实际开发中可封装为独立模块，提升代码复用性与可维护性。
面试点睛：强调心跳机制是 双向协作（需后端响应），重点说明 定时器管理 和 连接状态处理 的健壮性。