webSocket添加心跳，处理断网重连

let socket; //websocket的实例
let lockReconnect = false; //避免重复连接
getWebsocket();
function getWebsocket() {
  //新建websocket的函数 页面初始化 断开连接时重新调用
  const wsUrl =
    "ws://192.168.0.147:8080/api/v1/socket/order/wGk86yE7MShsN3DM2Q5m7t2NEzPS5zmE1634897413404" +
    window.token +
    "&djxh=" +
    window.djxh;
  socket = new WebSocket(wsUrl);
  socket.onerror = function (event) {
    console.log("websocket服务出错了");
    reconnect(wsUrl);
  };
  socket.onclose = function (event) {
    console.log("websocket服务关闭了");
    reconnect(wsUrl);
  };
  socket.onopen = function (event) {
    console.log("websocket连接成功");
    heartCheck.reset().start(); //传递信息
  };
  socket.onmessage = function (event) {
    //如果获取到消息，心跳检测重置
    //拿到任何消息都说明当前连接是正常的
    console.log("websocket服务获得数据了");
    //接受消息后的UI变化
    doWithMsg(event.data);
    heartCheck.reset().start();
  };
  //收到消息推送 如果处理他
  function doWithMsg(msg) {
    // getXXX()//这个函数是业务上面申请列表的函数 可以忽略
    // window.external.CallFun('receiveMsg');//这个也是
  }
}

//重连
function reconnect(url) {
  if (lockReconnect) return;
  lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  setTimeout(function () {
    getWebsocket();
    lockReconnect = false;
  }, 2000);
}

//心跳检测
const heartCheck = {
  timeout: 5000, //5秒，针对不同项目设置不同时间，比如客服系统就不用那么频繁检测，股票交易所就必须很频繁
  timeoutObj: null,
  serverTimeoutObj: null,
  reset: function () {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
    return this;
  },
  start: function () {
    const self = this;
    this.timeoutObj = setTimeout(function () {
      //这里发送一个心跳，后端收到后，返回一个心跳消息，
      //onmessage拿到返回的心跳就说明连接正常
      socket.send("心跳测试"); //发送这个消息的时候，必须让后端收到消息后，立马发送一个消息，这样来回一个接收过程，就可以判断当前还没有断开连接。
      self.serverTimeoutObj = setTimeout(function () {
        //如果超过一定时间还没重置，说明后端主动断开了
        socket.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
      }, self.timeout);
    }, this.timeout);
  },
};