兩年前寫了一篇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将不會重連。
2.ping & pong
前端發送ping消息，後端收到後，需要立刻傳回pong消息，pong消息可以是任何值，websocket-heartbeat-js并不處理pong消息，而隻是在收到任何消息後，重置心跳，因為收到任何消息就說明連接配接是正常的。
websocket-heartbeat-js僅僅是封裝了心跳相關的鈎子函數，websocketHeartbeatJs.ws是原生Websocket執行個體，如需要使用更多websocket特性，請直接操作websocketHeartbeatJs.ws。
屬性
必填
類型
預設值
描述
url
true
string
none
websocket服務端接口位址
pingTimeout
false
number
15000
每隔15秒發送一次心跳，如果收到任何後端消息定時器将會重置
pongTimeout
10000
ping消息發送之後，10秒内沒收到後端消息便會認為連接配接斷開
reconnectTimeout
2000
嘗試重連的間隔時間
pingMsg
"heartbeat"
ping消息值
發送消息給後端
前端手動斷開websocket連接配接，此方法不會觸發重連。 websocketHeartbeatJs.close()
demo show
npmjs：https://www.npmjs.com/package/websocket-heartbeat-js
github：https://github.com/zimv/websocket-heartbeat-js
有沒有人打賞？沒有的話，那我晚點再來問問。
關注大詩人公衆号，第一時間擷取最新文章。
如果你有購買鋼琴的打算，可以從這裡了解到在售資訊，價格實惠品質保障。
---轉發請标明，并添加原文連結---