Chrome 浏览器中查看 webSocket 连接信息

最新推荐文章于 2024-06-26 16:24:12 发布

一只小废物变小怪物

最新推荐文章于 2024-06-26 16:24:12 发布

阅读量2.7k

点赞数 1

原文链接：https://www.cnblogs.com/zhuyeshen/p/12007217.html

版权

1.以下代码实现一个webSocket连接，在文本输入框中输入内容，点击发送，通过服务器，返回相同的内容显示在下方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
    <h1>Echo Test</h1>
    <input type="text" id="sendTxt">
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        var websocket = new WebSocket("ws://echo.websocket.org/");
        websocket.onopen = function(){
            console.log("websocket open");
            document.getElementById("recv").innerHTML = "Connected";
        }
        websocket.inclose = function(){
            console.log('websocket close');
        }
        websocket.onmessage = function(e){
            console.log(e.data);
            document.getElementById("recv").innerHTML = e.data;
        }
        document.getElementById("sendBtn").onclick = function(){
            var txt = document.getElementById("sendTxt").value;
            websocket.send(txt);
        }

    </script>
</body>
</html>

下面通过Chrom浏览器开发者工具查看相关信息：

（1）点击Network，选中ws栏，注意选中Filter。