微信圖片_20210907104149.jpg

    var lockReconnect = false;//避免重復(fù)連接
    var wsUrl = "ws://localhost:8080/websocket/111";        // websocket鏈接
    var ws;
    if ("WebSocket" in window) {
        function createWebSocket(){
            try {
                ws = new WebSocket(wsUrl);
                websocketInit();
            } catch (e) {
                console.log('catch');
                websocketReconnect(wsUrl);
            }
        }

        createWebSocket();          // 創(chuàng)建websocket

        function websocketInit () {
            // 建立 web socket 連接成功觸發(fā)事件
            ws.onopen = function (evt) {
                onOpen(evt);
            };
            // 斷開 web socket 連接成功觸發(fā)事件
            ws.onclose = function (evt) {
                websocketReconnect(wsUrl);
                onClose(evt);
            };
            // 接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)事件
            ws.onmessage = function (evt) {
                onMessage(evt);
            };
            // 通信發(fā)生錯(cuò)誤時(shí)觸發(fā)
            ws.onerror = function (evt) {
                websocketReconnect(wsUrl);
                onError(evt);
            };
        };

        function onOpen(evt) {
            console.log("建立連接");
            //心跳檢測(cè)重置
            heartCheck.start();
        }

        function onClose(evt) {
            console.log("連接已關(guān)閉...");
        }

       function onMessage(evt) {
            console.log('接收消息: ' + evt.data);
            var data = JSON.parse(evt.data);
            console.log(data);
            console.log(data.heart);
            if (data.hasOwnProperty("heart")) {// 存在key為heart
                    if (data.heart=="live"){// 心跳正常 再次執(zhí)行
                        heartCheck.start();
                        console.log('心跳正常 再次執(zhí)行心跳檢測(cè)方法！');
                    }
                    return;
            }
        }

        function onError(evt) {
            console.log('通信錯(cuò)誤：' + evt.data);
        }


        function websocketReconnect(url) {
            if (lockReconnect) {       // 是否已經(jīng)執(zhí)行重連
                return;
            };
            lockReconnect = true;
            //沒連接上會(huì)一直重連，設(shè)置延遲避免請(qǐng)求過多
            tt && clearTimeout(tt);
            var tt = setTimeout(function () {
                createWebSocket(url);
                lockReconnect = false;
            }, 5000);
        }

        //心跳檢測(cè)
        var heartCheck = {
            timeout: 30000,
            timeoutObj: null,
            serverTimeoutObj: null,
            start: function () {
                console.log('執(zhí)行心跳檢測(cè)');
                var self = this;
                this.timeoutObj && clearTimeout(this.timeoutObj);
                this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                this.timeoutObj = setTimeout(function () {
                    //發(fā)送測(cè)試信息，后端收到后，返回一個(gè)消息，
                    ws.send("heart");
                    self.serverTimeoutObj = setTimeout(function () {
                        ws.close();
                    }, self.timeout);
                }, this.timeout)
            }
        }


    }else{
        alert("您的瀏覽器不支持websocket 請(qǐng)更換瀏覽器后重試！");
    }