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. 你再也不用使用 Redux、Mobx、Flux 等状态管理了

    Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能.看完这个库的说明后,没有想到代码可以这个玩.短短几行代码,仅仅使用 ...

  2. LifeGame

    LifeGame 用例说明&用例图 用例名: 设置细胞颜色 说明 用户可以根据自己的喜好来设置细胞的颜色 主事件流 在菜单出点击需要的颜色游戏检测到菜单的返回的颜色更改细胞的颜色,最后显示出来 ...

  3. Flask的基础二

    一.session 除请求对象之外,还有一个 session 对象.它允许你在不同请求间存储特定用户的信息.它是在 Cookies 的基础上实现的,并且对 Cookies 进行密钥签名要使用会话,你需 ...

  4. 45 个常用Linux 命令，让你轻松玩转Linux！

    Linux 的命令确实非常多,然而熟悉 Linux 的人从来不会因为 Linux 的命令太多而烦恼.因为我们仅仅只需要掌握常用命令,就完全可以驾驭 Linux. 接下来,让我们一起来看看都有那些常用的 ...

  5. cesium-print 动态打印插件

    Cesium 动态打印插件 cesium-print is a plugin for cesium printing Usage Include it in your code after impor ...

  6. win10安装Pytorch【最新版】

    由于2019年4月16日和25日清华和中科大分别宣布停止Anaconda镜像服务,因此从2019年5月开始安装Pytorch都会出现一下错误: CondaHTTPError: HTTP 404 NOT ...

  7. 从底层实现剖析Kotlin协变与逆变的原理

    继续还是探究协变与逆变,在正式开始之前,先来对Kotlin和Java的协变与逆变进行一个对比: 1.Kotlin是声明处协变:而在Java中是在使用处协变: 如何理解,我们先来回顾一下在Java使用协 ...

  8. linux系统编程之信号(六)

    今天继续学习信号相关的知识,主要还是学习sigqueue另外信号发送函数,并配合上节学习的sigaction的用法,进入正题: sigqueue函数: sigval联合体: 实际上sigval参数是用 ...

  9. js在点击的按钮下面弹框

    效果如图,点击对应的按钮时,弹框会在对应的按钮下面显示,可以应用于列表等场景 前端代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

  10. 使用Restful风格中的post使用过遇到前端数据传送不到后端

    问题描述:使用postman进行请求时候,前端的数据,一直在后端接收不到,找了好多资料,竟然是因为一个注解的原因. 后端接收设置:@RequestParam@ReqeustBody设置的原因 因为sp ...