WebSocket协议学习总结

websocket协议

一、websocket协议简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

二、Ajax 轮询与websocket

AJAX 是一种在不需要重新加载整个网页的情况下，更新部分网页信息的技术。

轮询是在设定的时间间隔内，由浏览器定时对服务器发出HTTP请求，然后获得服务器返回最新的数据给客户端的浏览器。

Ajax的缺点：浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

三、WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。

建立一个 WebSocket 连接时，客户端（浏览器）首先要向服务器发起一个 HTTP 请求，这个HTTP请求和普通的 HTTP 请求有所不同，它包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个建立好的连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

四、建立WebSocket连接过程

首先发送HTTP请求，要求升级到websocket协议，请求格式如下：

GET /XX/XXX HTTP/1.1
Upgrade: websocket    #必须是websocket，表示要升级的目标协议
Connection: Upgrade   #必须是Upgrade，表示要升级连接
Host: XXXX.com
Origin: http://XXXXX.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==   #是浏览器随机生成的字符串，用于验证websocket
Sec-WebSocket-Protocol: chat, superchat  #用户自定义字符串，用于区分同url的不同服务所需的协议
Sec-WebSocket-Version: 13  #告知服务器使用的websocket协议版本

服务器响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket     #表示服务端可以升级到websocket协议
Connection: Upgrade    #同请求
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=   #该值为服务器加密的Sec-WebSocket-Key值
Sec-WebSocket-Location: ws://example.com/

到此就已经升级到了websocket协议并建立了连接，http就功成身退了。

五、websocket协议与ajax轮询的区别

1、ajax轮询是通过轮询（定时）发送请求询问服务器是否有数据更新，有则返回新数据给客户端（浏览器）并更新数据。

使用的场景就像是下面这样：

客户端：你吃早饭了吗？ 服务端：没有

客户端：你吃早饭了吗？ 服务端：没有

客户端：你吃早饭了吗？ 服务端：吃了

（客户端更新信息：服务端吃早饭了）

2、websocket协议是持久连接，连接建立后当服务器有数据更新时直接返回更新后的数据给客户端（浏览器），不需要客户端来询问是否有数据更新。

使用的场景就像是下面这样：

客户端：你吃完早饭后告诉我，你什么时候吃的，吃了什么？

服务端：好的

。。。。。。。。。（等服务端吃完早饭）

服务端：我早上6点吃的早饭

服务端：吃包子

（客户端收到信息后更新信息）

下面这张图形象的说明了websocket协议的使用场景：

欢迎大家关注我的订阅号，会定期分享一些关于测试相关的文章，有问题也欢迎一起讨论学习！订阅号每一条留言都会回复！