小程序websocket心跳库——websocket-heartbeat-miniprogram

前言

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

• 博客：http://www.javashuo.com/article/p-ybaopgvt-hq.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反馈！