前言

在16年的时候因为项目接触到websocket，而后对心跳重连做了一次总结，写了篇博客，而后18年对之前github上的demo代码进行了再次开发和开源，最终封装成库。如下：

• 博客：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年也就是今年初，同事建议说可以考虑兼容一下小程序，心想也挺好的。便有了今天的 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反馈！

p.p1 { margin: 0; font: 13px “Helvetica Neue”; color: rgba(0, 0, 0, 1) }
p.p1 { margin: 0; font: 13px “Helvetica Neue”; color: rgba(0, 0, 0, 1) }
p.p1 { margin: 0; font: 13px “Helvetica Neue”; color: rgba(0, 0, 0, 1) }
p.p1 { margin: 0; font: 13px “Helvetica Neue”; color: rgba(0, 0, 0, 1) }