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

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

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