前言

在16年的時候因為專案接觸到websocket，而後對心跳重連做了一次總結，寫了篇部落格，而後18年對之前github上的demo程式碼進行了再次開發和開源，最終封裝成庫。如下：

github: https://github.com/zimv/websocket-heartbeat-js
npm: https://www.npmjs.com/package/websocket-heartbeat-js

在2020年也就是今年初，同事建議說可以考慮相容一下小程式，心想也挺好的。便有了今天的 websocket-heartbeat-miniprogram，這次基於以前的程式碼新建了一個專案，只做小程式的版本，因為涉及到各種小程式以及相關框架的相容，覺得還是單獨出一個包，更專注一點。

介紹

websocket-heartbeat-miniprogram基於小程式的websocket相關API進行封裝，主要目的是保障客戶端websocket與服務端連線狀態。該程式有心跳檢測及自動重連機制，當網路斷開或者後端服務問題造成客戶端websocket斷開，程式會自動嘗試重新連線直到再次連線成功。相容市面上大部分小程式微信，百度，支付寶等，只要都是統一的小程式weboscket-API規範。也支援小程式框架比如Taro等。無論如何，業務是需要一層心跳機制的，否則一些情況下會丟失連線導致功能無法使用。

用法

安裝

npm install --save websocket-heartbeat-miniprogram

引入使用

import WebsocketHeartbeat from 'websocket-heartbeat-miniprogram';
WebsocketHeartbeat({
  miniprogram: wx,connectSocketParams: {
    url: 'ws://xxx'
  }
})
  .then(task => {
    task.onOpen = () => {//鉤子函式
      console.log('open');
    };
    task.onClose = （） => {//鉤子函式
      console.log('close');
    };
    task.onError = e => {//鉤子函式
      console.log('onError：',e);
    };
    task.onMessage = data => {//鉤子函式
      console.log('onMessage',data);
    };
    task.onReconnect = () => {//鉤子函式
      console.log('reconnect...');
    };
    task.socketTask.onOpen(data => {//原生例項註冊函式，重連後丟失
      console.log('socketTask open');
    });
    task.socketTask.onMessage(data => {//原生例項註冊函式，重連後丟失
      console.log('socketTask data');
    });
  })

本程式內部總是使用小程式connectSocket方法進行socket連線，如果socket斷開，本程式內部會再次執行小程式的connectSocket方法，以此來重新建立連線，重連都會建立新的小程式socket例項。

WebsocketHeartbeat方法返回一個promise，返回的task物件是本程式的一個例項,提供了onOpen,onClose,onError,onMessage,onReconnect等鉤子函式。也暴露了小程式本身的例項（socketTask），task.socketTask就是小程式connectSocket返回的例項，而task.socketTask是小程式的原生例項，它們通過onXXX方法傳遞函式進行監聽註冊，在socket重連以後，內部重新通過connectSocket新建例項，將會返回新的小程式原生例項，因此之前通過socketTask.onXXX註冊的這些函式將會丟失。而本程式內部提供的鉤子函式重連上以後依然有效。大部分情況下推薦就使用本程式的鉤子函式。

支付寶小程式差異

支付寶小程式只允許同時存在一個socket連線，原生的API也和其他小程式有一點小差異，本程式已經做了相容，但是還是要注意支付寶只允許建立一個socket，如果建立多個socket，前面的socket都會被系統關閉，一定要通過本程式例項的task.close關閉舊的socket，否則程式會一直重連，導致所有socket相互衝突無法使用。

約定

1.只能通過前端主動關閉socket連線

如果需要斷開socket，應該執行task.close()方法。如果後端想要關閉socket，應該下發一個訊息，前端判斷此訊息，前端再呼叫task.close()方法關閉。因為無論是後端呼叫close還是因為其他原因造成的socket關閉，前端的socket都會觸發onClose事件，程式無法判斷是什麼原因導致的關閉。因此本程式會預設嘗試重連。

import WebsocketHeartbeat from 'websocket-heartbeat-miniprogram';
WebsocketHeartbeat({
  miniprogram: wx,connectSocketParams: {
    url: 'ws://xxxx'
  }
})
  .then(task => {
    task.onMessage = data => {
      if(data.data == 'close') task.close();//關閉socket並且，不再重連
    };
  })

2.後端對前端心跳的反饋

前端傳送心跳訊息，後端收到後，需要立刻返回響應訊息，後端響應的訊息可以是任何值，因為本程式並不處理和判斷響應的心跳訊息，而只是在收到任何訊息後，重置心跳，因為收到任何訊息就說明連線是正常的。因此本程式收到任何後端返回的訊息都會重置心跳倒計時，以此來減少不必要的請求，減少伺服器壓力。

API

詳情參考： https://github.com/zimv/websocket-heartbeat-miniprogram

結語

程式已經經過單元測試，也在百度，支付寶，微信等小程式之中實際測試和基於Taro測試。程式長期維護，發現相容問題或者程式問題，希望得到issue反饋！

到此這篇關於小程式websocket心跳庫(websocket-heartbeat-miniprogram)的文章就介紹到這了,更多相關小程式websocket心跳庫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！