WebSocket作为全双工通信协议，广泛应用于即时聊天、实时数据推送等场景，但很多开发者在实际使用中会遇到连接莫名断开的情况，这时候合理设置心跳机制就能有效解决问题。
WebSocket连接断开的常见原因
在设置心跳机制之前，我们需要先了解连接断开的常见诱因，这样才能针对性优化：
- 网络环境波动，比如用户切换WiFi和移动网络、网络信号短暂中断
- 服务端设置了连接超时时间，长时间没有数据传输就会主动关闭连接
- 中间网络设备比如NAT、防火墙会清理长时间无活动的连接映射
- 客户端进入后台或者被系统回收资源，导致连接被中断
心跳机制的实现原理
心跳机制的核心逻辑是客户端和服务端约定一个时间间隔，双方定期向对方发送仅用于保活的小体积消息，收到消息后返回对应的响应，证明连接仍然有效。如果超过设定时间没有收到响应，就判定连接已经断开，触发重连逻辑。
通常我们会把心跳消息设计为极简格式，比如只包含type:ping和type:pong的字段，避免占用过多带宽。
前端WebSocket心跳实现示例
以下是基于原生JavaScript实现的前端心跳逻辑，包含心跳发送、响应检测、断开重连的完整流程：
let socket = null;
let heartTimer = null;
let reConnectTimer = null;
// 心跳间隔时间 单位毫秒
const HEART_INTERVAL = 30000;
// 心跳超时时间 单位毫秒
const HEART_TIMEOUT = 5000;
// 重连间隔时间 单位毫秒
const RE_CONNECT_INTERVAL = 3000;
// 最大重连次数
const MAX_RE_CONNECT_COUNT = 10;
let reConnectCount = 0;
// 初始化WebSocket连接
function initWebSocket() {
// 替换为实际的WebSocket服务地址
socket = new WebSocket('ws://127.0.0.1:8080/ws');
socket.onopen = function() {
console.log('WebSocket连接成功');
reConnectCount = 0;
// 连接成功后启动心跳
startHeart();
};
socket.onmessage = function(event) {
const data = JSON.parse(event.data);
// 收到pong响应 重置心跳检测
if (data.type === 'pong') {
resetHeart();
}
// 处理其他业务消息
// ...
};
socket.onclose = function() {
console.log('WebSocket连接关闭');
stopHeart();
// 触发重连
reConnect();
};
socket.onerror = function() {
console.log('WebSocket发生错误');
socket.close();
};
}
// 启动心跳
function startHeart() {
heartTimer = setInterval(() => {
// 发送ping心跳
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'ping' }));
// 设置心跳超时检测
let timeoutTimer = setTimeout(() => {
console.log('心跳超时，连接可能已断开');
socket.close();
}, HEART_TIMEOUT);
// 将超时定时器存起来 收到pong时清除
socket.timeoutTimer = timeoutTimer;
}
}, HEART_INTERVAL);
}
// 重置心跳检测
function resetHeart() {
if (socket.timeoutTimer) {
clearTimeout(socket.timeoutTimer);
socket.timeoutTimer = null;
}
}
// 停止心跳
function stopHeart() {
if (heartTimer) {
clearInterval(heartTimer);
heartTimer = null;
}
resetHeart();
}
// 断开重连
function reConnect() {
if (reConnectCount >= MAX_RE_CONNECT_COUNT) {
console.log('达到最大重连次数，停止重连');
return;
}
reConnectTimer = setTimeout(() => {
reConnectCount++;
console.log(`第${reConnectCount}次重连`);
initWebSocket();
}, RE_CONNECT_INTERVAL);
}
// 初始化连接
initWebSocket();
后端心跳处理示例（Node.js + ws库）
后端需要接收客户端发送的ping消息，并返回pong响应，同时可以设置服务端的连接超时逻辑：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 服务端连接超时时间 单位毫秒
const SERVER_TIMEOUT = 60000;
wss.on('connection', function connection(ws) {
console.log('客户端连接成功');
// 设置服务端连接超时 超过时间没有消息就关闭连接
ws.timeoutTimer = setTimeout(() => {
console.log('服务端连接超时，关闭连接');
ws.close();
}, SERVER_TIMEOUT);
// 收到消息时的处理
ws.on('message', function incoming(message) {
const data = JSON.parse(message);
// 收到ping心跳 返回pong 并重置服务端超时定时器
if (data.type === 'ping') {
ws.send(JSON.stringify({ type: 'pong' }));
// 重置超时定时器
if (ws.timeoutTimer) {
clearTimeout(ws.timeoutTimer);
}
ws.timeoutTimer = setTimeout(() => {
console.log('服务端连接超时，关闭连接');
ws.close();
}, SERVER_TIMEOUT);
} else {
// 处理其他业务消息
// ...
}
});
// 连接关闭时清除定时器
ws.on('close', function() {
if (ws.timeoutTimer) {
clearTimeout(ws.timeoutTimer);
}
});
});
心跳机制设置的优化建议
在实际使用中，还可以根据场景做进一步优化：
- 心跳间隔时间不要设置太短，避免不必要的带宽消耗，通常30秒到1分钟比较合适
- 可以根据网络状态动态调整心跳间隔，比如检测到网络较差时适当缩短间隔
- 心跳消息可以和业务消息共用通道，不需要单独开额外的通信链路
- 重连逻辑可以增加退避策略，比如第一次重连间隔3秒，第二次5秒，避免频繁请求压垮服务端
- 可以在心跳消息中附带客户端状态信息，方便服务端做连接管理
常见问题解答
心跳机制会增加服务器压力吗
只要心跳消息设计得足够轻量，间隔时间设置合理，带来的额外压力几乎可以忽略，相比连接频繁断开重连的开销，心跳机制的收益要高很多。
心跳和断开重连必须一起用吗
建议配合使用，心跳负责维持连接活性，重连负责在连接真的断开后快速恢复，两者结合才能保证连接的高可用性。
服务端已经设置了超时还需要客户端心跳吗
需要，因为网络环境复杂，仅靠服务端的超时判断不够及时，客户端主动发送心跳可以更快检测到连接异常，也能应对中间网络设备的连接清理规则。