小程序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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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中文乱码
2009/11/26 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python3.x实现base64加密和解密
2019/03/28 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python 绘制场景热力图的示例
2020/09/23 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
测量实习生自我鉴定
2013/09/19 职场文书
房地产开发计划书
2014/01/10 职场文书
商务英语广告词大全
2014/03/18 职场文书
绿色学校实施方案
2014/03/31 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
父亲节感言
2015/08/03 职场文书