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 连接关闭时，清除了心跳定时器