vue2 + websocket 断线重连 + 实时数据

 // 创建
    wsConnect() {
      /**
       * 重连时这里要重新将实例交给ws
       * 1.发布订阅监听
       * 2.直接传
       */
   
     var lockReconnect = false; //避免ws重复连接
      var ws = null; // 判断当前浏览器是否支持WebSocket
      var wsUrl = `ws://192.168.0.33:8686/ws?uid=${this.userId}`;  //后端的ws接口
      createWebSocket(wsUrl); //连接ws

      function createWebSocket(url =  `ws://192.168.0.33:8686/ws?uid=${this.userId}`) {
        try {
          if ("WebSocket" in window) {
            ws = new WebSocket(url);
          }
          initEventHandle();
        } catch (e) {
          reconnect(url);
          console.log(11, e);
        }
      }

      const self = this;
      function initEventHandle() {
        ws.onclose = function (msg) {
          reconnect(wsUrl);
          console.log("llws连接关闭!" + new Date().toLocaleString());
        };
        ws.onerror = function (msg) {
          reconnect(wsUrl);
        };
        ws.onopen = function (msg) {
          heartCheck.reset().start(); //心跳检测重置
          console.log("llws连接成功!" + new Date().toLocaleString());
        };
        ws.onmessage = (msg) => {
          //如果获取到消息，心跳检测重置
          heartCheck.reset().start(); //拿到任何消息都说明当前连接是正常的
          let data = JSON.parse(msg.data);
          console.log(22,data);
          // 变动值 (注意this指向)
          self.newnumber=data.countScore
          self.push=data
          // self.leaderboard.sort((a, b) => b.countScore - a.countScore);
        };

        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function (msg) {
          console.log("222", msg);
          ws.close();
        };

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

        //心跳检测
        var heartCheck = {
          timeout: 2000, //2000发一次心跳
          timeoutObj: null,
          serverTimeoutObj: null,
          reset: function () {
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
          },
          start: function () {
            var self = this;
            this.timeoutObj = setTimeout(function () {
              //这里发送一个心跳，后端收到后，返回一个心跳消息，
              //onmessage拿到返回的心跳就说明连接正常
              ws.send("ping");
              console.log("ping!");

              // self.serverTimeoutObj = setTimeout(function () {
              //   //如果超过一定时重置间还没，说明后端主动断开了
              //   ws.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
              // }, self.timeout);
            }, this.timeout);
          },
        };
      }
    },

this.wsConnect()  //调用