十分钟了解WebSocket协议

概念

WebSocket 是基于TCP/IP协议,独立于HTTP协议的通信协议。

WebSocket 是双向通讯,有状态,客户端一(多)个与服务端一(多)双向实时响应(客户端 ⇄ 服务端)。

WebSocket 是应用在浏览器的 Socket (是 Socket 模型接口的实现),Socket 是一个网络通信接口 (通信规范)。

WebSocket协议端口是80。

WebSocket SSL协议端口是443。

Socket是TCP/IP协议的网络数据通讯接口(一种底层的通讯的方式)。

Socket是IP地址和端口号的组合。例如:192.168.1.100:8080。

版本

RFC 6455 规范 是大多数浏览器实现的 WebSocket API 协议。

工作原理

1. 用户打开Web浏览器,并访问Web站点。

2. Web浏览器(客户端)与Web服务端建立连接。

3. Web浏览器(客户端)能定时收发Web服务端数据,Web服务端也能定时收发Web浏览器数据。

WebSocket协议不受同源策略影响。

请求消息体

# 请求头部分 # [请求方式] [资源路径] [版本] GET /xxx HTTP/1.1 # 主机。 Host: server.example.com # 协议升级。 Upgrade: websocket # 连接状态。 Connection: Upgrade # websocket客户端生成的随机字符。 Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== # websocket协议的子协议,自定义字符,可以理解为频道。 Sec-WebSocket-Protocol: chat, superchat # websocket协议的版本是13。 Sec-WebSocket-Version: 13

响应消息体

# 响应头部分 # [版本] [状态码] HTTP/1.1 101 Switching Protocols # 协议升级。 Upgrade: websocket # 连接状态。 Connection: Upgrade # WebSocket服务端根据Sec-WebSocket-Key生成的随机字符。 Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= # WebSocket协议的子协议,自定义字符,可以理解为频道。 Sec-WebSocket-Protocol: chat

Upgrade字段仅限HTTP/1.1版本协议,不适合HTTP/2.0版本协议。

101 Switching Protocols 是HTTP协议状态码,不是websocket协议状态码。

状态码

连接成功状态码

101:HTTP协议切换为WebSocket协议。

连接关闭状态码

1000:正常断开连接。

1001:服务器断开连接。

1002:websocket协议错误。

1003:客户端接受了不支持数据格式(只允许接受文本消息,不允许接受二进制数据,是客户端限制不接受二进制数据,而不是websocket协议不支持二进制数据)。

1006:异常关闭。

1007:客户端接受了无效数据格式(文本消息编码不是utf-8)。

1009:传输数据量过大。

1010:客户端终止连接。

1011:服务器终止连接。

1012:服务端正在重新启动。

1013:服务端临时终止。

1014:通过网关或代理请求服务器,服务器无法及时响应。

1015:TLS握手失败。

连接关闭状态码是WebSocket对象的onclose属性返回的。

其他状态码不常用,所以就不列举说明。

连接状态

造成WebSocket断线原因:

网络状态不好(网络断开、网络信号差)。数据受各种阻塞(路由器、防火墙、代理服务器)。Web服务端故障。

解决websocket断线方法:心跳重连

通过服务端实现 Pings / Pongs 方式实现心跳。

即通过服务端向浏览器(客户端)发送ping 0x9 消息,浏览器会自动返回pong 0xA消息。(基于session技术)

​developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_servers通过浏览器(客户端)自带的心跳机制。

即监听网络,浏览器(客户端)定时发送消息到服务端。

这里消息指的websockect协议的数据帧,不需要通过代码实现。不同浏览器发送的消息时间间隔有所差异。

通过代码在浏览器(客户端)实现心跳机制。

即通过代码定时发送websockect消息与服务端进行交互。

常见问题

浏览器因网络故障而断开连接,不调用onClose方法问题。

不同浏览器(客户端)实现WebSocket实现的机制不一样导致,所以不触发onClose方法。

建议

心跳重连只能由服务端实现,不建议由客户端实现。