htmlcss实例小项目_小程序websocket心跳库——websocket-heartbeat-miniprogram

aefa393ccd14aacb9ec95dc82797e235.png

前言

在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等。无论如何,业务是需要一层心跳机制的,否则一些情况下会丢失连接导致功能无法使用。

用法

安装

1npm 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反馈!

https://wx.tenpay.com/f2f?t=AQAAAB783RadsEXy2nz36GYeyf0%3D (二维码自动识别)

有没有人打赏?没有的话,那我晚点再来问问。

http://weixin.qq.com/r/IExmfi3E1XCqrWkd9xky (二维码自动识别)

关注大诗人公众号,第一时间获取最新文章。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/468103.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 索引器简介

索引器是一种特殊的类成员,它能够让对象以类似数组的方式来存取,是程序看起来更为直观,更容易编写。 1、索引器的定义 C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对…

C语言,画吃豆人剖析

接上一篇文章,很多人还是搞不清楚ptr1[-1]是怎么回事,可以看看这篇文章,看完的同学还是多转发的,让更多的人看到。一道90%都会做错的指针题偶然的一次机会在知乎上看到这个代码,里面涉及的C语言点我觉得很酷&#xff0…

android 教学白板功能,Android集成互动白板

Android集成互动白板注意:SDK版本3.6.5之后开始支持白板功能.使用白板功能首先需要登录环信,登录成功之后才可以去调用api创建白板房间,创建成功之后会直接加入房间,不需要再去调用加入的api。其他人可以通过房间名称或者通过创建…

mit数据集_DriveSeg:动态驾驶场景分割数据集

【导读】麻省理工学院和丰田发布DriveSeg数据集以加速自动驾驶研究,DriveSeg包含许多常见道路对象的精确像素级表示,并通过连续视频驾驶场景的镜头。我们如何训练自动驾驶模型,以加深对周围世界的认识?计算机能否从过去的经验中学…

没有长夜痛哭的人,不足以谈人生

早上骑电动车上班了,之前已经连续开车上班有一段时间,每天出公司交停车费心都在滴血,活了30年了,想不到我还是这样穷,我总是觉得明天是最好的一天,即使过得不是十分如意,但是我遇到困难的时候总…

android ne调试工具,Android调试工具adb的正确使用方式

引言:通常在使用Eclipse进行Android应用开发的时候,我们可以使用Eclipse自带的工具来完成调试和查看输出日志的操作,但是假如在当前电脑并没有配置适用于Android开发的Eclipse版本的情况下,想要查看Android设备运行应用或者游戏时…

为什么使用模板

C模板编程是泛型编程的实现方式,因为C中的类型都是强类型。所以导致每个变量都有一种相应的类型。这样就会出现一个弊端,就是相同一个算法针对不同类型的參数,就要实现多个版本号,这样岂不是非常麻烦。那么,C中是否会有…

eltable刷新整个表格方法_利用SSAS实现PBI报表增量刷新

欢迎访问我的博客网站阅读最新BI文章对于经常处理大量数据且其Power BI报表不需要每次都刷新整个数据集的用户而言,增量刷新一直都是个问题,特别是对于那些没有条件使用Premium空间的用户以及在本地报表服务器发布报表的用户。一个稳定可靠的方法是利用S…

我和Git的第一次

我第一次接触Git应该是在2010年,我那年买了第一块Linux开发板,是友善之臂的mini2440,就是这个开发板打开了我Linux的大门,价格是499,我两个月的生活费。如果说到了Linux,不说Git就有点说不过去了&#xff0…

android 控件方向旋转90度,android – 旋转视图层次90度

我正在工作的一个子类的FrameLayout,应该是将所有的孩子旋转90度。我这样做是为了克服Android 2.1及以下版本中仅存在于风景中的摄像机限制,将活动放置在横向,但将我的摄像机覆盖放置在此framelayout覆盖中,以使其看起来像是纵向(…

创建线程的方式_创建线程有几种不同的方式?

方式可以用来创建线程1)继承Thread类2)实现Runnable接口3)应用程序可以适用Executor框架来创建线程池实现了Runnable接口这种方式更受欢迎,因为这不需要继承Thread类。在应用设计中已经继承了别的对象的情况下,这需要多…

内存屏障,先看这篇文章

刚看到这个词的时候,我以为是白内障,然后查了很多资料,才理解内存屏障是干嘛的,我就不像很多其他文章说得那么多了,我希望我说得简单一些,让大家看了我的文章都知道这个是怎么回事。说到内存屏障&#xff0…

SpringMVC原理及非注解配置详解

如需转发请标明出处:http://www.cnblogs.com/gudu1/p/7222556.html 1. Spring介绍 Spring MVC是Spring提供的一个强大而灵活的web框架。借助于注解,Spring MVC提供了几乎是POJO的开发模式,使得控制器的开发和测试更加简单。 这些控制器一般不…

ftp 追加远程文件_远程办公彻底火了,高效办公,拒绝卡顿,远程利器你选对了么?...

远程办公的同时肯定会应用到公司的内部系统了,比如OA、ERP等系统,当然为了提高远程办公人员的工作效率,实现资源共享最大化,企业FTP服务的应用也是必不可少。无论是员工出差还是修改,一旦涉及文件的应用,通…

android jxl.jar 使用,使用jxl.jar在Android中操作Excel表格——重中之重——对隐藏表的处理...

曾简单了解过C#,将Excel(数据库表)表中的数据导入到C#中,使用C#制作的图形化界面进行对Excel表中数据进行操作。今天想试试,在Android中导入Excel表格进行操作。在网上查阅资料,找到了jxl.jar包。jxl.jarjxl.jar是通过java操作exc…

自定义协议的这些典型例子你会了吗?

上次分享的《分享一个很酷的上位机软件》中,有如下协议:有位读者朋友问数据为什么要按这样的格式来发。其实这是个自定义协议,这是上位机开发者定义的一个数据交互协议。我们下位机往伏特加上位机发送数据需要遵循这样的协议数据,…

java 原子类_小学妹教你并发编程的三大特性:原子性、可见性、有序性

在并发编程中有三个非常重要的特性:原子性、有序性,、可见性,学妹发现你对它们不是很了解,她很着急,因为理解这三个特性对于能够正确地开发高并发程序有很大的帮助,接下来的面试中也极有可能被问到,小学妹就…

关于a标签不能调用js方法的小细节,你注意到了么?

在我们做后台删除的时候&#xff0c;当点击删除标签时&#xff0c;你希望弹出一个友好的提示框&#xff01;比如这样&#xff1a; 那代码应该怎样写呢&#xff1f;向下面这样&#xff1f; <!DOCTYPE html> <html lang"en"> <head><meta charset…

android power 按键,Android Framework层Power键关机流程(一,Power长按键操作处理)

一&#xff1a;Android处理Power按键长按操作在Framework层中&#xff0c;Android4.x对Power键(KeyEvent.KEYCODE_POWER)的操作&#xff0c;我们从PhoneWindowManager开始分析&#xff0c;在分析前我这里打印了该方法的堆栈调用信息。大家可以参考一下。public long interceptK…

4岁小女孩给Linux内核贡献提交

今天在reddit上看到一个有趣的讨论&#xff0c;一个4岁的小女孩给Linux提交了一个补丁&#xff0c;并且这个补丁合并到了代码中。链接如下&#xff1a;https://www.reddit.com/r/linux/comments/2pqqla/kernel_commit_4_year_old_girl_fixes_formatting_to/cmzfvpl/我们看看她修…