前言:

两年前写了一篇websocket心跳的博客——初探和实现websocket心跳重连。  阅读量一直比较大,加上最近考虑写一个自己的npm包,因此就完成了一个websocket心跳的检测库。在这里先感谢几个提供帮助的大佬朋友们,小弟受益匪浅。

介绍

websocket-heartbeat-js基于浏览器js原生websocket封装,主要目的是保障客户端websocket与服务端连接状态。该程序有心跳检测及自动重连机制,当网络断开或者后端服务问题造成客户端websocket断开,程序会自动尝试重新连接直到再次连接成功。

原理

在使用原生websocket的时候,如果设备网络断开,不会触发任何函数,前端程序无法得知当前连接已经断开。这个时候如果调用websocket.send方法,浏览器就会发现消息发不出去,便会立刻或者一定短时间后(不同浏览器或者浏览器版本可能表现不同)触发onclose函数。

后端websocket服务也可能出现异常,连接断开后前端也并没有收到通知,因此需要前端定时发送心跳消息ping,后端收到ping类型的消息,立马返回pong消息,告知前端连接正常。如果一定时间没收到pong消息,就说明连接不正常,前端便会执行重连。

为了解决以上两个问题,以前端作为主动方,定时发送ping消息,用于检测网络和前后端连接问题。一旦发现异常,前端持续执行重连逻辑,直到重连成功。

约定

1.关闭websocket连接

如果需要断开websocket,应该执行WebsocketHeartbeatJs.close(),WebsocketHeartbeatJs.ws是原生Websocket实例对象,WebsocketHeartbeatJs.ws.onclose,已经被绑定了重连方法,如果后端websocket服务直接关闭连接,前端WebsocketHeartbeatJs.ws.onclose会被执行,WebsocketHeartbeatJs会尝试重连。如果后端想告诉前端需要断开连接,需要发送特定消息给前端,前端收到特定消息,调用WebsocketHeartbeatJs.close(),WebsocketHeartbeatJs将不会重连。

websocketHeartbeatJs.onmessage = (e) => {
if(e.data == 'close') websocketHeartbeatJs.close();
}

2.ping & pong

前端发送ping消息,后端收到后,需要立刻返回pong消息,pong消息可以是任何值,websocket-heartbeat-js并不处理pong消息,而只是在收到任何消息后,重置心跳,因为收到任何消息就说明连接是正常的。

用法

安装

npm install websocket-heartbeat-js

引入使用

import WebsocketHeartbeatJs from 'websocket-heartbeat-js';
let websocketHeartbeatJs = new WebsocketHeartbeatJs({
url: 'ws://xxxxxxx'
});
websocketHeartbeatJs.onopen = function () {
console.log('connect success');
websocketHeartbeatJs.send('hello server');
}
websocketHeartbeatJs.onmessage = function (e) {
console.log(`onmessage: ${e.data}`);
}
websocketHeartbeatJs.onreconnect = function () {
console.log('reconnecting...');
}

或者

<script src="./node_modules/websocket-heartbeat-js/dist/index.js"></script>
let websocketHeartbeatJs = new window.WebsocketHeartbeatJs({
url: 'ws://xxxxxxx'
});

API

websocketHeartbeatJs.ws (WebSocket)

websocket-heartbeat-js仅仅是封装了心跳相关的钩子函数,websocketHeartbeatJs.ws是原生Websocket实例,如需要使用更多websocket特性,请直接操作websocketHeartbeatJs.ws。

websocketHeartbeatJs.ws 等于 WebSocket(websocketHeartbeatJs.opts.url);

websocketHeartbeatJs.opts (Object)

属性 必填 类型 默认值 描述
url true string none websocket服务端接口地址
pingTimeout false number 15000 每隔15秒发送一次心跳,如果收到任何后端消息定时器将会重置
pongTimeout false number 10000 ping消息发送之后,10秒内没收到后端消息便会认为连接断开
reconnectTimeout false number 2000 尝试重连的间隔时间
pingMsg false string "heartbeat" ping消息值

const options = {
url: 'ws://xxxx',
pingTimeout: 15000,
pongTimeout: 10000,
reconnectTimeout: 2000,
pingMsg: "heartbeat"
}
let websocketHeartbeatJs = new WebsocketHeartbeatJs(options);

websocketHeartbeatJs.send(msg) (function)

发送消息给后端

websocketHeartbeatJs.send('hello server');

websocketHeartbeatJs.close() (function)

前端手动断开websocket连接,此方法不会触发重连。 websocketHeartbeatJs.close()

钩子函数和事件函数

websocketHeartbeatJs.onclose (function)

websocketHeartbeatJs.onclose = () => {
console.log('connect close');
}

websocketHeartbeatJs.onerror (function)

websocketHeartbeatJs.onerror = () => {
console.log('connect onerror');
}

websocketHeartbeatJs.onopen (function)

websocketHeartbeatJs.onopen = () => {
console.log('open success');
}

websocketHeartbeatJs.onmessage (function)

websocketHeartbeatJs.onmessage = (e) => {
console.log('msg:', e.data);
}

websocketHeartbeatJs.onreconnect (function)

