webSocket 前端如何实现

最新推荐文章于 2024-07-31 12:06:54 发布

chuangshaoxia5899

最新推荐文章于 2024-07-31 12:06:54 发布

阅读量372

点赞数

文章标签：网络前端 javascript ViewUI

原文链接：https://my.oschina.net/wsxiao/blog/3072055

版权

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>

    <script type="text/javascript">
        function WebSocketTest()
        {
            if ("WebSocket" in window)
            {
                alert("您的浏览器支持 WebSocket!");

                // 打开一个 web socket
                var ws = new WebSocket("ws://bdi-mcms.gxcards.com/gx/websocket");
                console.log(ws)

                // ws.onopen = function()
                // {
                //     // Web Socket 已连接上，使用 send() 方法发送数据
                //     ws.send("通爷真帅");
                //     console.log("数据发送中...");
                // };

                ws.onmessage = function (evt)
                {
                    heartCheck.reset().start();
                    var received_msg = evt.data;
                    console.log("数据已接收: " + received_msg);
                };

                ws.onclose = function()
                {
                    // 关闭 websocket
                    alert("连接已关闭...");
                };

                //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = function () {
                    ws.close();
                }

                var heartCheck = {
                    timeout: 59000,        //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("我又来了~");
                            self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                                ws.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                            }, self.timeout)
                        }, this.timeout)
                    }
                }

            }
            else
            {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }


    </script>

</head>
<body>

<div id="sse">
    <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>

</body>
</html>

转载于:https://my.oschina.net/wsxiao/blog/3072055