前言:
两年前写了一篇 websocket 心跳的博客 -- 初探和实现 websocket 心跳重连 http://www.cnblogs.com/1wen/p/5808276.html . 阅读量一直比较大, 加上最近考虑写一个自己的 NPM 包, 因此就完成了一个 websocket 心跳的检测库. 在这里先感谢几个提供帮助的大佬朋友们, 小弟受益匪浅.
介绍
websocket-heartbeat-JS 基于浏览器 JS 原生 websocket 封装, 主要目的是保障客户端 websocket 与服务端连接状态. 该程序有心跳检测及自动重连机制, 当网络断开或者后端服务问题造成客户端 websocket 断开, 程序会自动尝试重新连接直到再次连接成功.
原理
在使用原生 websocket 的时候, 如果设备网络断开, 不会触发任何函数, 前端程序无法得知当前连接已经断开. 这个时候如果调用 websocket.send 方法, 浏览器就会发现消息发不出去, 便会立刻或者一定短时间后 (不同浏览器或者浏览器版本可能表现不同) 触发 onclose 函数.
后端 websocket 服务也可能出现异常, 连接断开后前端也并没有收到通知, 因此需要前端定时发送心跳消息 ping, 后端收到 ping 类型的消息, 立马返回 pong 消息, 告知前端连接正常. 如果一定时间没收到 pong 消息, 就说明连接不正常, 前端便会执行重连.
为了解决以上两个问题, 以前端作为主动方, 定时发送 ping 消息, 用于检测网络和前后端连接问题. 一旦发现异常, 前端持续执行重连逻辑, 直到重连成功.
约定
- websocketHeartbeatJs.onmessage = (e) => {
- if(e.data == 'close') websocketHeartbeatJs.close();
- }
- 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 Windows.WebsocketHeartbeatJs({
- url: 'ws://xxxxxxx'
- });
- API
- websocketHeartbeatJs.ws (WebSocket)
- const options = {
- url: 'ws://xxxx',
- pingTimeout: 15000,
- pongTimeout: 10000,
- reconnectTimeout: 2000,
- pingMsg: "heartbeat"
- }
- let websocketHeartbeatJs = new WebsocketHeartbeatJs(options);
- 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 https://github.com/zimv/websocket-heartbeat-js
来源: https://juejin.im/post/5bc3eb426fb9a05cd31ee2ae