-
背景
起初 HTTP 协议是无状态协议,服务器不知道你是谁,后来有了 cookie ,这个时候浏览器知道你是谁并会记录下你的相关信息,保持相关的状态(如登录)。
可是我们用 HTTP 发起请求的时候,每次都会三次握手,这是相当耗费时间的,为了解决这个问题, HTTP/1.1 有了长连接(connection:keep-alive),当我们与服务器建立连接的时候只需要最开始建立一次连接即可,请求完并没有断开连接,除非客户端主动断开。但是 HTTP 通信本身还是 Request-Response,也就是一个请求对应一个响应,并没有改变其单工通信本质。
有些时候我们需要客户端和服务器端能够建立全双工通信,这样服务器端能够及时推送新消息,于是这个时候 WebSocket 出现了。WebSocket 是基于 TCP 传输协议,并复用 HTTP 的握手通道的全双工通信技术,属于应用层协议。 -
优点
2.1 支持双向通信,实时性更强
2.2 更好的二进制支持
2.3 较小的头部开销。HTTP 头部为 20 字节,而 WebSocket 一般服务器到客户端的头部为 2-10 字节,客户端到服务器需要加上 4 字节的掩码。
2.4 支持扩展,用户可以扩展协议 -
如何建立连接
3.1 客户端申请协议升级
GET / HTTP/1.1
Host: localhost:8080
Origin: http://127.0.0.1:3000
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Version: 13
Sec-WebSoc
ket-Key: w4v7O6xFTi36lq3RNcgctw==
这和正常的 HTTP 请求不同的在于:
Connection: Upgrade // 表示连接升级
Upgrade: websocket // 升级为 WebSocket 协议
Sec-WebSocket-Version: 13 // WebSocket 协议版本号
Sec-WebSocket-Key: w4v7O6xFTi36lq3RNcgctw==// 这与服务器端响应首部的 Sec-WebSocket-Accept 是配套的,主要用来提供基本的防范,如恶意或无意连接
3.2 服务器端响应
HTTP/1.1 101 Switching Protocols
Connection:Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: Oy4NRAQ13jhfONC7bP8dTKb4PTU=
状态码一定要是 101 才表示协议转换成功,成功后数据传输都按 WebSocket 协议
-
WebSocket 属性
readyState:表示连接状态,有以下值:
0:表示尚未建立连接
1:表示连接已建立,可以进行通信
2:表示连接正在关闭
3:表示连接已关闭 -
WebSocket 事件
open:Socket.onopen 连接已建立
message:Socket.onmessage 客户端接收到来自服务端的消息
error:Socket.onerror 通信时发生错误
close:Socket.onclose 连接关闭时触发 -
WebSocket 方法
Socket.send() 发送数据
Socket.close() 关闭连接
来源:
掘金
JavaScript权威指南