Websocket心跳重連

最近的工作業務上有用到關於websocket的相關知識，本來打算用socket.io去完成，但是最後還是採用了自帶的websocket的方式完成需求

• 新建websocket

   this.websocket = new WebSocket('yoursocketurl')

• 設定websocket傳輸型別(預設為text/json，這裡設定的是二進位制)

    this.websocket.binaryType = "arraybuffer";    

• 監聽open事件

   this.websocket.addEventListener
   
  ('open', (event) => {
   })

• 監聽message事件

  websocket最重要的業務邏輯就在這裡處理，每當收到伺服器傳送過來的訊息，此週期便會觸發一次

  this.websocket.addEventListener('message', event => {
      // 這裡寫你的業務邏輯程式碼
  })

• 監聽close事件

  
  this.websocket.addEventListener('close', (event) => {
  })

現在想象一下有這麼一個場景，如果網路狀態不佳，web端和伺服器的websocket突然斷了一次，整個邏輯都會被毀，所以我們採用心跳重連的方式去重新連線

• 修改close

  
   this.websocket.addEventListener('close', () => {
     this.addWebsocket() // 這裡重新連線websocket
    })

  • addWebsocket程式碼、

    其實就是把整個程式碼放進一個方法，呼叫一次

    
    const addWebsocket = e => {
       this.websocket = new WebSocket('yoursocketurl')
       this.websocket.binaryType
     
     = "arraybuffer"
       this.websocket.addEventListener('open', (event) => {
       })
       this.websocket.addEventListener('message', event => {
         // 這裡寫你的業務邏輯程式碼
       })
       this.websocket.addEventListener('close', () => {
         this.addWebsocket() // 這裡重新連線websocket
       })
    }

• 到這裡就可以肯定能夠心跳重連了

  但是還需要考慮一個事情，就是當你的網路狀態不佳時，它會嘗試一直連線到所以我們需要設定一個limitTime

  
   
   this.websocket.addEventListener('close', () => {
     if (this.recTimes < 59) {
       this.recTimes =  this.recTimes +1
       this.addWebsocket(carId)
     }
   })

• 對應的open也要修改

  
  this.websocket.addEventListener('open', (event) => {
    this.recTimes = 0
  })

  當然如果重新連線成功了，就沒必要傳送重連了，所以再新增一個欄位

  
  this.websocket.addEventListener('open', (event) => {
    this.isReconnect = true
     this.recTimes = 0
  })

  修改後的close

  this.websocket.addEventListener('close', () => {
    if (this.isReconnect) {
      if (this.recTimes < 59) {
        this.recTimes =  this.recTimes +1
        this.addWebsocket(carId)
      }
    }
  })

到這裡就大功告成了！