這篇文章主要介紹微信小程序如何實現WebSocket心跳重連機制，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

沙依巴克網站建設公司創新互聯公司,沙依巴克網站設計制作，有大型網站制作公司豐富經驗。已為沙依巴克近1000家提供企業網站建設服務。企業網站搭建\成都外貿網站制作要多少錢，請找那個售后服務好的沙依巴克做網站的公司定做！

Websocket簡介

---

Websocket是什么

WebSocket 是一種網絡通信協議。RFC6455 定義了它的通信標準。

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

為什么需要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()
    })
  },

打開連接的時候調用start開始心跳,每隔10秒向服務端發送消息"ping",服務端接收到消息后給我們回個話"pong",就好像微信聊天。

在嗎?

在

在嗎?

在

在嗎?

滾

別看在嗎很煩，至少能確定你們倆還是好友，要不他把你拉黑了你還不知道（有點跑題了）

如果超過10秒服務端還沒回復“pong”，則認為連接斷開的

我擦，敢刪我好友，我這東北爺們的暴脾氣這能忍？我把你也刪了 。。。。。。。。。。。然后趕緊重新申請好友

這是暴脾氣的客戶端直接把連接關閉，調用closeSocket，可是一關閉我們的onSocketClose事件又去重連了

以上是“微信小程序如何實現WebSocket心跳重連機制”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

網頁題目：微信小程序如何實現WebSocket心跳重連機制
文章鏈接：http://www.yijiale78.com/article33/jodoss.html

成都網站建設公司_創新互聯，為您提供微信公眾號、企業建站、定制網站、品牌網站設計、做網站、網頁設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