Primary exploration and realization of websocket heartbeat re-connection

The reason why the heartbeat is heavy

During the use of the WebSocket process, the network disconnection may occur, such as bad signal, or the network temporarily shut down, this time the WebSocket connection has been disconnected,

The browser does not execute the WebSocket onclose method, and we do not know whether to disconnect or not to Re-connect.

If the WebSocket data is currently sent to the backend, once the request times out, the OnClose executes, and the Bonded re-connected operation can be Performed.

So the websocket heartbeat is a heavy connection.

How to Achieve

When the WebSocket is instantiated, we bind some events:

varWS =NewWebSocket (url); ws.onclose=function () {    //something};ws.onerror=function () {    //something}; Ws.onopen=function () {   //something};ws.onmessage=function(event) {//something}

If you want the WebSocket connection to persist, we will bind the Reconnect method in close or Error.

function () {    Reconnect ();  function  () {    Reconnect (); };    

In this case, when the connection is normally lost, the OnClose method is triggered and we can perform the Reconnection.

so, for the case of the Broken network heartbeat re-connected, how to achieve it.

A simple implementation:

varHeartcheck ={timeout:60000,//60msTimeoutobj:NULL, Reset:function() {cleartimeout ( this. timeoutobj);
This.start ();}, start:function(){         this. Timeoutobj = SetTimeout (function() {ws.send ("HeartBeat", "beat"); },  this. timeout)}}Ws.onopen=function() {heartcheck.start ();};

Ws.onmessage = function (event) {    heartcheck.reset ();}

As the code above, the reset and start methods of Heartcheck are mainly used to control the timing of the Heartbeat.

When OnOpen is connected, we begin the start time, and if the onmessage gets the message from the server within the timed timeframe, we reset the countdown,

So in the distance from the last time from the server to obtain the message, idle 60 seconds before we will heartbeat detection, the detection time can be set according to their own circumstances.

When Heartbeat detects send execution, if the current websocket is in a disconnected state, after the send timeout, the OnClose method is executed and the re-connection is Executed.

As a result, our heartbeat detection is Realized.

later, I wanted to test the WebSocket time-out and found some new problems.

1. In chrome, OnClose executes if Heartbeat detection, which is the WebSocket instance, does not send to the other receive end within 15 SECONDS. Then the timeout time is 15 seconds.

2. I opened Firefox again, Firefox after 7 seconds off the network, directly execute the ONCLOSE. This means that you can automatically onclose without heartbeat detection in firefox.

3. The same code, the Reconnect method was executed once in chrome, and Firefox was executed two Times. Of course we have bound reconnect () in several places (code logic and WebSocket events),

So on the safe side, we're still adding a lock to the reconnect () method to ensure that only one time is executed

At present, there are different browsers, there are different mechanisms, regardless of whether the browser WebSocket itself will not be in the case of onclose, coupled with a heartbeat, has been able to ensure that the normal OnClose trigger.

Primary exploration and realization of websocket heartbeat re-connection