HTML5之WebSocket(转自知乎)
在认识websocket之前,我们必须了解的是websocket有什么用? 他能解决我们遇到的什么问题? 如果没用,那么我们就么有使用它的必要的。
websocket就是建立起全双工协议的,提高了效率,节省了时间。
什么是WebSocket? WebSocket一种在单个 TCP连接上进行全双工通讯的协议。即WebSocket是一个协议。 websocket是基于TCP协议的。
比较通俗的理解,我们可以点击这里。
推荐文章:
https://zhuanlan.zhihu.com/p/23467317 (强烈推荐 --- 这篇文章详尽介绍了websocket的原理以及长轮询、短轮、commet, 通过铺垫告诉我们为什么要使用 websocket。对于基本概念的理解可以看这一篇文章 )
http://www.alloyteam.com/2015/04/qian-duan-qiang-hou-duan-fan-wan-node-js-socket-io-zhi-zuo-jian-yi-liao-tian-shi/ (推荐: 这篇文章是腾讯前端团队的成员所写,只是其中的例子都已经不能用了,但是这篇文章的思路还是非常清晰的,并且分享了自己在做项目中遇到的一些坑。)
http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html (这是讲解文章,非常好。可以参考学习。)
https://github.com/wayou/HiChat/blob/master/www/scripts/hichat.js (这是是github的源代码)
https://hichat.herokuapp.com/ (这个网站是聊天室在PC端的具体实现 。)
https://www.websocket.org/index.html# websocket官网
https://socket.io/demos/chat/ (socket.io提供了聊天室demo) 相关https://socket.io/get-started/chat/教程:
第一部分:WebSocket的特点
- 通过TCP一次握手就可以建立连接。 而HTTP协议需要三次握手。
- HTTP中服务器永远是被动的,即每次只有客户端发出请求,服务器才会响应。 但是WebSocket协议中,服务器是可以主动的向客户端传递数据。这样就避免了轮询的问题。
- WebSocket需要浏览器、服务器同时支持才可以使用,而http协议是普遍支持的。 且WebSocket是一种新的协议,只是目前为了兼容性,必须要建立在http的基础上发起请求,如只用WebSocket协议名将不再是http:而是ws:。
- 同样地,WebSocket也是基于TCP协议的。
websocket 和 http 的区别
首先要知道的时 websocket 和 http是不同的两个协议,最大的区别在于---http协议是被动的,而websocket协议是主动的。 所谓被动就是说只有客户端发起请求服务器端才会给出响应,而websocket显然就是说可以由服务器端来主动给数据,也许你并没有请求。
客户端:啦啦啦,我要建立Websocket协议,需要的服务:chat,Websocket协议版本:17(HTTP Request)
服务端:ok,确认,已升级为Websocket协议(HTTP Protocols Switched)
客户端:麻烦你有信息的时候推送给我噢。。
服务端:ok,有的时候会告诉你的。
服务端:balabalabalabala
服务端:balabalabalabala
服务端:哈哈哈哈哈啊哈哈哈哈
服务端:笑死我了哈哈哈哈哈哈哈作者:Ovear
链接:https://www.zhihu.com/question/20215561/answer/40316953
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。这样, 服务器端就可以在有消息的时候再推送消息,那么客户端就可以减少不必要的ajax轮询了。
注意: 虽然websocket和http协议是两个不同的协议,但是我们每次在使用websocket协议时,首先要建立http协议,通过http协议,我们才能进一步升级(upgrade)为websocket协议。
下面这张图片比较好地解释了websocket的相关原理。
相比于传统 HTTP 的每次“请求-应答”都要 client 与 server 建立连接的模式,WebSocket 是一种长连接的模式。具体什么意思呢?就是一旦 WebSocket 连接建立后,除非 client 或者 server 中有一端主动断开连接,否则每次数据传输之前都不需要 HTTP 那样请求数据。从上面的图可以看出,client 第一次需要与 server 建立连接,当 server 确认连接之后,两者便一直处于连接状态。直到一方断开连接,WebSocket 连接才断开。
第二部分: 基础知识
当我们获取了WebSocket连接之后,我们就可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。下面的api用于创建一个Websocket对象。
var Socket = new WebSocket(url, [protocol]);
其中第一个参数是需要连接的url,后一个参数是可选的,制定可以接受的子协议。
WebSocket相关属性
即我们创建了Socket对象之后,它会有一个readyState属性(这个和xhr的属性同名),取值如下:
0 表示连接尚未建立
1 表示连接已经建立,可以进行通信
2 表示连接正在进行关闭
3 表示连接已经关闭或者连接不能打开
且websocket链接一旦建立,那么就可以双方进行通信了,直到有一方主动提出终止链接为止。,
WebSocket方法
WebSocket中只有两个方法,一个是使用连接发送数据,即Socket.send(),另一个就是关闭连接,即Socket.close()。
注意:在xhr中是没有close相关方法的,因为一次请求一次响应的方式使得其无需close。
WebSocket 事件
第三部分:WebSocket实例
在建立一个WebSocket连接的时候,客户端浏览器首先向服务器发送一个http请求,这个请求和普通的http请求不同,因为在首部字段中包含了Upgrade: WebSocket; 这表明这是一个申请升级为WebSocket协议的http请求, 服务器解析这些附加的头信息然后产生了应答信息返回给客户端,客户端和服务端的WebSocket连接就建立起来了,双方就可以使用这个连接进行自由的传递信息,并且这个连接会持续存在到客户端或者服务器端的某一方主动的关闭连接。
客户端的HTML和JavaScript
下面是菜鸟教程上的例子:
但是如果要使用,我们必须安装 pywebsocket, 安装过程如下:
https://looly.gitbooks.io/python-basic/100/101.html 这里有python环境的安装教程。
http://www.runoob.com/html/html5-websocket.html 这里是pywebsocket的安装过程。
第四部分: http与websocket在报文方面的差异
这里从报文层面谈一下两者的差异。
首先,client 发起 WebSocket 连接,报文类似于 HTTP,但主要有几点不一样的地方:
"Upgrade: websocket": 表明这是一个 WebSocket 类型请求,意在告诉 server 需要将通信协议切换到 WebSocket
"Sec-WebSocket-Key: *": 是 client 发送的一个 base64 编码的密文,要求 server 必须返回一个对应加密的 "Sec-WebSocket-Accept" 应答,否则 client 会抛出 "Error during WebSocket handshake" 错误,并关闭连接
server 收到报文后,如果支持 WebSocket 协议,那么就会将自己的通信协议切换到 WebSocket,返回以下信息:
"HTTP/1.1 101 WebSocket Protocol Handshake":返回的状态码为 101,表示同意 client 的协议转换请求
"Upgrade: websocket"
"Connection: Upgrade"
"Sec-WebSocket-Accept: *"
...
以上都是利用 HTTP 协议完成的。这样,经过“请求-相应”的过程, server 与 client 的 WebSocket 连接握手成功,后续便可以进行 TCP 通讯了,也就没有 HTTP 什么事了。可以查阅WebSocket 协议栈了解 WebSocket 的 client 与 server 更详细的交互数据格式。
第五部分: websocket 与 socket的区别
什么是socket?
网络应用中,两个应用程序同时需要向对方发送消息的能力(即全双工通信),所利用到的技术就是 socket,其能够提供端对端的通信。对于程序员而言,其需要在 A 端创建一个 socket 实例,并为这个实例提供其所要连接的 B 端的 IP 地址和端口号,而在 B 端创建另一个 socket 实例,并且绑定本地端口号来进行监听。当 A 和 B 建立连接后,双方就建立了一个端对端的 TCP 连接,从而可以进行双向通信。
进一步解释: 可以知道socket并不是仅仅针对于网络的,而是对于任何的双方之间可以进行全双工通信,我们就认为这是socket。 而不是说必须是客户端和服务器端。
WebSocekt 是 HTML5 规范中的一部分,其借鉴了 socket 的思想,为 client 和 server 之间提供了类似的双向通信机制。同时,WebSocket 又是一种新的应用层协议,包含一套标准的 API;而 socket 并不是一个协议,而是一组接口,其主要方便大家直接使用更底层的协议(比如 TCP 或 UDP)。
即 websocket是协议,而socket是技术。
第五部分: websocket与socket.io的区别
https://socket.io/
Socket.IO 是一个封装了 Websocket、基于 Node 的 JavaScript 框架,包含 client 的 JavaScript 和 server 的 Node。其屏蔽了所有底层细节,让顶层调用非常简单。
另外,Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket,还支持许多种轮询机制以及其他实时通信方式,并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等。换句话说,当 Socket.IO 检测到当前环境不支持 WebSocket 时,能够自动地选择最佳的方式来实现网络的实时通信。e
也就是说,通过socket.io,我们可以更方便的调用websocket。 比如,对于ajax的封装就会大大提高我们的效率,而不需要自己创建,考虑兼容性问题等。
不难理解,socket.io这个库是结合了node更方便我们调用socket的方法的库,更狭隘的说,socket.io是一个websocket库, 他和express不同,因为express是node的库,所以两者是相互独立的,为了开发的高效性,我们也可以同时使用express和socket.io两个库。
完
https://www.zhihu.com/question/20215561
HTML5之WebSocket(转自知乎)的更多相关文章
- 认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- HTML5之WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- HTML5 的WebSocket
认识HTML5的WebSocket
- 使用Html5下WebSocket搭建简易聊天室
一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...
- HTML5的Websocket(理论篇 I)
HTML5的Websocket(理论篇 I) ** 先请来TA的邻居:** http:无状态.基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么) t ...
- 如何使用HTML5的WebSocket实现网页与服务器的双工通信(二)
本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用WCF构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.创建WCF服务 ...
- 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)
本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...
- html5利用websocket完成的推送功能(tomcat)
html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...
- HTML5 and Websocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
随机推荐
- 1072 Gas Station
A gas station has to be built at such a location that the minimum distance between the station and a ...
- Nginx隐藏式跳转(浏览器URL跳转后保持不变) - 运维笔记
Nginx的隐藏式跳转可以实现将请求跳转到另一个网站的页面,并且浏览器中URL保持不变.Nginx配置中需要使用rewrite规则.下面提供两个示例来说明这种跳转需求的配置: 一.配置示例1将请求路径 ...
- 【Idea】实用插件列表
1.Translation : 翻译 2.CodeGlance:代码预览 3.Lombok:优雅编程插件 4.GenerateSerialVersionUID :自动生成序列化ID 5.CamelCa ...
- SpringCloud之远程调用OpenFeign和Ribbon
Ribbon.Feign和OpenFeign的区别 SpringCloudAlibaba微服务实战教程系列 Spring Cloud 微服务架构学习记录与示例 一 简介 Feign是Netflflix ...
- 010 Editor体验
源代码的我们现在拥有各式各样的IDE和编辑器可以去查看,但二进制文件对于大多数软件只能做到显示16进制,而不能按照文件类型的格式去显示.今天我们就用dex文件让010 show. 安装软件: http ...
- Getting Started and Beyond|云原生应用负载均衡选型指南
作者 冉昕,腾讯云服务网格TCM产品经理,现负责云原生流量接入网关与应用通信可观测性等产品特性策划与设计工作. 刘旭,腾讯云高级工程师,专注容器云原生领域,有多年大规模 Kubernetes 集群管理 ...
- StreamReader & StreamWriter
这节讲StreamReader & StreamWriter,这两个类用于操作字符或者字符串,它将流的操作封装在了底层,相对来说用法比较简单,但是它不支持Seek()方法. 先看一下代码: F ...
- 北航OO(2020)第四单元博客作业暨学期总结
一.第四单元架构设计 1.第一次作业 我在本次作业中设置了多个储存结构:Directory,ElementsInName,ElementsInId,Cache. Directory: 顾名思义,这是个 ...
- Date类常用方法总结(构造|格式化输出|String转换|Long转换|计算间隔|比较)
java.util.Date类 它重写了toString方法,new一个Date类直接输出是按照这样的格式 // "EEE MMM dd HH:mm:ss zzz yyyy"Fri ...
- Elastic Stack(ElasticSearch 、 Kibana 和 Logstash) 实现日志的自动采集、搜索和分析
Elastic Stack 包括 Elasticsearch.Kibana.Beats 和 Logstash(也称为 ELK Stack).能够安全可靠地获取任何来源.任何格式的数据,然后实时地对数据 ...