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）也可以查看输入和发送的信息。
Chrome 浏览器中查看 webSocket 连接信息的更多相关文章
- 【web】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是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- Google Chrome浏览器中如何使用命令
Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome 1 2 3 分步阅读 Google Chrome浏览器有很多的特 ...
- 在Chrome浏览器中保存的密码有多安全？
本文由 伯乐在线 - 黄利民 翻译.未经许可,禁止转载!英文出处:howtogeek.欢迎加入翻译组. [2013-08-09 更新]:最近又开始讨论“Chrome浏览器明文保存密码这个话题了,国外一 ...
随机推荐
- 【洛谷 P3041】 [USACO12JAN]视频游戏的连击Video Game Combos（AC自动机，dp）
题目链接 手写一下AC自动机(我可没说我之前不是手写的) Trie上dp,每个点的贡献加上所有是他后缀的串的贡献,也就是这个点到根的fail链的和. #include <cstdio> # ...
- vue中使用iview组件库实现图片的上传
vue文件如下: iview中Upload 属性详情 https://www.iviewui.com/components/upload js文件 :
- JavaScript内置一些方法的实现原理--new关键字，call/apply/bind方法--实现
先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...
- 解决此报错：Cannot create Woodstox XMLInputFactory: java.lang.NoClassDefFoundError: com/ctc/wstx/stax/WstxInput
最近在研究webservice服务的技术,可是写完webservice例子后,项目正常启动,但是在输入url地址后报如下的错误: Cannot create Woodstox XMLInputFact ...
- laravel使用withCount获取列表下关联模型的数量
模型里面 <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Post extends Model ...
- LAMP环境搭建之编译安装指南（php-5.3.27.tar.gz）
测试环境:CentOS release 6.5 (Final) 软件安装:httpd-2.2.27.tar.gz mysql-5.1.72.tar.gz php-5.3.27.tar.gz 1 ...
- Navicat中文破解版（windows10)
1.下载安装包 链接:https://pan.baidu.com/s/1hP3cD9aTv8nvJfNwjXPdrQ 提取码:xmsu 2.解压安装包 选择.exe 文件然后 安装 选择自己要安装的 ...
- python内置异常层次
内置异常 BaseException # 所有异常的基类 +-- SystemExit # 解释器请求退出 +-- KeyboardInterrupt # 用户中断执行(通常是输入^C) +-- Ge ...
- springboot使用过滤器Filter
先创建过滤器配置类: ## 引入的包部分省略... @Configuration public class FilterConfig { @SuppressWarnings({"rawtyp ...
- @ConfigurationProperties绑定配置信息至Array、List、Map、Bean
原文:https://blog.csdn.net/justry_deng/article/details/90758250 相关说明:在SpringBoot中,我们可以通过以下几种方式获取并绑定配置文 ...