【web】Chrome 浏览器中查看 webSocket 连接信息
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 连接信息的更多相关文章
- Chrome 浏览器中查看 webSocket 连接信息
1.以下代码实现一个webSocket连接,在文本输入框中输入内容,点击发送,通过服务器,返回相同的内容显示在下方. 1 <!DOCTYPE html> 2 <html lang ...
- Chrome_查看 webSocket 连接信息
1.以下代码实现一个webSocket连接,在文本输入框中输入内容,点击发送,通过服务器,返回相同的内容显示在下方. <!DOCTYPE html> <html lang=" ...
- 【Tip】如何在chrome浏览器中查看网页的Header
步骤:打开“开发者工具”,点Network标签,然后刷新网页,选择Name中的第一项,再点右边的Headers,就出来了. 似乎有点复杂,配合下面的图看就一目了然了.
- 查看 chrome 浏览器中的 Headers
查看 chrome 浏览器中的 Headers, Response 信息:
- [转]chrome浏览器中 F12 功能的简单介绍
本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...
- 【F12】chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- 渗透技巧——导出Chrome浏览器中保存的密码
0x00 前言 在后渗透阶段,获得权限后需要搜集目标系统的信息.信息越全面,越有助于进一步的渗透.对于Windows系统,用户浏览器往往包含有价值的信息. 在之前的文章<本地密码查看工具LaZa ...
- Google Chrome浏览器中如何使用命令
Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome 1 2 3 分步阅读 Google Chrome浏览器有很多的特 ...
随机推荐
- 远程控制软件 mRemoteNG,管理多台虚拟机
#下载 1.官网下载:https://mremoteng.org/2.当然也可以到这里下载:https://pan.baidu.com/s/11O_QNM3HudN3IyTiqqHmrQ,提取码:jm ...
- 26Flutter 日期 和时间戳/格式化日期库/flutter异步/ 官方自带日期组件showDatePicker、时间组件showTimePicker以及国际化
/* 一.Flutter日期和时间戳 日期转换成时间戳 var now=newDateTime.now(); print(now.millisecondsSinceEpoch); //单位毫秒,13位 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_03-Eureka注册中心-搭建Eureka高可用环境
1.3.2.2 高可用环境搭建 Eureka Server 高可用环境需要部署两个Eureka server,它们互相向对方注册.如果在本机启动两个Eureka需要 注意两个Eureka Server ...
- EXCEL生成SQL脚本
有如下一张数据库表: 当然,Excel也是这个样子的,然后需要通过Excel的命令实现如下的脚本: insert into student(name,age) values('张三',15); 实现的 ...
- css 命名规范参考[转]
命名空间 另外最好的实践就是当命名你的类名的时候,使用命名空间前缀来进行分类.这些前缀会在你的命名前添加一组字符,但是这个值能立刻标记每一个类的目的,在你看 HTML 或者样式的时候是很需要的.我使用 ...
- AOP实践—ASP.NET MVC5 使用Filter过滤Action参数防止sql注入，让你代码安全简洁
在开发程序的过程中,稍微不注意就会隐含有sql注入的危险.今天我就来说下,ASP.NET mvc 5使用Filter过滤Action参数防止sql注入,让你代码安全简洁.不用每下地方对参数的值都进行检 ...
- Mysql: Can not read response from server. Expected to read 4 bytes, read 0 bytes before connection was unexpectedly lost.
2019-05-28 01:53:42.762 [message remind thread-24] ERROR druid.sql.Statement - {conn-10327, stmt-320 ...
- 多个结果集union后保持各自原有排序
SELECT *FROM ( SELECT TOP (@count1) a.* FROM Article AS a WITH (NOLOCK)LEFT JOIN Article_Type AS at ...
- GFS（Google File System，谷歌文件系统）----（1）文件系统简介
分布式文件系统 系统是构建在普通的.廉价的机器上,因此故障是常态而不是意外 系统希望存储的是大量的大型文件(单个文件size很大) 系统支持两种类型读操作:大量的顺序读取以及小规模的随机读取(larg ...
- JS 通过注册表调用启动本地软件
(关键点:所有软件安装的注册表路径是不会变化的,这个注册表路径需沟通软件商家获取或者通过自己安装在注册表中查找得到) // 调用 注册表编辑类 方法 function run_jxpgj(){//进项 ...