前言：

兩年前寫了一篇websocket心跳的部落格——初探和實現websocket心跳重連。 閱讀量一直比較大，加上最近考慮寫一個自己的npm包，因此就完成了一個websocket心跳的檢測庫。在這裡先感謝幾個提供幫助的大佬朋友們，小弟受益匪淺。

介紹

websocket-heartbeat-js基於瀏覽器js原生websocket封裝，主要目的是保障客戶端websocket與服務端連線狀態。該程式有心跳檢測及自動重連機制，當網路斷開或者後端服務問題造成客戶端websocket斷開，程式會自動嘗試重新連線直到再次連線成功。

原理

在使用原生websocket的時候，如果裝置網路斷開，不會觸發任何函式，前端程式無法得知當前連線已經斷開。這個時候如果呼叫websocket.send方法，瀏覽器就會發現訊息發不出去，便會立刻或者一定短時間後（不同瀏覽器或者瀏覽器版本可能表現不同）觸發onclose函式。

後端websocket服務也可能出現異常，連線斷開後前端也並沒有收到通知，因此需要前端定時傳送心跳訊息ping，後端收到ping型別的訊息，立馬返回pong訊息，告知前端連線正常。如果一定時間沒收到pong訊息，就說明連線不正常，前端便會執行重連。

為了解決以上兩個問題，以前端作為主動方，定時傳送ping訊息，用於檢測網路和前後端連線問題。一旦發現異常，前端持續執行重連邏輯，直到重連成功。

約定

如果需要斷開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();
}
複製程式碼

前端傳送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)

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