javascript websocket 心跳檢測機制介紹

時間 2019-12-11

標籤 javascript websocket 心跳檢測機制介紹欄目 JavaScript 简体版

原文原文鏈接

====測試代碼：javascript

==index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        abc
    </div>
</body>
<script type="text/javascript" src="js/websocket.js"></script>
<script src="js/client.js"></script>
</html>

==websocket.js前端

var lockReconnect = false; //避免ws重複鏈接
var ws = null; // 判斷當前瀏覽器是否支持WebSocket
var wsUrl = null;
var config = {};



function socketLink(set) {
    config = set;
    wsUrl = config.url;
    createWebSocket(wsUrl); //鏈接ws
}

function createWebSocket(url) {
    try {
        if ('WebSocket' in window) {
            ws = new WebSocket(url, 'echo-protocol');
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket(url, 'echo-protocol');
        } else {
            alert("您的瀏覽器不支持websocket")
        }
        initEventHandle();
    } catch (e) {
        reconnect(url);
        console.log(e);
    }
}

function initEventHandle() {
    ws.onclose = function() {
        reconnect(wsUrl);
        console.log("llws鏈接關閉!" + new Date().toUTCString());
    };
    ws.onerror = function() {
        reconnect(wsUrl);
        console.log("llws鏈接錯誤!");
    };
    ws.onopen = function() {
        heartCheck.reset().start(); //心跳檢測重置
        console.log("llws鏈接成功!" + new Date().toUTCString());
        config.open(ws)
    };
    ws.onmessage = function(event) { //若是獲取到消息，心跳檢測重置
        heartCheck.reset().start(); //拿到任何消息都說明當前鏈接是正常的
        config.msg(event.data,ws)
    };
}
// 監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket鏈接，防止鏈接還沒斷開就關閉窗口，server端會拋異常。
window.onbeforeunload = function() {
    ws.close();
}

