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

 

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

  1. 【web】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. Google Chrome浏览器中如何使用命令

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

  9. 在Chrome浏览器中保存的密码有多安全？

    本文由 伯乐在线 - 黄利民 翻译.未经许可,禁止转载!英文出处:howtogeek.欢迎加入翻译组. [2013-08-09 更新]:最近又开始讨论“Chrome浏览器明文保存密码这个话题了,国外一 ...

随机推荐

  1. Android Jetpack组件之Lifecycles库详解

    Android Jetpack 组件是库的集合,这些库是为了协同工作而构建的,不过也可以单独采用,接下来会一一详细地学习这些库, 下面源码版本是com.android.support:appcompa ...

  2. Jmeter学习笔记（十二）——断言

    一.断言简介 jmeter中有个元件叫做断言(Assertion).用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致. 使用断言的目的:在request的返回层面 ...

  3. FreeRTOS计数型信号量

    API函数 //创建 #if( configSUPPORT_DYNAMIC_ALLOCATION == 1 ) #define xSemaphoreCreateCounting( uxMaxCount ...

  4. SuperTab

    Tab快捷键提示功能 下载 http://www.vim.org/scripts/script.php?script_id=1643 安装 # vi supertab.vmb : UseVimball ...

  5. 计算机网络原理,TCP&UDP

    UDP伪首部:计算校验和时会用到,然后实际传输过程中里包含的IP地址没有什么用. UDP校验和计算:求数值之和,如果溢出回卷,最后求出反码;UDP伪首部,UDP首部,应用层数据相加 tcp报文,最短2 ...

  6. c# Stack 类

  7. Qt错误: 程序数据库管理器不匹配 请检查安装

    错误提示: C1902: 程序数据库管理器不匹配:请检查安装解决 解决方法: 到D:\VisualStudio2015\VC\bin目录下面拷贝mspdbsrv.exe.mspdb140.dll.ms ...

  8. LINQ查询表达式（4） - LINQ Join联接

    内部联接 按照关系数据库的说法,“内部联接”产生一个结果集,对于该结果集内第一个集合中的每个元素,只要在第二个集合中存在一个匹配元素,该元素就会出现一次. 如果第一个集合中的某个元素没有匹配元素,则它 ...

  9. Oralce if ..elsif结构

    create or replace procedure sp_pro6(spNo number) is v_job emp.job%type; begin select e.job into v_jo ...

  10. http之browser抓包

    Chrome 抓包 详解谷歌Network 面板 快捷键:Control+Shift+I (Windows) or Command+Option+I (Mac) 控制器 补充知识: HAR Chrom ...