js ws连接

    let uid = 1
    $(function () {
        var lockReconnect = false;//避免重复连接
        window.ws = null; //WebSocket的引用
        var wsUrl = `host:9508?type=admin&uid=` + uid;

        layui.use(['layer'], function () {
            var layer = layui.layer;

            function createWebSocket(url) {
                // loading
                layer.msg('正在连接服务器...', {
                    icon: 16
                    , shade: 0.01
                    , time: 0
                });

                try {
                    if ('WebSocket' in window) {
                        window.ws = new WebSocket("ws://" + url);
                    } else {
                        console.log("您的浏览器不支持WebSocket");
                        layer.error("您的浏览器不支持WebSocket")
                    }
                    initEventHandle();
                } catch (e) {
                    reconnect(wsUrl);
                }
            }

            function reconnect() {
                if (lockReconnect) return;
                lockReconnect = true;
                setTimeout(function () {
                    createWebSocket(wsUrl);
                    console.log("正在重连，当前时间" + new Date())
                    lockReconnect = false;
                }, 5000); //这里设置重连间隔(ms)
            }

            function initEventHandle() {
                // 连接成功建立后响应
                window.ws.onopen = function () {
                    console.log("成功连接到" + wsUrl);
                    layer.closeAll();
                    //心跳检测重置
                    heartCheck.reset().start();
                }
                // 收到服务器消息后响应
                window.ws.onmessage = function (e) {
                    //如果获取到消息，心跳检测重置
                    //拿到任何消息都说明当前连接是正常的
                    heartCheck.reset().start();
                    var msg = JSON.parse(e.data);

                    console.log(msg)
                    console.log(window.vue)

                    if (msg.type == "heartBeat") {
                        //忽略心跳的信息
                    }

                }

                // 连接关闭后响应
                window.ws.onclose = function () {
                    layer.closeAll();
                    console.log("关闭连接");
                    // reconnect(wsUrl);//重连
                    layer.confirm('服务器关闭，是否重新连接？', {
                        btn: ['重新连接', '取消'] //按钮
                    }, function () {
                        console.log('重练')
                        reconnect(wsUrl);
                        layer.closeAll();
                    }, function () {
                        // layer.msg('已取消');
                    });
                }
                window.ws.onerror = function () {
                    layer.closeAll();
                    // reconnect(wsUrl);//重连
                    // 弹出选择是否重新连接
                    layer.confirm('服务器关闭，是否重新连接？', {
                        btn: ['重新连接', '取消'] //按钮
                    }, function () {
                        console.log('重练')
                        reconnect(wsUrl);
                        layer.closeAll();
                    }, function () {
                        // layer.msg('已取消');
                    });
                };
            }

            //心跳检测
            var heartCheck = {
                timeout: 15000,//毫秒
                timeoutObj: null,
                serverTimeoutObj: null,
                reset: function () {
                    clearTimeout(this.timeoutObj);
                    clearTimeout(this.serverTimeoutObj);
                    return this;
                },
                start: function () {
                    var self = this;
                    this.timeoutObj = setTimeout(function () {
                        window.ws.send(JSON.stringify({
                            'type': 'HeartBeat',
                            'id': uid,
                            'msg': 'HeartBeat'
                        }));
                        console.log("HeartBeat");
                        //如果超过一定时间还没重置，说明后端主动断开了
                        self.serverTimeoutObj = setTimeout(function () {
                            window.ws.close();
                        }, self.timeout)
                    }, this.timeout)
                }
            }
            // 强制退出
            window.onunload = function () {
                window.ws.close();
            }
            createWebSocket(wsUrl);
        })
    });