WebSocket是什么?如何去使用WebSocket?
HTML5 WebSocket
1、什么是WebSocket ?
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
2、WebSocket 与轮询的区别是什么?
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象:
属性 描述
Socket.readyState
只读属性 readyState 表示连接状态,可以是以下值:
0 - 表示连接尚未建立。
1 - 表示连接已建立,可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:
事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:
方法 描述
Socket.send()
使用连接发送数据
Socket.close()
关闭连接
WebSocket 实例
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
客户端的 HTML 和 JavaScript
目前大部分浏览器支持 WebSocket() 接口,你可以在以下浏览器中尝试实例: Chrome, Mozilla, Opera 和 Safari。
runoob_websocket.html 文件内容
菜鸟教程(runoob.com)
<script type="text/javascript">function WebSocketTest(){if ("WebSocket" in window){alert("您的浏览器支持 WebSocket!");// 打开一个 web socketvar ws = new WebSocket("ws://localhost:9998/echo");ws.onopen = function(){// Web Socket 已连接上,使用 send() 方法发送数据ws.send("发送数据");alert("数据发送中...");};ws.onmessage = function (evt) { var received_msg = evt.data;alert("数据已接收...");};ws.onclose = function(){ // 关闭 websocketalert("连接已关闭..."); };}else{// 浏览器不支持 WebSocketalert("您的浏览器不支持 WebSocket!");}}</script>
<div id="sse"><a href="javascript:WebSocketTest()">运行 WebSocket</a></div>
WebSocket是什么?如何去使用WebSocket?相关推荐
- 【websocket前后端交互】vue-springboot实现websocket前后端交互链接,websocket心跳重连,包含前后端代码,复制即可用【详细解释版本】
前言: 还是老规矩,一步步的教大家如何建立前后端的 websocket 链接,并能完成互相传送数据的简单功能.由于网上找了半天发现很多帖子都是东一句西一句的,要不就是写的没什么注释和解释,导致我这个前 ...
- java websocket 实现_JAVA (Tomcat服务器)使用WebSocket实现服务端与HTML前端通信
在一个项目中要使用WebSocket技术来实现服务器与浏览器实时通信交互,在网上也找了许多资料.为了防止以后忘记具体的使用过程,下面我把自己的使用过程和方法记录下来方便自己以后使用. 项目背景: 基于 ...
- websocket创建失败_SpringBoot2.2 实践WebSocket被不靠谱的百度搜索结果坑了多少人
日常普通项目开发过程中,我们几乎很少用到WebSocket开发.但最近的项目有个功能需要服务器端实时的推送最新的信息同步到前端页面展示.所以思前想后,决定采用WebSocket再适合不过了.于是在实现 ...
- websocket python爬虫_python实现基于websocket协议的网络爬虫
WebSocket是一种在单个TCP连接上进行全双工通信的协议,简单来说就是建立一个TCP长连接之后,你可以服务器随时可以给客户端发送消息,客户端随时可以给服务器发送消息,而以前只能是客户端给服务器发 ...
- websocket心跳链接代码_Hyperf+RabbitMQ+WebSocket实现大屏幕消息推送
作者:八重樱 来源:www.cnblogs.com/a609251438/p/12713467.html 介绍 基于 Hyperf+ WebSocket +RabbitMQ 实现的一个简单大屏幕的消息 ...
- c++ websocket客户端_你要的websocket都在这,收好不谢~~~
此号已经沉寂多时,似乎已经忘了上一次更新是什么时候了!这一次重拾旧爱,希望能够一直保持下去,坚持写作,快乐你我他 今天的主题是websocket,相信搞研发的兄弟对websocket并不陌生,都202 ...
- websocket 连接本地端口_聊聊 WebSocket,还有 HTTP
还记得曾经风靡一时的 QQ 秀聊天室吗?那时,还在上初.高中的我们,QQ 是最常用的聊天交友工具:而 QQ 秀聊天室的出现打破了只能按条件查找好友的局限性,大家可以随意进入聊天室房间,进行在线聊天.怀 ...
- webSocket(与http请求区别、请求和返回示例、替代方法:ajax轮询、long poll、Flash、NodeJS实现WebSocket通信代码、原理、WebSocket构造函数详解)
目录 简介 优点 请求示例 请求成功返回示例 替代方法 Ajax 轮询 long poll Flash NodeJS实现webSocket(ws模块) 服务端代码 客户端代码 在线网页客户端 运行结果 ...
- 【WebSocket 第一篇】从一个WebSocket连接说起
1.定义 WebSocket 协议是一个网络协议,允许两个相连的端点在一个单一的tcp连接上进行全双工通信.类似两个人通过手机进行通话. WebSocket 的数据传输以帧的形式传输,将一条消息分为几 ...
最新文章
- 编译原理(二)之语法分析
- python常见内置函数
- easyui获取下拉框选中的文本值_Word中文本显示不全的常见3种情况及解决方法
- (51)FPGA条件选择(case)
- [iOS] 完整源码, Swift语言 - 账号保存工具
- 网站搜索引擎优化SEO策略及相关工具资源
- 基于HTML仿华为手机网站电商项目的设计与实现
- 基于中间人攻击给电视盒子安装apk
- 大数据分析案例-用RFM模型对客户价值分析(聚类)
- (10.13更新--完结)我不是大神(腾讯+京东+网易+阿里+去哪儿网面筋)
- 五行代码实现图像识别(深入版)
- HTML5接入百度地图并搜索定位
- 计算机技术在建筑学的应用论文,计算机应用于建筑设计中的影响的论文
- 你的脸正在成为别人的生意!
- VUE实现华视身份证阅读器读取身份证信息
- English story 23
- 数据结构与算法(系列文章一)
- 龙族幻想微信一区哪个服务器人多,龙族幻想哪个区人最多_龙族幻想哪个区人多一点...
- QFP、LQFP、TQFP、TEQFP、BGA等芯片封装技术
- Android简易实战教程--第九话《短信备份~二》