vue3使用websocket实现心跳机制

let socketUrl: any = ''; // socket地址
let websocket: any = null; // websocket 实例
let heartTime: any = null; // 心跳定时器实例
let socketHeart: number = 0; // 心跳次数
let HeartTimeOut: number = 30000; // 心跳超时时间
let socketError: number = 0; // 错误次数

// 初始化socket
const initWebSocket = (url: any) => {
  socketUrl = url;
  // 初始化 websocket
  websocket = new WebSocket(url);
  websocketonopen();
  websocketonmessage();
  websocketonerror()
  websocketclose()
  sendSocketHeart()
};

onMounted(() => {
  // 初始化websocket
  initWebSocket(socketUrl);
})

// socket 连接成功
const websocketonopen = () => {
  websocket.onopen = function (e: any) {
    console.log("连接 websocket 成功", e);
    resetHeart();
  };
};

// socket 连接失败
const websocketonerror = () => {
  websocket.onerror = function (e: any) {
    console.log("连接 websocket 失败", e);
  };
};

// socket 断开链接
const websocketclose = () => {
  websocket.onclose = function (e: any) {
    console.log("断开连接", e);
  };
};

// socket 接收数据
const websocketonmessage = () => {
  websocket.onmessage = function (e: any) {
    let msg = JSON.parse(e.data);
    if (msg.type === 'heartbeat') {
      resetHeart()
      console.log("心跳");
    }
    console.log("收到socket消息", JSON.parse(e.data));
    test(msg) // 测试数据
  };
};

// socket 发送数据
const sendMsg = (data: any) => {
  websocket.send(data);
};

// socket 重置心跳
const resetHeart = () => {
  socketHeart = 0;
  socketError = 0;
  clearInterval(heartTime);
  sendSocketHeart();
};

// socket心跳发送
const sendSocketHeart = () => {
  console.log(websocket);
  heartTime = setInterval(() => {
    // 如果连接正常则发送心跳
    if(websocket.readyState == 1)  {
    // if (socketHeart <= 30) {
      console.log("心跳发送：", socketHeart);
      websocket.send(
        JSON.stringify({
          type: "ping"
        })
      );
      socketHeart = socketHeart + 1;
    } else {
      // 重连
      reconnect()
    }
  }, HeartTimeOut);
};

// socket重连
const reconnect = () => {
  if (socketError <= 2) {
    clearInterval(heartTime);
    initWebSocket(socketUrl);
    socketError = socketError + 1;
    console.log("socket重连", socketError);
  } else {
    console.log("重试次数已用完的逻辑", socketError);
    clearInterval(heartTime);
  }
};

// 测试收到消息传递
const test = (msg: any) => {
  // console.log(msg,444);
  // switch (msg.type) {
  //   case 'heartbeat': //加入会议
  //     mitts.emit('heartbeat', msg)
  //     break;
  // }
}


初始化时候发送心跳，收到message后清除定时器，重新再发送心跳。