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）也可以查看输入和发送的信息。

 相关资料：

【web】Chrome 浏览器中查看 webSocket 连接信息的更多相关文章

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

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

  2. Chrome_查看 webSocket 连接信息

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

  3. 【Tip】如何在chrome浏览器中查看网页的Header

    步骤:打开“开发者工具”,点Network标签,然后刷新网页,选择Name中的第一项,再点右边的Headers,就出来了. 似乎有点复杂,配合下面的图看就一目了然了.

  4. 查看 chrome 浏览器中的 Headers

    查看 chrome 浏览器中的 Headers, Response 信息:

  5. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  6. 【F12】chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  7. chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  8. 渗透技巧——导出Chrome浏览器中保存的密码

    0x00 前言 在后渗透阶段,获得权限后需要搜集目标系统的信息.信息越全面,越有助于进一步的渗透.对于Windows系统,用户浏览器往往包含有价值的信息. 在之前的文章<本地密码查看工具LaZa ...

  9. Google Chrome浏览器中如何使用命令

    Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome 1 2 3 分步阅读 Google Chrome浏览器有很多的特 ...

随机推荐

  1. 打印变量地址-0x%08x

    地址是8个16进制数. 1.8个16进制数:相当于32个二进制数.4G内存刚好可以用32位的二进制表示出来.2.因为变量或函数等等在运行时都是存储在内存中的,所以你用取地址符当然是取出计算机内存中的地 ...

  2. Animator动画XML实现

    在res下创建文件夹animator文件夹 <?xml version="1.0" encoding="utf-8"?> <objectAni ...

  3. 阶段5 3.微服务项目【学成在线】_day18 用户授权_01-用户授权业务流程分析

    1 用户授权业务流程 用户授权的业务流程如下: 业务流程说明如下: 1.用户认证通过,认证服务向浏览器cookie写入token( 身份令牌) 2.前端携带token请求用户中心服务获取jwt令牌 前 ...

  4. 在Mac 搭建robotframework 环境 遇到ride.py 打不开的方法(没试过，先记录在此)

    折腾来一下午,遇到了好多坑 坑 1.不要用pip 下载wxpython 2.不要用mac自带的python 3.不要自己下载wxpython 步骤: 1. 安装homebrew, /usr/bin/r ...

  5. OpenStack社区中的GO语言之争

    1 背景介绍 Swift之前几乎所有的代码都是用Python实现的,但是性能一直不理想, 社区为了解决性能问题,尝试过很多方法,后来发现用Golang语言进行一部分代码重写, 性能得到了一定的提升,社 ...

  6. Spring事务的隔离级别和传播机制

    七个传播机制:(红色字体的代表如果不设置传播机制时候默认的)PROPAGATION_REQUIRED-支持当前事务;如果不存在,创建一个新的. PROPAGATION_SUPPORTS-支持当前事务; ...

  7. 【设计思路】Booking优化

    https://www.uisdc.com/booking-redesign https://medium.muz.li/booking-com-ux-case-study-7ffb39e54791

  8. PostgreSQL学习笔记——摘要

    因为PostgreSQL和MySQL.DB2等数据库均遵循SQL语法,所以这篇随笔仅记录一些PostgreSQL中和别的数据库有差别或之前学习中遗漏的地方,以及一些我觉得比较重点的地方. 通过psql ...

  9. 使用httpwebrequest Post数据到网站

    怎样通过HttpWebRequest 发送 POST 请求到一个网页服务器?例如编写个程序实现自动用户登录,自动提交表单数据到网站等.假如某个页面有个如下的表单(Form): <form nam ...

  10. Egret入门学习日记 --- 第三篇 （书中 3.4 内容）

    第三篇 (书中 3.4 内容) 今天还是要把昨天项目运行后,EXML文件里的界面没有出现的问题解决了才行. 去了群里,没人回.去了官网看文档,看不懂. 不过倒是看到了一个好东西: 还挺便宜啊,一个月要 ...