1、什么是 webSocket 协议
HTML5 开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于 TCP 传输协议,并复用 HTTP 的握手通道。
2、webSocket 的应用
服务器向客户端推送消息的场景需求,比如实时更新日志、客服聊天、联网的游戏、直播互动等等,有时需要浏览器端的用户一直保持点对点通讯,此情此景,最好的选择是 websocket,因为从稳定性、服务器资源开销都是最优的。
特点:
WebSocket 可以在浏览器里使用
支持双向通信
优点:
支持双向通信,实时性更强
对比 http 协议,支持双向统信、更灵活、高效、可拓展性好
更好地二进制支持
较少的控制开销,创建连接后,客户端与服务端进行数据交换是,协议控制的数据包头部较小,在不包含头部的情况下,服务端到客户端的包头只有 2~1-字节。
与 http 不同点:
HTTP 的协议标识符是 http,websocket 的是 ws
HTTP 请求只能由客户端发起,服务器无法主动向客户端推送消息,而 websocket 可以
HTTP 请求有同源限制,不同源之间通信需要跨域,而 websocket 没有同源限制
与 http 相同点:
都是应用层的通信协议
默认端口一样,都是 80 或 443
都可以用于浏览器和服务器间的通信
都基于 TCP 协议



3、连接过程
如何建立连接
数据帧格式
如何交换数据
如何维持连接
建立连接
客户端发起 HTTP 请求,经过 3 次握手建立 TCP 连接,HTTP 请求里存放 WebSocket 支持的版本号等信息。2.服务器收到客户端握手请求后,回馈数据。
以上两个步骤完成后,HTTP 握手部分完成,协议升级为 WebSocket,此时服务器就不再需要客户端发起请求,再响应请求了,可以主动推送信息给客户端了。
只需要一次连接就可以做到源源不断的信息传递了

1)客户端:申请协议升级
webSocket 复用了 HTTP 的握手通道。具体指的是,客户端通过 HTTP 请求与 WebSocket 服务端协商升级协议。协议升级完成后,后续的数据交换则遵照 WebSocket 的协议

GET / HTTP/1.1
Host: localhost:8080
Origin: http://127.0.0.1:3000
Connection: Upgrade 表示要升级协议

Upgrade: websocket 表示升级到 webSocket 协议

Sec-WebSocket-Version: 13 支持的版本号,服务端不支持则返回对应支持的版本号
Sec-WebSocket-Key: w4v7O6xFTi36lq3RNcgctw==

2)服务端:响应协议升级

HTTP/1.1 101 Switching Protocols 101 表示协议切换完成协议升级
Connection:Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: Oy4NRAQ13jhfONC7bP8dTKb4PTU=
将 Sec-WebSocket-Key 与符号拼接,通过 sha1 计算然后转让 base64 字符串

数据帧格式
客户端、服务端数据的交换、离不开数据帧格式的定义,websocket 客户端、服务端通信的最小单位是帧(frame)
发送端将信息切割成多个帧,并发送给服务端
接收端,接受消息帧,并将关联的帧重新组装成完整的消息

交换数据
一旦 WebSocket 客户端、服务端建立连接后,后续的操作都是基于数据帧的传递。WebSocket 根据 opcode 来区分操作的类型。比如 0x8 表示断开连接,0x0-0x2 表示数据交互
Websocket 的每条休息可能会被分割成多个数据帧,当接收方接收到一个数据帧时,会根据 FIN 的值来判断,是否已经收到了消息的最后一个数据帧。FIN=1 表示当前数据帧是消息的最后一个数据帧,接收方已经收到完整的消息,可以对消息进行处理。FIN=0 时,接收方还需要继续监听其余的数据帧。
此外,opcode 表示数据类型,0x01 表示文本,ox02 表示二进制,0x00 表示延续帧当前的数据帧需要接在上一条数据帧之后
实例:
Client: FIN=1, opcode=0x1, msg="hello"
Server: (process complete message immediately) Hi.
Client: FIN=0, opcode=0x1, msg="and a
"Server: (listening, new message containing text started)
Client: FIN=0, opcode=0x0, msg="happy new"
Server: (listening, payload concatenated to previous message)
Client: FIN=1, opcode=0x0, msg="year!"
Server: (process complete message) Happy new year to you too!

连接保持 + 心跳

连接断开了
连接没断连接不可用
连接对端的服务不可用


↙↙↙阅读原文可查看相关链接,并与作者交流