• Chrome_查看 webSocket 连接信息


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

    复制代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>WebSocket</title>
     6 </head>
     7 <body>
     8     <h1>Echo Test</h1>
     9     <input type="text" id="sendTxt">
    10     <button id="sendBtn">发送</button>
    11     <div id="recv"></div>
    12     <script type="text/javascript">
    13         var websocket = new WebSocket("ws://echo.websocket.org/");
    14         websocket.onopen = function(){
    15             console.log("websocket open");
    16             document.getElementById("recv").innerHTML = "Connected";
    17         }
    18         websocket.inclose = function(){
    19             console.log('websocket close');
    20         }
    21         websocket.onmessage = function(e){
    22             console.log(e.data);
    23             document.getElementById("recv").innerHTML = e.data;
    24         }
    25         document.getElementById("sendBtn").onclick = function(){
    26             var txt = document.getElementById("sendTxt").value;
    27             websocket.send(txt);
    28         }
    29 
    30     </script>
    31 </body>
    32 </html>
    复制代码

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

    (1)点击Network,选中ws栏,注意选中Filter。

    (2)刷新页面,可以看到一个ws连接。

    (3)点击。

    (4)也可以查看输入和发送的信息。

  • 相关阅读:
    一些常用的接口地址
    1-项目启动
    事件处理优化
    如何javascript获取css中的样式
    mysql编程--创建函数出错的解决方案
    mysql编程---函数
    mysql---数据控制语言(用户及其权限管理)
    php与mysql的常规使用
    php数组的使用
    php函数的使用
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/15218992.html
Copyright © 2020-2023  润新知