websocket-heartbeat-js心跳檢測庫正式釋出

前言：

兩年前寫了一篇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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./node_modules/websocket-heartbeat-js/dist/index.js"></script>
let websocketHeartbeatJs = new window.WebsocketHeartbeatJs({
    url: 'ws://xxxxxxx'
});

websocket-heartbeat-js僅僅是封裝了心跳相關的鉤子函式，websocketHeartbeatJs.ws是原生Websocket例項，如需要使用更多websocket特性，請直接操作websocketHeartbeatJs.ws。

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

 

 

屬性	必填	型別	預設值	描述
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('hello server');

 

前端手動斷開websocket連線，此方法不會觸發重連。 websocketHeartbeatJs.close()

 

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

 

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

 

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

 

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

 

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

地址：https://www.cnblogs.com/1wen/p/9789260.html