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。

（2）刷新页面，可以看到一个ws连接。

（3）点击。

（4）也可以查看输入和发送的信息。

Chrome_查看 webSocket 连接信息的更多相关文章

  1. 【web】Chrome 浏览器中查看 webSocket 连接信息

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

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

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

  3. 查看tcp连接信息socket几个常用的命令

    查看tcp连接几个常用的命令 1 ss ss 列出所有的连接,包括tcp连接.udp连接.unix socket.raw socket ss -t 列出所有tcp连接 ss -tl 列出所有处于监听状 ...

  4. 查看MySQL 连接信息--连接空闲时间及正在执行的SQL

    MySQL 客户端与MySQL server建立连接后,就可以执行SQL语句了. 如何查看一个连接上是否正在执行SQL语句,或者连接是否处于空闲呢? 下面我们做下测试. 1.查看连接的空闲时间 首先看 ...

  5. nginx查看进程连接信息

    linux 中查看当前请求连接的进程统计信息 root@VM-24-181-ubuntu:/# netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) ...

  6. PL/SQL 如何查看当前连接信息以及SQL PLUS如何指定IP地址

    1.通过PL/SQL 想连接别的数据库可以通过在服务名前面加上IP和左斜线来实现: 2.有时我们的IP和左斜线不用输也能连别的数据库,是因为在一个文件里配置好了.这个文件在哪里? 在这个路径下的 NE ...

  7. ORACLE查看当前连接用户的权限信息或者角色信息

    关于当前用户的相关信息,可以通过如下语句找到: SQL> select * from all_objects where object_name like 'SESSION%'; OWNER O ...

  8. cdnbest如何查看节点和站点的流量，负载和连接信息

    1. 通过查看top信息,查看该区域下所有节点和有访问量的站点的负载情况 点节点列表==>top图标 2. 查看单台节点的负载和连接信息 点节点列表==>管理 点击下图中三个红框可以查看单 ...

  9. windows网络和共享中心“查看基本网络信息并设置连接”为“未知”的解决方案

    存在问题“查看基本网络信息并设置连接”为“未知”.如图所示: 解决步骤 运行services.msc 启动Network List Service 若无法启动,打开其属性,选择“登录”选项卡,将启动类 ...

随机推荐

  1. Pandas系列（二）- DataFrame数据框

    一.初识DataFrame dataFrame 是一个带有索引的二维数据结构,每列可以有自己的名字,并且可以有不同的数据类型.你可以把它想象成一个 excel 表格或者数据库中的一张表DataFram ...

  2. Breastcancer社区评论下载

    首页 某个社区 某社区的一个话题 目标:获取这个网站所有话题的所有评论相关信息 python实现 # -*- coding: utf-8 -*- """ @Datetim ...

  3. [物理学与PDEs]第4章第2节 反应流体力学方程组 2.3 混合气体状态方程

    1.  记号与假设 (1)  已燃气体的化学能为 $0$. (2)  单位质量的未燃气体的化学能为 $g_0>0$. 2.  对多方气体 (理想气体当 $T$ 不高时可近似认为), $$\bex ...

  4. DUMP4 企业级电商项目 —— 对接支付宝扫码支付

    延展 <谈谈微信支付曝出的漏洞> [联调 DEMO下载地址]https://docs.open.alipay.com/194/105201/ [内置 一份 说明文档可做参考] [impor ...

  5. babel

    一款可以将 ES6 代码转换为 ES5 代码的转译器. 官网:http://babeljs.io/ 中文:https://www.babeljs.cn/

  6. HBSX2019 游记

    Day -4 训练戳SX2019 3月训练 ZJOI2019 Day1几天前就考了 T1真考了麻将QwQ 九条可怜的毒瘤真的是业界良心 今天中午才起,要开始调整生物钟了 9012HBOIers群里讨论 ...

  7. formData 对象 与 Content-Type 类型

    FormData FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如 ...

  8. 【原创】大叔经验分享（22）securecrt连接自动断开

    securecrt一段时间没有操作连接就会自动断开(xshell就没有这个问题),提示信息为:信号灯超时时间已到,解决方法为: Options -- Session Options -- Termin ...

  9. 两个c语言结构体复制的问题

    以前一直以为结构体要通过memcpy来复制,现在才明白可直接用“=”复制 C语言中,结构体是一篇连续的内存空间,使用=赋值操作,底层用到的就是memcpy:如果结构体中有指针变量:操作后.两个指针指向 ...

  10. SlopeOne

    相信大家对如下的Category都很熟悉,很多网站都有类似如下的功能,“商品推荐”,"猜你喜欢“,在实体店中我们有导购来为我们服务,在网络上 我们需要同样的一种替代物,如果简简单单的在数据库 ...