websocketHeartbeatJs.onreconnect = (e) => {
console.log('reconnecting...');
}

demo

demo show

npmjs:https://www.npmjs.com/package/websocket-heartbeat-js

github:https://github.com/zimv/websocket-heartbeat-js

websocket-heartbeat-js心跳检测库正式发布的更多相关文章

  1. javascript websocket 心跳检测机制介绍

    ====测试代码: ==index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. webSocket 前端 js 加入 心跳机制 的基本写法

    1前言 websocket 一般 每隔 90 秒无操作则会自动断开  ,需要加入一个心跳机制 来防止 自断 2. 实验过程 (1)设定一个jsp 或html 文件都行 ,加入元素 (2)js 源码 , ...

  3. 转载:轻量级浏览器特性检测库:feature.js

    feature.js是一个很简单.快速和轻量级的浏览器特性检测库,它没有任何依赖,体积压缩最后只有1KB,它可以自动初始化,在你需要知道某个特性是否可用时,直接引入即可.以下中文为个人理解. /*! ...

  4. 【mq】从零开始实现 mq-06-消费者心跳检测 heartbeat

    前景回顾 [mq]从零开始实现 mq-01-生产者.消费者启动 [mq]从零开始实现 mq-02-如何实现生产者调用消费者? [mq]从零开始实现 mq-03-引入 broker 中间人 [mq]从零 ...

  5. WebSocket心跳检测和重连机制

    1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生. websocket连接断开有以下两证情况: 前端断开 在使用websocket过程中,可能会出现网络断 ...

  6. Device.js – 快速检测平台、操作系统和方向信息

    在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...

  7. EF架构~通过EF6的DbCommand拦截器来实现数据库读写分离~再续~添加对各只读服务器的心跳检测

    回到目录 上一讲中基本实现了对数据库的读写分离,而在选择只读数据库上只是随机选择,并没有去检测数据库服务器是否有效,如服务器挂了,SQL服务停了,端口被封了等等,而本讲主要对以上功能进行一个实现,并对 ...

  8. Mina 系列(四)之KeepAliveFilter -- 心跳检测

    Mina 系列(四)之KeepAliveFilter -- 心跳检测 摘要: 心跳协议,对基于CS模式的系统开发来说是一种比较常见与有效的连接检测方式,最近在用MINA框架,原本自己写了一个心跳协议实 ...

  9. 基于MINA实现server端心跳检测(KeepAliveFilter)

    MINA自带了对心跳协议的支持,可以对心跳做出细致的配置,本文在次基础上实现了server端对client端的心跳检测. 在开始之前先简单介绍下keepAlive的机制: 首先,需要搞清楚TCP ke ...

随机推荐

  1. RBAC权限管理系统

    RBAC--基于角色的权限管理系统 优势: 1. 简化了用户和权限的关系 2. 易扩展,易于维护 3. RBAC不用给用户单个分配权限,只用指向对应的角色就会有对应的权限,而且分配权限和收回权限都很方 ...

  2. 测试框架httpclent 1.HttpClient简介及第一个demo

    httpclient就是一个模拟 发送http请求的一个工具. 首先在pom.xml文件里面添加工具类 <dependencies> <dependency> <grou ...

  3. IDEA破解

    1. 官网下载 idea激活 进入 C:\Windows\System32\drivers\etc  编辑host文件  加入0.0.0.0 account.jetbrains.com  2.打开ID ...

  4. Typora使用说明(记录总结)

    目录 区域元素 YAML FONT Matters 菜单 段落 标题 引注 序列 可选序列 代码块 数学块 表格 脚注 水平线 特征元素 链接 超链接 内链接 相关链 URLs 图片 斜体 加粗 删除 ...

  5. 使用InternalsVisibleTo给assembly添加“友元assembly”

    C#的internal关键字可以使标记的方法,字段或者属性等等只能在当前assembly内部使用,那么如果其他的assembly需要使用这个internal的方法的时候怎么办呢?.NET提供了一种类似 ...

  6. JN_0001:在微信朋友圈分享时长大于10s的视频

    1,先在聊天窗口里发送视频. 2,长按视频点击”收藏“. 3,进入微信收藏管理页面,播放视频. 4,点击右上角三点按钮,选择“转存为笔记”. 5,于是在收藏页面中会生成一个新的收藏笔记链接,打开链接再 ...

  7. Html一些特殊字符(Html语法字符)的一种表达方式

      空格 & & < < > > " " &qpos; '

  8. 校园wifi

    我校师生访问本校校园WiFi(SSID为UESTC-WiFi),不受任何影响,用户名和密码均不变,可使用本校帐号加后缀@uestc.edu.cn,登录并免费使用eduroam联盟机构的WiFi(SSI ...

  9. js中escape对应的C#解码函数 UrlDecode

    js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s),使用过程中有以下几点需要注意   js中escape对应的C#解码函数 System.We ...

  10. Codeforces 1101G(线性基)

    题目链接 题意 将序列尽可能分成多段使得任意$x \geq 1$段内的所有元素的异或和大于$0$问最多多少段 思路 首先,如果所有元素异或和等于$0$答案显然为$-1$,否则构造整个序列的线性基,这个 ...