vue websocket 心跳

在 Vue 中使用 WebSocket 进行通信时，为了保持连接的稳定性，可以通过发送心跳包来维持连接。具体步骤如下：

1. 在创建 WebSocket 连接时，同时开启一个定时器，定时发送心跳包。

let ws = new WebSocket('ws://localhost:8080');
let heartBeatTimer = null;

ws.onopen = () => {
  console.log('WebSocket 已连接');
  heartBeatTimer = setInterval(() => {
    ws.send('ping'); // 发送心跳包
  }, 3000);
};

ws.onmessage = (event) => {
  let message = event.data;
  if (message === 'pong') {
    console.log('接收到心跳包');
  } else {
    console.log('接收到消息：', message);
  }
};

ws.onclose = () => {
  console.log('WebSocket 已关闭');
  clearInterval(heartBeatTimer);
};

ws.onerror = (event) => {
  console.log('WebSocket 错误：', event);
};

2. 接收到服务端发送的消息时，判断是否为心跳包，如果是则不做处理，如果不是则进行业务逻辑的处理。

3. 在 WebSocket 关闭时，清除定时器，释放资源。

这样就可以通过发送心跳包来维持 Vue 中的 WebSocket 连接了。