Websocket 封装

export class WebSocketClass {
  /**
   * @description: 初始化实例属性，保存参数
   * @param {String} url ws的接口
   * @param {Function} msgCallback 服务器信息的回调传数据给函数
   * @param {String} name 可选值 用于区分ws，用于debugger
   * @param {String} startWsAfter 启动之后要做的事情
   */

  constructor(url, msgCallback, name = 'default', startWsAfter) {
    this.url = url;
    this.msgCallback = msgCallback;
    this.name = name;
    this.ws = null; // websocket对象
    this.status = null; // websocket是否关闭
    this.startWsAfter = startWsAfter; // 启动之后要做的事情
    this.interval = true; // 函数节流标识符
  }
  /**
   * @description: 初始化 连接websocket或重连webSocket时调用
   * @param {*} 可选值 要传的数据
   */
  connect(data) {
    // 新建 WebSocket 实例
    this.ws = new WebSocket(this.url);
    this.ws.onopen = e => {
      // 连接ws成功回调
      this.status = 'open';
      console.log(`${this.name}连接成功`, e);

      // 触发更新
      return this.startWsAfter();

      //心跳检测
      // this.heartCheck();

      if (data !== undefined) {
        // 有要传的数据,就发给后端
        return this.ws.send(data);
      }
    };

    // 监听服务器端返回的信息
    this.ws.onmessage = e => {
      return this.msgCallback(e.data);
    };

    // ws关闭回调
    this.ws.onclose = e => {
      this.closeHandle(e); // 判断是否关闭
    };

    // ws出错回调
    this.ws.onerror = e => {
      this.closeHandle(e); // 判断是否关闭
    };
  }

  // 发送信息给服务器
  sendHandle(data) {
    return this.ws.send(data);
  }

  //节流
  throttle(fn, interval) {
    let last = 0;
    return function (...args) {
      let context = this;
      let now = +new Date();
      // 还没到时间
      if (now - last < interval) return;
      last = now;
      fn.apply(this, args);
    };
  }

  closeHandle(e = 'err') {
    // 因为webSocket并不稳定，规定只能手动关闭(调closeMyself方法)，否则就重连
    if (this.status !== 'close') {
      console.log(this.name + '网络不稳定断开进行重连');
      if (!this.interval) {
        return;
      }
      this.interval = false;
      setTimeout(() => {
        this.connect();
        this.interval = true;
      }, 1000);
    }
  }

  // 手动关闭WebSocket
  closeWebsocket() {
    this.status = 'close';
    console.log(`手动关闭websocket`);
    return this.ws.close();
  }

  //心跳检测
  heartCheck = {
    timeout: 5000,
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
      clearTimeout(this.timeoutObj);
      clearTimeout(this.serverTimeoutObj);
      return this;
    },
    start: function () {
      var self = this;
      this.timeoutObj && clearTimeout(this.timeoutObj);
      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
      this.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        //onmessage拿到返回的心跳就说明连接正常
        this.ws.send('HeartBeat');
        console.log('ping');
        self.serverTimeoutObj = setTimeout(function () {
          // 如果超过一定时间还没重置，说明后端主动断开了
          this.ws.closeWebsocket(); //如果onclose会执行reconnect，我们执行 websocket.close()就行了.如果直接执行 reconnect 会触发onclose导致重连两次
        }, self.timeout);
      }, this.timeout);
    },
  };
}