最近在開發小程序用到了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 }) } },我們設置一個鎖和最大的重連次數，避免出現無限重連的情況，為了不給服務器太大的壓力我這里設置的是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事件又去重連了（渣男）
至此，心跳重連實現完畢
總結
Socket心跳重連在H5中可以有類似的實現，也有成熟的第三方庫，比如說stomp+websocket+sockjs可以實現更加完整的更兼容的socket連接方案,可以下次給大家分享(看我心情)。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
