HTML 5のWebSocket接続は、ネットが切れた場合にドキドキ

WebSocketは、クライアントとサーバ間のデータ交換をより簡単にし、サービス側がクライアントにデータを積極的にプッシュできるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、両者の間に永続的な接続を直接作成し、双方向のデータ転送を行うことができます.jsコードは以下の通りです.

//websocket  
var websocket = null;
function websocketMsg() {
    //           WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + baseurl.substring(7) + "equsocket");  //   url
    } else {
        alert('Not support websocket')
    }
    //           
    websocket.onerror = function () {
        //websocketMsg(); 
        reconnect();
        setMessageInnerHTML("error");
    };
    //           
    websocket.onopen = function (event) {
        websocket.send(JSON.stringify({storeId:$("#door-room").find("option:selected").val()}));//    
        setMessageInnerHTML("open");
    }
    //          
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }
    //         
    websocket.onclose = function () {
        setMessageInnerHTML("close");
        reconnect(); //    (    websocket     ，     )
    }
    //        ，      ，     websocket  ，             ，server     。
    window.onbeforeunload = function () {
        websocket.close();
    }
}

//         
function setMessageInnerHTML(innerHTML) {
        var msgjson = JSON.parse(innerHTML);
        msgjson=JSON.parse(msgjson);
        console.log(msgjson);
 }
        

ネットワークが切断する場合の心拍再接続には、タイミングよくメッセージを送信してwebsocketをトリガするだけである.sendメソッドでは、ネットワークが切断されるとブラウザがoncloseをトリガーします.

フロントエンドハートビート再接続(フロントエンドはハートビートを送信し、バックエンドはハートビートを返す必要がある、すなわちping pongのプロセスには2回のデータ伝達がある)

.

//            
var heartCheck = {
    timeout: 20000,//20ms
    timeoutObj: null,
    reset: function( ){
        clearTimeout(this.timeoutObj);
　　this.start();
    },
    start: function( ){
      this.timeoutObj = setTimeout(function(){
            websocket.send("HeartBeat");  //          
        }, this.timeout)
    }
};

 heartCheck.start();
 heartCheck.reset();
 //heartCheck   reset start             。      ，       。

2、バックエンドがドキドキする(バックエンドがドキドキするとpingを送るだけで、フロントエンドは応答する必要はありません.フロントエンドはバックエンドと心拍間隔を約束する必要があります.例えば、バックエンドに10秒を設定して心拍を送信すると、フロントエンドは前回心拍が12秒を超えても次の心拍を受信していないと再接続するなどの安全値を設定する必要があります.)

var heartCheck = {
    timeout: 20000,//20ms
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
　　    this.start();
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            websocket.send("HeartBeat");
            self.serverTimeoutObj = setTimeout(function(){
                websocket.close();//  onclose   reconnect，    websocket.close()   .      reconnect    onclose      
            }, self.timeout)
        }, this.timeout)
    },
}