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浏览器明文保存密码这个话题了,国外一 ...
随机推荐
- Flutter 与 Android 的交互
https://juejin.im/post/5cd91de4518825686b120921 https://juejin.im/entry/5b64292be51d451995676398
- 提高QPS
常用方案 1.异步化+MQ 即非阻塞,化繁为简,拿到你需要处理的资源后尽快回复.适用于事务处理场景,且无需对上游返回数据场景. 2.无锁设计 本质上是要降低锁冲突,基于数据版本的乐观锁 有效的减少了互 ...
- weui中的picker使用js进行动态绑定数据
解决方案; picker和Select组件是通过input标签绑定,可以先通过input的父级元素移除input标签,重新插入input标签,最后重新初始化picker或Select组件. <d ...
- 简述几个css hack?【CSS】
(1) 图片间隙 在div中插入图片,图片会将div下方撑大3px. hack1:将<div>与<img>写在同一行. hack2:给<img>添加display ...
- JAVA - 普通类读取WEB-INF里面配置文件
服务器:Tomcat 9 注意问题:配置文件应该放入Tomcat的正式工程目录中测试. 可用代码: package com.daoen.rtis.test; import java.io.FileRe ...
- nginx+uwsgi+django+supervisor+mysql+redis
目录 1. 概述 3 2. 安装与配置 3 2.1 django项目与应用创建 3 2.2 uwsgi安装与配置 6 2.3 supervisor安装与配置 8 2.4 nginx安装与作为反向代理服 ...
- MQ的常见应用场景
MQ的常见的应用场景为:解耦,异步,流量削峰 在解耦场景中: 不使用MQ的耦合场景: 使用解耦的场景为: 异步的方式: 不使用MQ的同步高延时请求场景: 使用异步化之后的接口性能优化: 没有使用mq的 ...
- dt开发之-自定义函数获取分类名称
需要在api/extend.func.php 文件中加入的函数 获取分类名称 cat_name($catid) 传入分类id function cat_name($catid) { global $d ...
- DT二次开发之-采购页面加入好看的倒计时
加入采购页面倒计时,个人感觉挺漂亮的,做下笔记. <span id="timer" ></span> {if $totime} <script typ ...
- python实现Bencode解码方法
近期搞项目中遇到Bencode解码的问题,就用Py写了个Bencode解码的代码.作为笔记保存参考. BEncoding是BitTorrent用在传输数据结构的编码方式,这种编码方式支持四种类型的数据 ...