WebSocketの心拍数再接続メカニズム

WebSocket心拍数および再結合メカニズム
Websocketを使用する過程で、ネットワークが切断される場合がありますが、ネットワークが切断されるとサーバ側はoncloseのイベントをトリガーしません.これにより、サーバはクライアントに余分なリンクを送信し続け、これらのデータは失われます.したがって、クライアントとサービス側が正常なリンク状態にあるかどうかを検出するメカニズムが必要です.だからwebsocketのドキドキがありました.まだドキドキして、まだ生きていることを説明して、ドキドキしていない説明はもう切れました.
1.なぜハートビートバッグと呼ぶのでしょうか.ハートビートのように一定の時間ごとに送って、私がまだ生きていることをサーバーに伝えます.2.ハートビートメカニズムハートビートメカニズムは、一定時間ごとにサーバにパケットを送信し、サーバ自身が生きていることを伝えるとともに、クライアントはサーバ側が生きているかどうかを確認し、生きているとクライアントにパケットを返信してサーバ側も生きていることを確認します.そうしないと、ネットワークが接続を切断している可能性があります.再接続が必要です.心拍数メカニズムWebsocketの前後のインタラクションをどのように実現するかはまずこの文章を実現し理解した後で簡単で、js部分を少し書き直すだけです.

$(function () {
    createWebSocket();
});

//      
var lockReconnect = false;
var wsUrl = "ws://localhost:8888/websocket/name";
var websocket = null;
var tt = null;
function createWebSocket() {
    try {
        websocket = new WebSocket(wsUrl);
        init();
    } catch(e) {
        console.log('catch');
        reconnect(wsUrl);
    }
}

function init() {

    //           
    websocket.onerror = function(){
        console.log("socket    ");
        //  
        reconnect(wsUrl);
    };

    //           
    websocket.onopen = function(event){
        console.log("socket     ");
        //      
        heartCheck.start();
    };

    //          
    websocket.onmessage = function(event){
        console.log("           ，    ...");
        //      
        heartCheck.start();
        setMessageInnerHTML(event.data);
    };

    //         
    websocket.onclose = function(){
        console.log("socket     ");
        //  
        reconnect(wsUrl);
    };

    //        ，      ，     websocket  ，             ，server     。
    window.onbeforeunload = function(){
        websocket.close();
    };
}


//    
function reconnect(url) {
    if(lockReconnect) {
        return;
    };
    lockReconnect = true;
    //         ，          
    tt && clearTimeout(tt);
    tt = setTimeout(function () {
        createWebSocket(url);
        lockReconnect = false;
    }, 20000);
}


//    
var heartCheck = {
    //               
    timeout: 10000,
    timeoutObj: null,
    serverTimeoutObj: null,
    start: function(){
        console.log('      ');
        var self = this;
        this.timeoutObj && clearTimeout(this.timeoutObj);
        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
        this.timeoutObj = setTimeout(function(){
            //        ，     ，        ，
            console.log('    ，         ...');
            //         ，    ， init()  onmessage    ，        ，   
            websocket.send("666");
            self.serverTimeoutObj = setTimeout(function() {
                console.log("    ，     ....");
                console.log("  websocket   :"+websocket);
                websocket.close();
                // createWebSocket();
            }, self.timeout);

        }, this.timeout)
    }
};


//    
function closeWebSocket(){
    websocket.close();
}

//    
function send(){
    var message = document.getElementById('text').value;
    websocket.send(message);
}

4.実装の効果心拍数の再接続を実現した後、ネットワークを切断してもプログラムが停止しても、フロントエンドは一定時間おきにバックエンドに要求を開始し、プログラムが再オープンまたは再ネットワーク化されさえすれば、プロジェクトは再実行されます.
プロジェクト学習:WebSocketの心拍数と再接続メカニズムを理解する