前言

在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注冊的這些函數將會丟失。而本程序內部提供的鉤子函數重連上以后依然有效。大部分情況下推薦就使用本程序的鉤子函數。