vue3 websocket实现心跳

实现场景

  该需求是运用websocket进行网页之间通讯，同时保证websocket在通讯期间保持激活的状态。

功能分析

   1、在websocket报错时，重新苏醒。

   2、在websocket自动关闭时，重新连接。

   3、在通讯期间，整个websocket能接受消息，并通过不同的消息，进行加载不同的数据和交互

   4、websocket实例化时，主动加入房间。

代码实施

 
const initWebSocket = () => {
  try {
    if ('WebSocket' in window) {
      ws.value = new WebSocket(serveUrl + '/ws')
      heartForm.value.time = 1
      modelData.value.lockReconnect = true
      modelData.value.isAlive = false
      //建立连接时，钩子函数，当连接状态正常时，会执行钩子函数
      ws.value.onopen = onOpen
//绑定 收到websocket返回的消息钩子函数
      ws.value.onmessage = onMessage
//报错后，重新连接
      ws.value.onerror = function (e) {
        initWebSocket()
      }
//关闭后，直接重新连接
      ws.value.onclose = function (e) {
        initWebSocket()
      }
    } else {
      alert('当前浏览器 Not support websocket')
    }
  } catch (e) {
    reconnect()
  }
}
 
const reconnect = () => {
  if (modelData.value.lockReconnect) return;
  modelData.value.lockReconnect = true;
  setTimeout(function () { //没连接上会一直重连，设置延迟避免请求过多
    initWebSocket()
    modelData.value.lockReconnect = false;
  }, 2000);
}
//打开状态
const onOpen = (e) => {
  
  }
}
//接受信息
const onMessage = (e) => {
  
 
}

遇到的问题

        1、websocket每次实例化时，都要将onerror,onmessage,onclose，onopen 重新实例化。

        2、onmessage获取到的是所有的数据，需要对传送过来的信息进行过滤

        3、websockt在使用一段时间后，长时间未使用，有可能断开连接，需要重新连接。

总结分享

        1、这里后端未做心跳检测，就直接前端以定时器轮询的方式，不断进行连接，知道websocket重新连接上位置；

        2、主要的接受到消息的逻辑都是在onmessage里面，里面的逻辑比较复杂，需要根据实际的场景进行设定。

        3、onopen在在正式连接成功之后，会执行的方法。需要加入房间的操作，可以放入这里面。