小程序websocket心跳库(websocket-heartbeat-miniprogram)


Posted in Javascript onFebruary 23, 2020

前言

在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心跳库内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
易被忽视的js事件问题总结
May 14 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 #Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 #Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 #Javascript
vue.js实现简单的计算器功能
Feb 22 #Javascript
Vue.js实现立体计算器
Feb 22 #Javascript
vue实现计算器功能
Feb 22 #Javascript
js实现网页版贪吃蛇游戏
Feb 22 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
医药专业推荐信
2013/11/15 职场文书
招商业务员岗位职责
2013/12/16 职场文书
委托证明的格式
2014/01/10 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
社区娱乐活动方案
2014/08/21 职场文书
小学运动会宣传稿
2015/07/23 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python