websocket 心跳机制

WebSocket 是一种在客户端和服务器之间创建持久连接的技术。为了保持连接的稳定性，就需要通过发送心跳消息来维持 WebSocket 连接。

1、创建一个webscoket基本的使用

// 创建 WebSocket 对象，传入服务器地址const socket = new WebSocket('ws://url');// 监听 WebSocket 的打开事件socket.addEventListener('open', (event) => {// 在此处理连接打开时的逻辑});// 监听 WebSocket 接收到消息的事件socket.addEventListener('message', (event) => {// 在此处理从服务器接收到的消息的逻辑});// 监听 WebSocket 关闭事件socket.addEventListener('close', (event) => {// 在此处理连接关闭时的逻辑});// 监听 WebSocket 发生错误的事件socket.addEventListener('error', (event) => {// 在此处理连接发生错误时的逻辑});// 向服务器发送消息socket.send('Hello, server!');

2、在客户端连接到 WebSocket 服务器之后，通过 setInterval 方法定时发送心跳消息

let ws = new WebSocket('ws://localhost:8080');let heartCheck;ws.onopen = function() {heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);// 发送心跳消息的时间间隔，单位毫秒}

这边的代码会每隔5秒向服务器发送一个心跳信息

3、在客户端接收到服务器发送的消息时，清除心跳定时器。因为如果服务器一直有推送消息，那么就无需再发送心跳消息

let ws = new WebSocket('ws://url');let heartCheck;ws.onopen = function() {heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);}ws.onmessage = function() {clearInterval(heartCheck);heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);}

在客户端接收到服务器发送的消息时，清除了原来的心跳定时器，并重新创建了一个心跳定时器，从而保证 WebSocket 的连接状态。

4、在客户端检测到 WebSocket 连接关闭时，清除心跳定时器。因为如果 WebSocket 连接关闭了，那么心跳定时器也就没有了意义

let ws = new WebSocket('ws://url');let heartCheck;ws.onopen = function() {heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);}ws.onmessage = function() {clearInterval(heartCheck);heartCheck = setInterval(function() {ws.send('HeartBeat');}, 5000);}ws.onclose = function() {clearInterval(heartCheck);}

当检测到 WebSocket 连接关闭时，清除了心跳定时器