前端连接websoket实时推送

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    
    <style>
        body {
    
    
            padding: 100px;
        }
        button {
    
    
            width: 80px;
            height: 40px;
            margin-right: 100px;
        }
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
</head>

<body class="str">
    <button type="button" onclick="getwebsocket()">开始</button>
    <button type="button" onclick="closeWebSocket()">停止</button>
	
    
    <script>
        var socket; //websocket的实例
        var lockReconnect = false; //避免重复连接
        
        function getwebsocket() {
    
     //新建websocket的函数 页面初始化 断开连接时重新调用
            var wsUrl = 'ws://47.104.21.51:8880/ws/asset';
            socket = new WebSocket(wsUrl);
            socket.onerror = function(event) {
    
    
                //console.log('websocket服务出错了');
                reconnect(wsUrl);
            };
            socket.onclose = function(event) {
    
    
                //console.log('websocket服务关闭了');
                reconnect(wsUrl);
            };
            socket.onopen = function(event) {
    
    
                // heartCheck.reset().start(); //传递信息
            };
            socket.onmessage = function(event) {
    
    
                //如果获取到消息，心跳检测重置
                //拿到任何消息都说明当前连接是正常的
                //console.log('websocket服务获得数据了');
                //接受消息后的UI变化
                doWithMsg(event.data);
                // heartCheck.reset().start();
            };
            //收到消息推送
            function doWithMsg(msg) {
    
    
                console.log(msg);
            }
        }
        
        function closeWebSocket() {
    
    
            socket.close();
        }

        function reconnect(url) {
    
    
            if (lockReconnect) return;
            lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            setTimeout(function() {
    
    
                getwebsocket();
                lockReconnect = false;
            }, 2000);
        }
        // 心跳检测
        var heartCheck = {
    
    
            timeout: 60000, //60秒
            timeoutObj: null,
            serverTimeoutObj: null,
            reset: function() {
    
    
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                return this;
            },
            start: function() {
    
    
                var self = this;
                this.timeoutObj = setTimeout(function() {
    
    
                    //这里发送一个心跳，后端收到后，返回一个心跳消息，
                    //onmessage拿到返回的心跳就说明连接正常
                    socket.send("心跳测试");
                    self.serverTimeoutObj = setTimeout(function() {
    
     //如果超过一定时间还没重置，说明后端主动断开了
                        socket.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                    }, self.timeout)
                }, this.timeout)
            }
        }
        
    </script>
</body>

</html>
前端连接websoket实时推送

猜你喜欢
