一、WebSocket心跳机制
前端实现WebSocket心跳机制的方式主要有两种:
- 使用setInterval定时发送心跳包。
- 在前端监听到WebSocket的onclose()事件时,重新创建WebSocket连接。
第一种方式会对服务器造成很大的压力,因为即使WebSocket连接正常,也要定时发送心跳包,从而消耗服务器资源。第二种方式虽然减轻了服务器的负担,但是在重连时可能会丢失一些数据。
二、WebSocket心跳包机制
WebSocket心跳包是WebSocket协议的保活机制,用于维持长连接。有效的心跳包可以防止长时间不通讯时,WebSocket自动断开连接。
心跳包是指在一定时间间隔内,WebSocket发送的空数据包。常见的WebSocket心跳包机制如下:
- 客户端定时向服务器发送心跳数据包,以保持长连接。
- 服务器定时向客户端发送心跳数据包,以检测客户端连接是否正常。
- 双向发送心跳数据包。
三、WebSocket的缺点和不足
- WebSocket需要浏览器和服务器端都支持该协议。
- WebSocket会增加服务器的负担,不适合大规模连接的应用场景。
四、示例代码
// 开启心跳
const start = () => {
clearTimeout(timeoutObj);
// serverTimeoutObj && clearTimeout(serverTimeoutObj);
timeoutObj = setTimeout(function () {
if (websocketRef.current?.readyState === 1) {
//连接正常
sendMessage('hello');
}
}, timeout);
};
const reset = () => {
// 重置心跳 清除时间
clearTimeout(timeoutObj);
// 重启心跳
start();
};
ws.onopen = (event) => {
onOpenRef.current?.(event, ws);
reconnectTimesRef.current = 0;
start(); // 开启心跳
setReadyState(ws.readyState || ReadyState.Open);
};
ws.onmessage = (message: WebSocketEventMap['message']) => {
const { data } = message;
if (data === '收到,hello') {
reset();
return;
}
if (JSON.parse(data).status === 408) {
reconnect();
return;
}
onMessageRef.current?.(message, ws);
setLatestMessage(message);
};
const connect = () => {
reconnectTimesRef.current = 0;
connectWs();
};