WebSocket心跳重連講解

最近在開發小程序用到了WebSocket,小程序提供了相應的原生API,與H5的API使用方式上有一些區別,所以流行的H5的一些成熟的類庫使用起來有些困難,而原生API又存在一些缺陷,所以就自己實現了一套心跳重連機制。

慣例,先簡單介紹一下Websocket。

爲什麼需要Websocket

HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它採用了請求/響應模型。通信請求只能由客戶端發起,服務端對請求做出應答處理。

所以當我們想服務器主動給客戶端發送消息,HTTP是做不到的,我們只能使用輪詢或者長輪詢來實現類似的功能,這樣的方式效率低並且浪費資源,爲了解決這樣的問題,WebSocket誕生了。

小程序中的WebSocket

小程序WebSocket的API

把你給懶得!自己官網看去!

爲什麼要做心跳重連

在使用原生WebSocket的時候,我們經常會感覺不太穩定,服務端發送的消息有時候客戶端接收不到,或者是客戶端發送的消息服務端接收不到,雖然WebSocket也提供了onError和onClose的方法,但是經常會有各種未知情況導致斷開連接而並不觸發Error或Close事件。這樣就導致實際連接已經斷開了,而客戶端和服務端卻不知道,還在傻傻的等着消息來。

所以我們要解決的問題就很清晰了:

保證連接狀態,連接斷開時讓客戶端與服務端都能知道,進而重連。

上代碼

頁面載入後,我們連接socket先

onLoad(){
  this.linkSocket()
 },
 linkSocket(){
  let that = this
  wx.connectSocket({
   url: app.globalData.wsUrl + 'websocket?' + this.data.taskId + '&' + this.data.userId,
   success() {
    console.log('連接成功')
    that.initEventHandle()
   }
  })
 },

綁定事件

然後調用initEventHandle來綁定各種各樣的事件

initEventHandle(){
  let that = this
  wx.onSocketMessage((res) => {
   //收到消息
  })
  wx.onSocketOpen(()=>{
   console.log('WebSocket連接打開')
  })
  wx.onSocketError(function (res) {
   console.log('WebSocket連接打開失敗')
  })
  wx.onSocketClose(function (res) {
   console.log('WebSocket 已關閉!')
  })
 },

這個先放在這我們一會往裏填東西

斷線重連

reconnect(){
  if (this.lockReconnect) return;
  this.lockReconnect = true;
  clearTimeout(this.timer)
  if (this.data.limit<12){
   this.timer = setTimeout(() => {
    this.linkSocket();
    this.lockReconnect = false;
   }, 5000);
   this.setData({
    limit: this.data.limit+1
   })
  }
 },

我們設置一個鎖和最大的重連次數,避免出現無限重連的情況,爲了不給服務器太大的壓力我這裏設置的是5秒重試一次,最多請求12次。

改造一下initEventHandle這樣我們就可以實現一般的觸發Error的斷線重連。

initEventHandle(){
  let that = this
  wx.onSocketMessage((res) => {
   //收到消息
  })
  wx.onSocketOpen(()=>{
   console.log('WebSocket連接打開')
  })
  wx.onSocketError((res)=>{ 
   console.log('WebSocket連接打開失敗')
   this.reconnect()
  })
  wx.onSocketClose((res)=> {
   console.log('WebSocket 已關閉!')
   this.reconnect()
  })
 },

關鍵的來的---心跳對象

先擼爲敬

let heartCheck = {
 timeout: 10000, 
 timeoutObj: null,
 serverTimeoutObj: null,
 reset: function () {
  clearTimeout(this.timeoutObj);
  clearTimeout(this.serverTimeoutObj);
  return this;
 },
 start: function () {
  this.timeoutObj = setTimeout(()=> {
   console.log("發送ping");
   wx.sendSocketMessage({
    data:"ping",
    // success(){
    //  console.log("發送ping成功");
    // }
   });
   this.serverTimeoutObj = setTimeout(() =>{
    wx.closeSocket(); 
   }, this.timeout);
  }, this.timeout);
 }
};

心跳對象內timeout爲每10秒發一次心跳,timeoutObj、serverTimeoutObj是清除定時器用的對象,reset方法重置定時器,start發送心跳。

繼續改造我們的initEventHandle

initEventHandle(){
  let that = this
  wx.onSocketMessage((res) => {
   //收到消息
   if (res.data == "pong"){
    heartCheck.reset().start()
   }else{
    \\處理數據
   }
  })
  wx.onSocketOpen(()=>{
   console.log('WebSocket連接打開')
   heartCheck.reset().start()
  })
  wx.onSocketError((res)=>{ 
   console.log('WebSocket連接打開失敗')
   this.reconnect()
  })
  wx.onSocketClose((res)=> {
   console.log('WebSocket 已關閉!')
   this.reconnect()
  })
 },

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章