前言

在16年的時(shí)候因?yàn)轫?xiàng)目接觸到websocket，而后對(duì)心跳重連做了一次總結(jié)，寫了篇博客，而后18年對(duì)之前github上的demo代碼進(jìn)行了再次開(kāi)發(fā)和開(kāi)源，最終封裝成庫(kù)。如下：

• 博客：https://www.cnblogs.com/1wen/p/5808276.html
• github: https://github.com/zimv/websocket-heartbeat-js
• npm: https://www.npmjs.com/package/websocket-heartbeat-js

在2020年也就是今年初，同事建議說(shuō)可以考慮兼容一下小程序，心想也挺好的。便有了今天的 websocket-heartbeat-miniprogram，這次基于以前的代碼新建了一個(gè)項(xiàng)目，只做小程序的版本，因?yàn)樯婕暗礁鞣N小程序以及相關(guān)框架的兼容，覺(jué)得還是單獨(dú)出一個(gè)包，更專注一點(diǎn)。

介紹

websocket-heartbeat-miniprogram基于小程序的websocket相關(guān)API進(jìn)行封裝，主要目的是保障客戶端websocket與服務(wù)端連接狀態(tài)。該程序有心跳檢測(cè)及自動(dòng)重連機(jī)制，當(dāng)網(wǎng)絡(luò)斷開(kāi)或者后端服務(wù)問(wèn)題造成客戶端websocket斷開(kāi)，程序會(huì)自動(dòng)嘗試重新連接直到再次連接成功。兼容市面上大部分小程序微信，百度，支付寶等，只要都是統(tǒng)一的小程序weboscket-API規(guī)范。也支持小程序框架比如Taro等。無(wú)論如何，業(yè)務(wù)是需要一層心跳機(jī)制的，否則一些情況下會(huì)丟失連接導(dǎo)致功能無(wú)法使用。

用法

安裝

1npm install --save websocket-heartbeat-miniprogram

引入使用

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

本程序內(nèi)部總是使用小程序connectSocket方法進(jìn)行socket連接，如果socket斷開(kāi)，本程序內(nèi)部會(huì)再次執(zhí)行小程序的connectSocket方法，以此來(lái)重新建立連接，重連都會(huì)建立新的小程序socket實(shí)例。

WebsocketHeartbeat方法返回一個(gè)promise，返回的task對(duì)象是本程序的一個(gè)實(shí)例,提供了onOpen,onClose,onError,onMessage,onReconnect等鉤子函數(shù)。也暴露了小程序本身的實(shí)例（socketTask），task.socketTask就是小程序connectSocket返回的實(shí)例，而task.socketTask是小程序的原生實(shí)例，它們通過(guò)onXXX方法傳遞函數(shù)進(jìn)行監(jiān)聽(tīng)注冊(cè)，在socket重連以后，內(nèi)部重新通過(guò)connectSocket新建實(shí)例，將會(huì)返回新的小程序原生實(shí)例，因此之前通過(guò)socketTask.onXXX注冊(cè)的這些函數(shù)將會(huì)丟失。而本程序內(nèi)部提供的鉤子函數(shù)重連上以后依然有效。大部分情況下推薦就使用本程序的鉤子函數(shù)。

支付寶小程序差異

支付寶小程序只允許同時(shí)存在一個(gè)socket連接，原生的API也和其他小程序有一點(diǎn)小差異，本程序已經(jīng)做了兼容，但是還是要注意支付寶只允許建立一個(gè)socket，如果建立多個(gè)socket，前面的socket都會(huì)被系統(tǒng)關(guān)閉，一定要通過(guò)本程序?qū)嵗膖ask.close關(guān)閉舊的socket，否則程序會(huì)一直重連，導(dǎo)致所有socket相互沖突無(wú)法使用。

約定

1.只能通過(guò)前端主動(dòng)關(guān)閉socket連接

如果需要斷開(kāi)socket，應(yīng)該執(zhí)行task.close()方法。如果后端想要關(guān)閉socket，應(yīng)該下發(fā)一個(gè)消息，前端判斷此消息，前端再調(diào)用task.close()方法關(guān)閉。因?yàn)闊o(wú)論是后端調(diào)用close還是因?yàn)槠渌蛟斐傻膕ocket關(guān)閉，前端的socket都會(huì)觸發(fā)onClose事件，程序無(wú)法判斷是什么原因?qū)е碌年P(guān)閉。因此本程序會(huì)默認(rèn)嘗試重連。

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

2.后端對(duì)前端心跳的反饋

前端發(fā)送心跳消息，后端收到后，需要立刻返回響應(yīng)消息，后端響應(yīng)的消息可以是任何值，因?yàn)楸境绦虿⒉惶幚砗团袛囗憫?yīng)的心跳消息，而只是在收到任何消息后，重置心跳，因?yàn)槭盏饺魏蜗⒕驼f(shuō)明連接是正常的。因此本程序收到任何后端返回的消息都會(huì)重置心跳倒計(jì)時(shí)，以此來(lái)減少不必要的請(qǐng)求，減少服務(wù)器壓力。

API

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

結(jié)語(yǔ)

程序已經(jīng)經(jīng)過(guò)單元測(cè)試，也在百度，支付寶，微信等小程序之中實(shí)際測(cè)試和基于Taro測(cè)試。程序長(zhǎng)期維護(hù)，發(fā)現(xiàn)兼容問(wèn)題或者程序問(wèn)題，希望得到issue反饋！

https://wx.tenpay.com/f2f?t=AQAAAB783RadsEXy2nz36GYeyf0%3D (二維碼自動(dòng)識(shí)別)

有沒(méi)有人打賞？沒(méi)有的話，那我晚點(diǎn)再來(lái)問(wèn)問(wèn)。

http://weixin.qq.com/r/IExmfi3E1XCqrWkd9xky (二維碼自動(dòng)識(shí)別)

關(guān)注大詩(shī)人公眾號(hào)，第一時(shí)間獲取最新文章。

總結(jié)

以上是生活随笔為你收集整理的htmlcss实例小项目_小程序websocket心跳库——websocket-heartbeat-miniprogram的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。