微信小程序 實現websocket長鏈接 以及斷開鏈接以後自動重連

app.js

let socketMsgQueue = []
let isLoading = false

App({
  globalData: {
    userInfo: null,
    localSocket: {},
    callback: function () {}
  },
  showLoad() {
    if(!isLoading) {
      wx.showLoading({
        title: '請稍後...',
      })
      isLoading = true
    }
  },
  hideLoad() {
    wx.hideLoading()
    isLoading = false
  },
  initSocket() {
    let that = this
    that.globalData.localSocket = wx.connectSocket({
      // url: 'wss://test.enzhico.net/app'
      url: 'wss://mapp.enzhico.net/app'
    })
    that.showLoad()
    that.globalData.localSocket.onOpen(function (res) {
      console.log('WebSocket鏈接已打開！readyState=' + that.globalData.localSocket.readyState)
      that.hideLoad()
      while (socketMsgQueue.length > 0) {
        var msg = socketMsgQueue.shift();
        that.sendSocketMessage(msg);
      }
    })
    that.globalData.localSocket.onMessage(function(res) {
      that.hideLoad()
      that.globalData.callback(res)
    })
    that.globalData.localSocket.onError(function(res) {
      console.log('readyState=' + that.globalData.localSocket.readyState)
    })
    that.globalData.localSocket.onClose(function (res) {
      console.log('WebSocket鏈接已關閉！readyState=' + that.globalData.localSocket.readyState)
      that.initSocket()
    })
  },
  //統一發送消息
  sendSocketMessage: function (msg) {
    if (this.globalData.localSocket.readyState === 1) {
      this.showLoad()
      this.globalData.localSocket.send({
        data: JSON.stringify(msg)
      })
    } else {
      socketMsgQueue.push(msg)
    }
  },
  onShow: function(options) {
    if (this.globalData.localSocket.readyState !== 0 && this.globalData.localSocket.readyState !== 1) {
      console.log('開始嘗試鏈接WebSocket！readyState=' + this.globalData.localSocket.readyState)
      this.initSocket()
    }
  }
})

 

page 頁面 

/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
  var that = this
  app.globalData.callback = function (res) {
   //res  接收websocket onMessage事件返回的數據

  }
}
//向服務器發送數據
app.sendSocketMessage(data: JSON.stringify({});

)

　　

 

SocketTask

 這個對象是經過wx.connetSocket(obj)來獲取的，他有一個屬性值readyState,有4個狀態值：

1 CONNECTING:0 鏈接中

2 OPEN:1 已鏈接

3 CLOSING:2 關閉中

4 CLOSED:3 已關閉

 剛開始咱們使用的作法是全局一個變量socketOpen，用來表示這個socket是否打開，沒有打開就重連，不然就直接調用發送消息接口了。可是通過測試發現網絡不穩定，會出現這個變量沒有獲得及時更新一直是true。而後就再也不去鏈接了，但實際上已經斷開了

因此最後就把這個socketOpen變量去掉，直接判斷SocketTask對象的屬性值readyState，若是是1的話就表示直接可用；

 

 

 

基本思路：

1 全局維護一個SocketTask對象，用來表示websocket鏈接，小程序onShow時判斷是否斷線，是否須要重連

2 同時定義一個全局的回調函數callback回調函數，每一個頁面初始化的時候更新這個回調函數，那麼每一個頁面中收到的返回信息就會執行當前頁面邏輯

3 維護一個消息隊列，全部的消息請求會首先判斷鏈接是否可用，可用直接send，不可用將消息push到這個隊列中。

4 在app.js的onShow函數中判斷鏈接是否連上，若是沒有連上就會觸發websocket鏈接

5 SocketTask對象的onOpen()負責從消息隊列中取出請求消息，併發送這個請求消息

6 SocketTask對象的onMessage() 負責接收返回消息。並調用每一個頁面本身定義的回調函數

7 SocketTask對象的onClose() 監聽函數中，觸發websocket鏈接

 

 

來自：https://blog.csdn.net/h_a_h_ahahah/article/details/80645939