前端webSocket初始化，心跳检测代码块

 class WSocket {
    ws=null;
    timeout=20000;
    timeoutObj= null;
    serverTimeoutObj=null;
    init () {
      this.ws = new WebSocket(baseUrl);
      this.ws.addEventListener('open', () => {
        this.reset().start(); // 心跳检测
      });
      this.ws.addEventListener('close', () => {
        this.reconnect();
      });
      this.ws.addEventListener('error', () => {
        this.reconnect();
      });
      this.ws.addEventListener('message', (data) => {
        this.ws.reset().start();
        store.commit('changeSocketMessage', data); // 分发data
      });
    }
    reconnect (url) {
      setTimeout(function () { // 没连接上会一直重连，设置延迟避免请求过
        this.init();
      }, 2000);
    }
    reset () {
      clearTimeout(this.timeoutObj);
      clearTimeout(this.serverTimeoutObj);
      return this;
    }
    start () {
      const self = this;
      this.timeoutObj = setTimeout(function () {
        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
        // onmessage拿到返回的心跳就说明连接正常
        self.ws.send(JSON.stringify({ type: 3, msg: 'HeartBeat' + new Date() }));
        self.serverTimeoutObj = setTimeout(function () { // 如果超过一定时间还没重置，说明后端主动断开了
          self.ws.close();// 如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        }, self.timeout);
      }, self.timeout);
    }
  }

// 使用
  const $ws = new WSocket();
  $ws.init();