1.web即时通信
-
描述:
即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时(主动)地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的。
-
问题点-浏览器限制:
在Web中通信都是浏览器先发送请求到服务器,服务器再进行响应完成数据的即时更新。服务器端如果有了数据更新是没有办法主动向浏览器发送的。
2.解决浏览器限制实现web即时通信方案
1.短轮询:
时序图:
定义:
-
本质:
浏览器发送HTTP request从服务器获取最新的数据.
-
实现:
特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,服务器不管有没有最新数据都直接响应,关闭连接
应用场景:
- 传统的web通信模式。后台处理数据,需要一定时间,前端想要知道后端的处理结果,就要不定时的向后端发出请求以获得最新情况。
优缺点:
-
优点:
与普通HTTP请求无异,前后端程序编写较为容易
-
缺点:
1.请求中有大半是无用,难于维护,浪费带宽和服务器资源;
2.响应的结果没有顺序(因为是异步请求,当发送的请求没有返回结果的时候,后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果,那么当前面的请求返回结果数据时已经是过时无效的数据了).
2.长轮询:
时序图:
定义:
-
本质:
浏览器发送HTTP request从服务器获取最新的数据.
-
实现:
客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
应用场景:
- 聊天网页,WebQQ,FacebookIM等.
优缺点:
-
优点:
在无新数据的情况下不会频繁的请求,耗费资源小。
-
缺点:
服务器阻塞连接会消耗资源,返回数据顺序无保证,难于管理维护。
3.WebSocket协议:
协议出现:
HTML5规范在传统的web交互基础上为我们带来了众多的新特性,随着web技术被广泛 用于web APP的开发,这些新特性得以推广和使用,而websocket作为一种新的web通信,技术具有巨大意义。
时序图:
定义:
-
websocket定义及与HTPP的关系:
1.WebSocket是HTML5下一种新的协议.它实现了浏览器与服务器全双工通信(全双工即双方可同时向对方发送消息),能更好的节省服务器资源和带宽并达到实时通信的目的.
2.WebSocket与Http协议一样都是基于TCP的应用层协议。
3.WebSocket在建立握手连接时,数据是通过http协议传输的(101),但是在建立连接之后,真正的数据传输阶段是不需要http进行参与的.
-
http 101 状态码:
101
状态代码被发送作为对包括一个请求的响应"Upgrade"
报头信号,该请求的接收方愿意升级到所期望的协议之一。如果"101 Switching Protocols"
返回了状态码,则标头还必须包含Connection
和Upgrade
标头,以描述所选协议。请参阅此机制的常用用法中的示例,以了解有关其工作原理的更多信息。简述: 告诉服务器我要升级请求协议
-
实现:
浏览器向服务器发送握手请求(http101),协议由HTTP协议升级成WebSocket协议.
-
说明:
1.WebSocket未加密连接为ws://端口80,加密后的协议为wss://端口 443.
2.WebSocket是类似Socket的TCP长连接,一旦WebSocket连接建立后,服务器和浏览器之间可以自由的进行数据传递.
3.WebSocket协议中浏览器与服务器是完全平等的,可以相互发送请求亦可以主动断开连接.
4.websocket握手需要借助于http协议,建立连接后通信过程使用websocket协议。
应用场景:
- 广告推送、视频推送、社交软件开发,替代轮询和长轮询。
优缺点:
-
优点:
1.服务端和客户端能相互的主动发送消息,建立平等对话。属于一种服务器推送技术。
2.客户端和服务器之间交换数据简单,允许服务器直接向客户端推送数据而不需要客户端进行请求。
-
缺点:
主流浏览器支持的Web Socket版本不一致;服务端没有标准的API。
websocket实现原理:
-
说明:
1.WebSocket属于HTML5的新特性
2.WebSocket基于HTTP协议(101状态码)来完成一部分握手.
3.浏览器发起协议升级请求,只支持GET方法.
WebSocket请求头特殊内容:
1.Connection:
- 作用:
决定当前的事务完成后,是否会关闭网络连接(tcp). - 参数:
Upgrade:指示这是一个升级请求.(升级请求)
keep-alive: http1.1特性,指示网络连接(tcp)是持久的,不会关闭,使得对同一个服务器的请求可以继续在该连接上完成。(轮询)
其他参数详见(https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Connection)
2.Upgrade: websocket,h2c
- 作用:
告诉服务端需要将通信协议升级到xxx.
头指定一项或多项协议名,按优先级排序,以逗号分隔。 - 参数:
h2c:指示将协议升级为HTTP/2.0
websocket:指示将升级到WebSocket协议.
3.Sec-WebSocket-Extensions:
- 作用:
指定一个或多个协议级WebSocket扩展以要求服务器使用 - 参数:
superspeed
colormode
depth=16
4.Sec-WebSocket-Key:
- 作用:
向服务器提供所需信息,以确认客户端有权请求升级到WebSocket。当不安全的(HTTP)客户端希望升级时,可以使用此标头.
告诉服务器我要打开WebSocket连接. - 说明:
此标头由选择使用它的客户端自动添加(浏览器随机生成);不能使用XMLHttpRequest.setRequestHeader()
方法添加.
此请求升级的密钥。如果客户愿意,可以添加它,并且服务器将在响应中包含它自己的密钥,在将升级响应提供给您之前,客户将对其进行验证。
5.Sec-WebSocket-Version
作用:
指定客户端希望使用的WebSocket协议版本,以便服务器可以在其端确认是否支持该版本。说明:
客户端与服务器通信时希望使用的WebSocket协议版本。该号码应该是IANA WebSocket版本号注册表中列出的最新版本。WebSocket协议的最新最终版本是版本13。
如果服务器无法使用指定版本的WebSocket协议进行通信,它将以错误(例如426 Upgrade Required)响应,该错误的标Sec-WebSocket-Version
头中包含带有逗号分隔的受支持协议版本列表的标头-
WebSocket响应
1.Sec-WebSocket-Accept:
说明:
1.当服务器愿意启动WebSocket连接时,在打开握手过程中来自服务器的响应消息中将包含该消息。在响应头中,它只会出现一次。
2.Sec-WebSocket-Accept的值解析请求头中Sec-WebSocket-Key的数据 ,然后将数据加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密,之后进行BASE-64编码得到.