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. 知乎千万级高性能长连接网关 https://zhuanlan.zhihu.com/p/66807833

    知乎千万级高性能长连接网关揭秘 9 天前 · 来自专栏 知乎技术专栏 实时的响应总是让人兴奋的,就如你在微信里看到对方正在输入,如你在王者峡谷里一呼百应,如你们在直播弹幕里不约而同的 666,它们的背 ...

  2. echarts3.0之关系图详解

    近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手.话不多说,开整生气! echart ...

  3. SQL-W3School-函数：SQL COUNT() 函数

    ylbtech-SQL-W3School-函数:SQL COUNT() 函数 1.返回顶部 1. COUNT() 函数返回匹配指定条件的行数. SQL COUNT() 语法 SQL COUNT(col ...

  4. saveLayerAlpha简单入门

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.*; imp ...

  5. 利用redis实现分布式事务锁,解决高并发环境下库存扣减

    利用redis实现分布式事务锁,解决高并发环境下库存扣减   问题描述: 某电商平台,首发一款新品手机,每人限购2台,预计会有10W的并发,在该情况下,如果扣减库存,保证不会超卖 解决方案一 利用数据 ...

  6. C#依赖注入实例

    http://qing.weibo.com/tj/400082fa33001h7x.html 1.5 实现依赖注入1.5.1 背景介绍 设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系, ...

  7. VS2015编译GDAL库出现宏重复定义 snprintf: 宏重定义

    E:\OpenSourceGraph\gdal-1.10.0\gdal\port      cpl_config.h   20行 #define HAVE_VPRINTF 1#define HAVE_ ...

  8. python多进程实例详解

    写在前面:python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包multiprocessing ...

  9. 【C# 开发技巧】在VS程序如何取消.vshost的进程

    我们在双击执行一个EXE程序,会有两个进程,程序关闭之后,貌似只能关闭你的程序,附加的vshost.exe仍然存在.如下图 解决方案: 1.在调试页面,改成release,同时取消最后一项启用承载进程 ...

  10. kali安装chrome

    文章搬到自己的网站上,如下: http://101.132.137.140:202/archives/2019-11-25