websocket html5 客户端测试代码

最新推荐文章于 2024-07-26 19:19:43 发布

韩初心

最新推荐文章于 2024-07-26 19:19:43 发布

阅读量3.6k

点赞数

分类专栏： html5 javascript 文章标签： websocket html

本文链接：https://blog.csdn.net/M348915654/article/details/53616837

版权

html5 javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

测试 websocket 客户端的连接、发送消息和断开，生成一个面板用于显示 log，代码功能单一，便于测试。

index.html

<html>
    <head>
        <meta charset="utf-8">
        <title>WebSoket Demo</title>
        <script type="text/JavaScript">
            // tips: WebSocket 调试脚本
            var WebSocket = WebSocket || window.WebSocket || window.MozWebSocket;
            // 验证浏览器是否支持WebSocket协议
            if (!WebSocket) {
                alert("WebSocket not supported by this browser!");
            }
            else {
                var g_ws = null;

                function Display() {
                    // 载入上次记录的数据 //...
                    console.log("websocket 测试");
                }

                var log = function (s) {
                    if (document.readyState !== "complete") {
                        log.buffer.push(s);
                    } else {
                        document.getElementById("contentId").value += (s + "\n");
                    }
                }

                function CreateConnect () {
                    var msg = document.getElementById("wsUrlId");
                    console.log("CreateConnect(), url: " + msg.value);
                    if (g_ws == null) {
                        var wsUrlValue = msg.value;

                        try {
                            g_ws = new WebSocket(wsUrlValue);
                            // 监听消息
                            g_ws.onmessage = function (event) {
                                //valueLabel.innerHTML+ = event.data;
                                log("onmessage(), 接收到服务器消息: " + event.data);
                            };
                            // 打开 WebSocket
                            g_ws.onclose = function (event) {
                                //WebSocket Status:: Socket Closed
                                log("onclose(), Socket 已关闭!");
                                g_ws = null;
                            };
                            // 打开WebSocket
                            g_ws.onopen = function (event) {
                                //WebSocket Status:: Socket Open
                                // 发送一个初始化消息
//                            g_ws.send("Hello, Server!");
                                log("onopen(), Socket 连接成功!");
                            };
                            g_ws.onerror = function (event) {
                                //WebSocket Status:: Error was reported
                                log("onerror(), Socket 发生错误!");
                            };
                        }
                        catch (e) {
                            g_ws = null;
                            log("连接异常, 重置 websocket");
                        }
                    }
                }
                
                function SendMsg() {
                    var msg = document.getElementById("messageId");
                    console.log("SendMsg(), msg: " + msg.value);
                    if (g_ws != null) {
                        //alert(msg.value);
                        log("发送 Socket 消息: " + msg.value);
                        g_ws.send(msg.value);
                    }
                    else {
                        log("Socket 还未创建!, msg: " + msg.value);
                    }
                }

                function CloseConnect () {
                    console.log("CloseConnect()");
                    if (g_ws != null) {
                        g_ws.close();
                    }
                }
            }
        </script>
    </head>

    <body οnlοad="Display()">
        <div id="valueLabel"></div>
        <textarea rows="20" cols="30" id="contentId"></textarea>
        <br/>
        <input name="wsUrl" id="wsUrlId" value="ws://localhost:8082/springmvc/websocket"/>
        <button id="createButton" onClick="javascript:CreateConnect()">Create</button>
        <button id="closeButton" onClick="javascript:CloseConnect()">Close</button>
        <br/>
        <input name="message" id="messageId" value="Hello, Server!"/>
        <button id="sendButton" onClick="javascript:SendMsg()">Send</button>
    </body>
</html>