function reconnect(url) {
    if (lockReconnect) return;
    lockReconnect = true;
    setTimeout(function() { //沒鏈接上會一直重連，設置延遲避免請求過多
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}

//心跳檢測
var heartCheck = {
    timeout: 10000, //9分鐘發一次心跳
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function() {
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function() {
        var self = this;
        this.timeoutObj = setTimeout(function() {
            //這裏發送一個心跳，後端收到後，返回一個心跳消息，
            //onmessage拿到返回的心跳就說明鏈接正常
            ws.send("ping");
            console.log("ping!")
            self.serverTimeoutObj = setTimeout(function() { //若是超過必定時間還沒重置，說明後端主動斷開了
                console.log("try=close")
                ws.close(); //這裏爲何要在send檢測消息後，倒計時執行這個代碼呢，由於這個代碼的目的時爲了觸發onclose方法，這樣才能實現onclose裏面的重連方法
　　　　　　　　　　//因此這個代碼也很重要，沒有這個方法，有些時候發了定時檢測消息給後端，後端超時（咱們本身設定的時間）後，不會自動觸發onclose方法。咱們只有執行ws.close()代碼，讓ws觸發onclose方法
 　　　　　　　　　　//的執行。若是沒有這個代碼，鏈接沒有斷線的狀況下然後端沒有正常檢測響應，那麼瀏覽器時不會自動超時關閉的（好比谷歌瀏覽器）,谷歌瀏覽器會自動觸發onclose
　　　　　　　　　　//是在斷網的狀況下，在沒有斷線的狀況下，也就是後端響應不正常的狀況下，瀏覽器不會自動觸發onclose，因此須要咱們本身設定超時自動觸發onclose，這也是這個代碼的
　　　　　　　　　　//的做用。

            }, self.timeout)
        }, this.timeout)
    }
}

心跳檢測的目的時什麼呢？java

一個是爲了定時發送消息，使鏈接不超時自動斷線，可能後端設了超時時間就會自動斷線，因此須要定時發送消息給後端，讓後端服務器知道鏈接還在通消息不能斷。node

二來是爲了檢測在正常還鏈接着的狀況下，判斷後端是否正常，若是咱們發了一個定時檢測給後端，後端按照約定要下發一個檢測消息給前端，這樣纔是正常的。web

但是若是後端沒有正常下發呢，咱們就要設定一下超時要重連了，咱們把重連寫在了onclose裏面，當時正常鏈接的狀況下，超時未能響應檢測消息的狀況下，瀏覽器不會自動斷掉觸發onclose，因此須要咱們手動觸發，也就是在超時裏寫一個ws.close()讓ws關閉觸發onclose方法，實現重連。後端

==瀏覽器會觸發onclose的狀況是斷網斷線的狀況下，當時正常鏈接還未斷線，瀏覽器時不會自動觸發onclose的，因此就有超時手動觸發onclose的必要。瀏覽器

self.serverTimeoutObj = setTimeout(function() { //若是超過必定時間還沒重置，說明後端主動斷開了
                console.log("try=close")
                ws.close(); //這裏爲何要在send檢測消息後，倒計時執行這個代碼呢，由於這個代碼的目的時爲了觸發onclose方法，這樣才能實現onclose裏面的重連方法
　　　　　　　　　　//因此這個代碼也很重要，沒有這個方法，有些時候發了定時檢測消息給後端，後端超時（咱們本身設定的時間）後，不會自動觸發onclose方法。咱們只有執行ws.close()代碼，讓ws觸發onclose方法
 　　　　　　　　　　//的執行。若是沒有這個代碼，鏈接沒有斷線的狀況下然後端沒有正常檢測響應，那麼瀏覽器時不會自動超時關閉的（好比谷歌瀏覽器）,谷歌瀏覽器會自動觸發onclose
　　　　　　　　　　//是在斷網的狀況下，在沒有斷線的狀況下，也就是後端響應不正常的狀況下，瀏覽器不會自動觸發onclose，因此須要咱們本身設定超時自動觸發onclose，這也是這個代碼的
　　　　　　　　　　//的做用。

            }, self.timeout)

ws.onopen = function() {
        heartCheck.reset().start(); //心跳檢測重置   在open的時候觸發心跳檢測
        console.log("llws鏈接成功!" + new Date().toUTCString());
        config.open(ws)
    };
    ws.onmessage = function(event) { //若是獲取到消息，心跳檢測重置
        heartCheck.reset().start(); //拿到任何消息都說明當前鏈接是正常的  //若是後端有下發消息，那麼就會重置初始化心跳檢測，除非超時沒下發，那麼就會觸發onclose
　　　　　　　//而後觸發重連

        config.msg(event.data,ws)
    };

==client.js服務器

var number=0;
var config = {
    url: 'ws://localhost:8080/',
    open: (ws) => {
        function sendNumber() {
            if (ws.readyState === ws.OPEN) {
                number = number+1;
                ws.send(number.toString());
                setTimeout(sendNumber, 1000);
            }
        }
        sendNumber()
    },
    msg: (data) => {
        console.log(data, "msg")
    }
}
socketLink(config)

==node 後端測試代碼：websocket

#!/usr/bin/env node

var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});

wsServer = new WebSocketServer({
    httpServer: server,
    // You should not use autoAcceptConnections for production
    // applications, as it defeats all standard cross-origin protection
    // facilities built into the protocol and the browser.  You should
    // *always* verify the connection's origin and decide whether or not
    // to accept it.
    autoAcceptConnections: false
});

function originIsAllowed(origin) {
    console.log(origin,"origin")
    // put logic here to detect whether the specified origin is allowed.
    return true;
}

wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
        // Make sure we only accept requests from an allowed origin
        request.reject();
        console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
        return;
    }

    var connection = request.accept('echo-protocol', request.origin);
    console.log((new Date()) + ' Connection accepted.');
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            //connection.sendUTF(message.utf8Data);  //註釋掉是爲了測試前端在沒後端響應卻鏈接着的狀況下，是什麼反應。
        } else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
    });
});

1. websocket 心跳重連（通信檢測）
2. Netty 中的心跳檢測機制
3. keepalived的配置(心跳檢測機制)
4. Netty的心跳檢測機制
5. mina 心跳機制的介紹
6. WebSocket之心跳重連機制
7. 【筆記】vue中websocket心跳機制
8. mysql 心跳檢測
9. Nginx心跳檢測
10. Netty心跳檢測
更多相關文章...
• 網站主機介紹 - 網站主機教程
• JavaScript 指南 - 網站建設指南
• 漫談MySQL的鎖機制
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。