快捷導(dǎo)航

詳解微信小程序?qū)崿F(xiàn)WebSocket心跳重連

更新時間：2018年07月31日 09:48:37 作者：白偉業(yè)

這篇文章主要介紹了詳解微信小程序?qū)崿F(xiàn)WebSocket心跳重連，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

Websocket簡介

Websocket是什么

WebSocket 是一種網(wǎng)絡(luò)通信協(xié)議。RFC6455 定義了它的通信標(biāo)準(zhǔn)。

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

為什么需要Websocket

HTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應(yīng)用層協(xié)議。它采用了請求/響應(yīng)模型。通信請求只能由客戶端發(fā)起，服務(wù)端對請求做出應(yīng)答處理。

所以當(dāng)我們想服務(wù)器主動給客戶端發(fā)送消息，HTTP是做不到的，我們只能使用輪詢或者長輪詢來實現(xiàn)類似的功能，這樣的方式效率低并且浪費資源，為了解決這樣的問題，WebSocket誕生了。

小程序中的WebSocket

小程序WebSocket的API

把你給懶得！自己官網(wǎng)看去!

為什么要做心跳重連

在使用原生WebSocket的時候，我們經(jīng)常會感覺不太穩(wěn)定，服務(wù)端發(fā)送的消息有時候客戶端接收不到，或者是客戶端發(fā)送的消息服務(wù)端接收不到，雖然WebSocket也提供了onError和onClose的方法，但是經(jīng)常會有各種未知情況導(dǎo)致斷開連接而并不觸發(fā)Error或Close事件。這樣就導(dǎo)致實際連接已經(jīng)斷開了，而客戶端和服務(wù)端卻不知道，還在傻傻的等著消息來。

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

保證連接狀態(tài)，連接斷開時讓客戶端與服務(wù)端都能知道，進(jìn)而重連。

上代碼

頁面載入后,我們連接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()
   }
  })
 },

綁定事件

然后調(diào)用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 已關(guān)閉！')
  })
 },

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

斷線重連

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
   })
  }
 },

我們設(shè)置一個鎖和最大的重連次數(shù)，避免出現(xiàn)無限重連的情況，為了不給服務(wù)器太大的壓力我這里設(shè)置的是5秒重試一次，最多請求12次。

改造一下initEventHandle這樣我們就可以實現(xiàn)一般的觸發(fā)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 已關(guān)閉！')
   this.reconnect()
  })
 },

關(guān)鍵的來的---心跳對象

先擼為敬

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("發(fā)送ping");
   wx.sendSocketMessage({
    data:"ping",
    // success(){
    //  console.log("發(fā)送ping成功");
    // }
   });
   this.serverTimeoutObj = setTimeout(() =>{
    wx.closeSocket(); 
   }, this.timeout);
  }, this.timeout);
 }
};

心跳對象內(nèi)timeout為每10秒發(fā)一次心跳,timeoutObj、serverTimeoutObj是清除定時器用的對象，reset方法重置定時器，start發(fā)送心跳。

繼續(xù)改造我們的initEventHandle

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

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

在嗎?

在

在嗎?

在

在嗎?

滾

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

如果超過10秒服務(wù)端還沒回復(fù)“pong”，則認(rèn)為連接斷開的

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

這是暴脾氣的客戶端直接把連接關(guān)閉，調(diào)用closeSocket，可是一關(guān)閉我們的onSocketClose事件又去重連了（渣男）

至此，心跳重連實現(xiàn)完畢