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. angular异步获取数据后在ngOnInit中无法获取，显示undefined解决办法

    两种方法 1 通过*ngif动态加载要数据渲染的dom 2 通过路由导航resolve 第一种感觉太麻烦了,要是一个页面请求多个接口,那就不得不写多个*ngif,本人还是更倾向与第二种发法 具体步骤: ...

  2. SQL SERVER-解析Extendevent文件数据

    --解析xel数据 select SWITCHOFFSET(n.value('@timestamp','Datetime'),'+08:00') as EventTime, n.value('(dat ...

  3. Mongodb之增删改查操作

    一.创建一个数据库 在我们使用MongoDB数据库时引进了这样一个知识,“对于mongodb,使用了不存在的对象,就等于在创建这个对象”,所以创建数据库的操作就比较简单 在我们使用mysql数据库时u ...

  4. 【Flask】 python学习第一章 - 创建与运行参数

    windos 创建环境 sudo pip install virtualenv   # 安装virtualenv virtualenv -p python dir_name cd dir_name p ...

  5. 微信小程序~App.js中获取用户信息

    (1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...

  6. ArcMap 制图出图

    在这里用的数据是:台湾2018年6月人口统计数据来做展示数据. ArcMap 里面主要用到的是:符号系统使用.布局视图等 一.属性中设置元素符号 ArcMap 初次加载数据,默认的是“单一符号”,就是 ...

  7. 苹果cms和海洋cms通用的百度主动推送工具

    百度主动推送的代码,不需要每天手动去添加地址推送,只要浏览器打开推送请求,不要关掉浏览器,程序自动帮你推送.(该插件只推送内容页,支持动态.伪静态.静态页面的推送,但这三种地址规则需要去代码里面自行拼 ...

  8. Oracle 按指定顺序排序

    select * from (select 'Nick' as item from dual union all select 'Viki' as item from dual union all s ...

  9. 三.protobuf3标量值类型

    Protobuf3 标量值类型 标量消息字段可以具有以下类型之一——该表显示了.proto文件中指定的类型,以及自动生成的类中的相应类型: .proto类型 说明 C++ 类型 Java 类型 Pyt ...

  10. [GCP] Goolge compute Engine

    Which of the following is a PAAS option for hosting web apps on GCP? App Engine standard or flexible ...