vue項(xiàng)目實(shí)戰(zhàn)WebSocket

  sbnumber(){
  for (let i = 0; i < 18; i++) {
    this.sbnumlist.push(Math.round(Math.random()*10))
  }
    let aa= this.sbnumlist.toString()
    this.sbnumlist=aa.replace(/,/g, "")  //生成一個(gè)隨機(jī)數(shù)根據(jù)后端要求來(lái)定
    var _this = this
    var tt;
        var wsurl =this.websock+this.sbnumlist  //聲明一個(gè)websocket的連接 拼接隨機(jī)數(shù)(此處為websocket的地址)
      var lockReconnect = false;//避免重復(fù)連接
        if ('WebSocket' in window) {
          _this.ws = new WebSocket(wsurl) // 創(chuàng)建websocket連接
          init();  // 執(zhí)行方法
        } else {
          alert('您的瀏覽器不支持 WebSocket!')
        }
    function createWebSocket() {
      try {
      _this.ws = new WebSocket(wsurl);
      init();
      } catch(e) {
      console.log('catch');
      reconnect(wsurl);
      }
      }
      function init() {
      _this.ws.onopen = function() {
      Heartbeat.start();
      _this.ws.send('發(fā)送數(shù)據(jù)')
      }
      _this.ws.onmessage = function(evt) {
      console.log(evt)  // 收到后端返回的數(shù)據(jù)(主要執(zhí)行代碼的地方)
      Heartbeat.start(); // 執(zhí)行心跳
      }
      _this.ws.onclose = function() { // 關(guān)閉 websocket
       reconnect(wsurl);
      }
    _this.ws.onerror = function() { // websocket執(zhí)行錯(cuò)誤
      reconnect(wsurl);
      }
      }
    function reconnect(url) {
      if(lockReconnect) {
        return;
      };
      lockReconnect = true; // 沒(méi)連接上會(huì)一直重連,設(shè)置延遲避免請(qǐng)求過(guò)多
      tt && clearTimeout(tt);
      tt = setTimeout(function () {
        createWebSocket(wsurl);
        lockReconnect = false;
      }, 3000);
    } 
      var Heartbeat= {
      timeout: 60000,
      timeoutObj: null,
      serverTimeout: null,
      start: function(){
        var self = this;
        this.timeoutObj && clearTimeout(this.timeoutObj);
        this.serverTimeout&& clearTimeout(this.serverTimeout);
        this.timeoutObj = setTimeout(function(){
            //這里發(fā)送一個(gè)心跳,后端收到后,返回一個(gè)心跳消息,
            _this.ws.send("1234");
            self.serverTimeout = setTimeout(function() {
             _this.ws.close();
             }, self.timeout);
        }, this.timeout)
      }
    }
    },

離開(kāi)頁(yè)面退出websocket

    destroyed(){  // 調(diào)用vue 銷毀事件
      let _this=this
      _this.ws.close();
    },

具體需求根據(jù)具體要求來(lái)定,新手上路多多關(guān)照,如有什么需要優(yōu)化的地方還請(qǐng)各位大神多多關(guān)照。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容