webSocket 前端 js 加入 心跳機制 的基本寫法

1前言

websocket 一般 每隔 90 秒無操作則會自動斷開  ，需要加入一個心跳機制 來防止 自斷

 

2. 實驗過程

（1）設定一個jsp 或html 文件都行 ，加入元素

 

（2）js 源碼 ，點擊查看

//避免重復鏈接
var lockReconnect = false;
//路徑
var wsUrl = $("#wsUrl").val();
console.log("路徑" + wsUrl);
//webSocket對象
var ws;
//時間間隔
var tt;

if ("WebSocket" in window) {
    console.log("支持WebSocket")
} else {
    alert("該瀏覽器不支持WebSocket")
}

//創建ws連接
var createWebSocket = function (wsUrl) {
    try {
        //成功
        ws = new WebSocket(wsUrl);
        webSocketInit();//初始化webSocket連接函數
    } catch (e) {
        //失敗
        console.log('catch');
        //重連
        //重連函數
        webSocketReconnect(wsUrl);
    }
};
//初始化方法，成功后執行
var webSocketInit = function () {
    //連接關閉函數
    ws.onclose = function () {
        console.log("連接已關閉...");
        webSocketReconnect(wsUrl)//如果連接關閉則重連
    };
    //連接錯誤函數
    ws.onerror = function () {
        console.log("連接錯誤...");
        webSocketReconnect(wsUrl)//如果連接錯誤則重連
    };
    //連接建立,發送信息
    ws.onopen = function () {
        var message1 = {
            "type": "SUB",
            "service": "業務1-確認第一次發送信息"
        };
        ws.send(JSON.stringify(message1));//webSocket業務訂閱——可以有多個業務
        // var message2 = {
        //     "type": "SUB",
        //     "service": "業務2"
        // };
        // ws.send(JSON.stringify(message2));
        //心跳檢測啟動
        heartCheck.start();//訂閱業務發送之后啟動心跳檢測機制
    };
    //業務訂閱成功后接受服務端推送消息  ，其實是個字符串
    ws.onmessage = function (evt) {
        console.log('接收到消息' + evt.data);
        $("#span").html(evt.data);
        // var DATA=JSON.parse(evt.data);
        // if (DATA.service=="業務1") {
        //     console.log("接收業務1的數據");
        //     //接收業務1的數據，並進行相關邏輯處理
        // }
        // if (DATA.service=="業務2"){
        //     console.log("接收業務1的數據");
        //     //接收業務2的數據，並進行相關邏輯處理
        // }
        //接收一次后台推送的消息，即進行一次心跳檢測重置

        heartCheck.reset();
    };

};


var webSocketReconnect = function (url) {
    console.log("socket 連接斷開，正在嘗試重新建立連接");
    if (lockReconnect) {
        return;
    }
    lockReconnect = true;
    //沒連接上會一直重連，設置延遲，避免請求過多

    //
    //s中清楚setTimeout的定時觸發設置，之所以加個timer，是為了方便第二次賦值給timer。
    // 也就是說直接clearTImeout（timer）則timer就不存在了 再次訪問就是error了。
    // 而timer&&clearTimeout(timer)則將timer 變成undefined
    tt && clearTimeout(tt);
    tt = setTimeout(function () {
       createWebSocket(url);
    }, 4000)
};


//心跳檢測  .所謂的心跳檢測，就是隔一段時間向服務器僅限一次數據訪問，因為長時間不使用會導致ws自動斷開，
// 一般是間隔90秒內無操作會自動斷開，因此，在間隔時間內進行一次數據訪問，以防止ws斷開即可，
//這里選擇30秒，倒計時30秒內無操作則進行一次訪問，有操作則重置計時器
//
//封裝為鍵值對的形式，成為js對象，與json很相似
var heartCheck={
    timeout: 30000,//30秒
    timeoutObj: null,
    reset: function(){//接收成功一次推送，就將心跳檢測的倒計時重置為30秒
        clearTimeout(this.timeoutObj);//重置倒計時
        this.start();
    },
    start: function(){//啟動心跳檢測機制，設置倒計時30秒一次
        this.timeoutObj = setTimeout(function(){
            var message = {
                "type": "t10010",
                "service":"運行心跳業務一次 =="+ new Date()
            };
            // JSON.stringify()的作用是將 JavaScript 對象轉換為 JSON 字符串
            //而JSON.parse()可以將JSON字符串轉為一個對象。
            console.log("心跳一次");
            ws.send(JSON.stringify(message));//啟動心跳
        },this.timeout)
    }
    //onopen連接上，就開始start及時，如果在定時時間范圍內，onmessage獲取到了服務端消息，
    // 就重置reset倒計時，距離上次從后端獲取消息30秒后，執行心跳檢測，看是不是斷了。
};

//開始創建webSocket連接
createWebSocket(wsUrl);
///
function mysend() {
    var text = $("#text").val();
    console.log("text:" + text);
    //向ws發送信息
    ws.send(text);

}

 

 （3）測試截圖

 

 

 

 

3.心得

所謂的心跳檢測，就是隔一段時間向服務器進行一次數據訪問，因為長時間不使用會導致ws自動斷開，
一般是間隔90秒內無操作會自動斷開，因此，在間隔時間內進行一次數據訪問，以防止ws斷開即可，
這里選擇30秒，倒計時30秒內無操作則進行一次訪問，有操作則重置計時器