vue 中使用 webSocket 收發數據, 增加 " 心跳機制 " 保持連接.

 1、頁面加載時候，開啟長連接：

 created() {
    this.adminIds = getadminId();
    this.tokens = getToken();
    this.merIds = getmerId();
    //頁面剛進入時，判斷有無token，有則開啟長連接
    if(this.tokens) {
      this.initWebSocket();
    } else {}

  },

　2、頁面銷毀、關閉長連接：

destroyed: function() {
    //頁面銷毀時關閉長連接
    this.websocketclose();
  },

　3、定義長連接：

    initWebSocket(){ //初始化weosocket
      const that = this;
      const wsuri = 'wss:// + 域名 + /merchantWebSocket?' + 'adminId=' + this.adminIds + '&token=' + this.tokens + '&userId=' + this.merIds;   //ws地址，這個要跟后端協商定義
      // console.log(wsuri);
      //建立連接
      this.websock = new WebSocket(wsuri);
      //連接成功
      this.websock.onopen = this.websocketonopen;
      //連接錯誤
      this.websock.onerror = this.websocketonerror;
      //接收信息
      this.websock.onmessage = this.websocketonmessage;
      //連接關閉
      this.websock.onclose = this.websocketclose;
    },

　4、斷線重連：

reconnect() {//重新連接
      var that = this;
      if(that.lockReconnect) {
        return;
      }
      that.lockReconnect = true;
      //沒連接上會一直重連，設置延遲避免請求過多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      that.timeoutnum = setTimeout(function () {
        //新連接
        that.initWebSocket();
        that.lockReconnect = false;
      },5000);
    },

　5、其他連接方式：

websocketonopen() {//連接成功事件
      console.log("WebSocket連接成功");
      //開啟心跳
      this.start();
    },
    websocketonerror(e) {//連接失敗事件
      //錯誤
      console.log("WebSocket連接發生錯誤");
      //重連
      this.reconnect();
    },
    websocketclose(e) {//連接關閉事件
      //關閉
      console.log("WebSocket關閉");
      // console.log("connection closed (" + e.code + ")");
      //重連
      this.reconnect();
    },
    websockOpen() {//打開連接
      console.log("WebSocket連接成功");
      this.start();
    },

websocketonmessage(e){ //數據接收
  console.log(e.data);
  //收到服務器信息，心跳重置
  // this.reset();
},

     6、開啟心跳：

start(){
      // console.log('開啟心跳');
      const self = this;
      let _num = 3;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      self.timeoutObj = setTimeout(function(){
        //這里發送一個心跳，后端收到后，返回一個心跳消息，
        if (self.websock.readyState === 1) {//如果連接正常
          // console.log(self.websock);
          self.websock.send("heartCheck");
        }else{//否則重連
          self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(function() {
          //超時關閉
          _num--;
          //計算答復的超時次數
          if(_num === 0) {
            self.websocketclose();
          }
        }, self.timeout);

      }, self.timeout)
    },

    7、重置心跳：

reset(){
      // console.log('重置心跳');
      var that = this;
      //清除時間
      clearTimeout(that.timeoutObj);
      clearTimeout(that.serverTimeoutObj);
      //重啟心跳
      that.start();
    },

　8、export default ，data 中定義：

data() {
    return {
      levelList: null,
      adminIds: '',
      tokens: '',
      merIds: '',
      webSocket: null,
      lockReconnect: false,//是否真正建立連接
      timeout: 28*1000,//30秒一次心跳
      timeoutObj: null,//心跳心跳倒計時
      serverTimeoutObj: null,//心跳倒計時
      timeoutnum: null,//斷開 重連倒計時
    }
  },