WebSocket 详解

不念不忘少年蓝@ 2023-10-09 20:14 32阅读 0赞

## WebSocket ##

*  `WebSocket` 是一种`支持双向通讯`网络通信协议。
 *  意思就是服务器可以`主动向客户端推送信息`，客户端也可以`主动向服务器发送信息`
 *  属于服务器推送技术的一种.

特点：

（1）建立在`TCP 协议`之上，服务器端的实现比较容易。

（2）与 `HTTP 协议`有着良好的兼容性。默认端口也是80和443，并且`握手阶段`采用 HTTP 协议，因此握手时不容易屏蔽，`能通过各种 HTTP 代理服务器`。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送`文本`，也可以发送`二进制数据`（`blob`对象或`Arraybuffer`对象）

（5）收到的数据类型 可以使用binaryType 指定， 显式指定收到的二进制数据类型

（6）没有`同源限制`，客户端可以与任意服务器通信。

（7）协议标识符是`ws（握手http）`（如果加密，则为`wss（tcp +TLS)`），服务器网址就是 URL。

WebSocket对象

`WebSocket对象`提供了用于`创建和管理WebSocket 连接`，以及可以通过该连接`发送和接收数据的 API`。

使用`WebSocket()`构造函数来构造一个`WebSocket` 。

### 为什么需要websocket ###

#### Hypertext Transfer Protocol (HTTP) 协议 ####

> 一种无状态的、应用层的、以请求/应答方式运行的协议，它使用可扩展的语义和自描述消息格式，与基于网络的超文本信息系统灵活的互动.

*  因为http 通信只能由客户端发起,服务器返回查询结果,HTTP 协议做不到服务器主动向客户端推送信息, 服务器有连续的状态变化，客户端要获知就非常麻烦。
 *  我们只能使用轮询：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
 *  轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）;

![4c93cb80d8f480f169bec60614a96426.png][]

![366234d1def1202eaa088a21fd62e518.png][]

### Chrome 请求列表：分析 WebSocket ###

#### 过滤器(过滤资源xhr js ws css ws等)： ####

*  按照类型： ws
 *  属性过滤： is：running

![6f9eafbcb4d271cc445cfce22c045115.png][]

![435eb9855efaca901e938e0ef007ffae.png][]

![822bf3a388db5a845be771f0145661ce.png][]

#### 表格列 Frames ####

Data: 消息负载。 如果消息为纯文本，直接显示。 二进制操作吗显示操作码名称和代码（Continuation Frame、 Binanry Frame、 Connection Close Frame、 Ping Frame或者Pong Frame）  
  
Length: 消息负载的长度 以字节为单位  
  
Time: 收到或者发送的时间。

#### 消息颜色 ####

*  发送到服务器的文本消息为浅绿色
 *  接收到的文本消息为白色
 *  WebSocket 操作码 为浅黄色
 *  错误为浅红色

![aac0b8f70863d3205f7ee82b2fd23f6e.png][]

### WbeSocket 的成本 对比http ###

1、实时性与可伸缩性。  
牺牲了简单性。

2、网络效率与无状态： 请求1基于请求2  
牺牲了简单性与可见性

![dca99eda12cfe76c34a5152ded289bb9.png][]

![dc9fc4a78e1e180a5b84e3548c1800d2.png][]

### websocket 的心跳保持 对比http ###

*  （http 长连接只能基于简单的超时（常见为65s））
 *  websocket 链接基于`ping/pong 心跳机制维持`

### 设计哲学： 在web约束下暴露tcp 给上层 ###

#### 元数据 ####

*  http 协议头部会存放元数据.
 *  websocket 上传输的应用层存放元数据

#### 基于帧： 不是基于字节流（http, tcp） ####

*  每一帧要么存放`字符数据`，要么承载`二进制`数据

#### 基于浏览器的同源策略模型个（非浏览器无效） ####

可以使用Access-Control-Allow-Origin 等头部

#### 基于`URI`、`子协议`支持```同主机``同端口```上的多个服务 ####

#### 帧格式示意图 ####

ABNF 描述的帧格式

![372b2b783a4faa6e2af8c3179d0813ae.png][]

ws-frame = frame-fin ; 1 bit in length
    
    frame-rsv1 ; 1 bit in length
    
    frame-rsv2 ; 1 bit in length
    
    frame-rsv3 ; 1 bit in length
    
    frame-opcode ; 4 bits in length
    
    frame-masked ; 1 bit in length
    
    frame-payload-length ; 3 种长度
    
    [ frame-masking-key ] ; 32 bits in length
    
    frame-payload-data ; n*8 bits in ; length, where ; n >= 0
    复制代码

红色: 2 字节必然存在的帧首部

![c4b6ef6b69dd7ae2620934a8a9eb446e.png][]

#### 数据帧格式： Rsv 保留值 ####

RSV1/RSV2/RSV3：默认为 0，仅当使用 extension 扩展时，由扩展决定其值

![3bab3248529aa9a819f607765b4a34a8.png][]

#### 数据帧格式：帧类型 ####

![b7de990c2e8374328a5fec5d790ddb88.png][]

*  持续帧  
      
    0: 继续前一帧
 *  非控制帧  
      
    1： 文本帧（utf-8）  
      
    2：二进制帧  
      
    3-7: 为非控制帧保留
 *  控制帧  
    8: 关闭帧  
    9: 心跳帧ping  
    A: 心跳帧pong  
    B-F:控制帧保留

#### URI 格式 ####

1、ws-uri: `ws://[host][:port][path][?query]`  
  
端口port默认 80  
  
2、wss-uri: `wss://[host][:port][path][?query]`  
端口port 默认443

客户端提供信息

host、port 主机端口  
  
schema: 是否基于SSL  
  
访问的资源：uri  
  
握手随机数：Sec-WebSocket-Key  
  
选择的子协议：Sec-WebSocket-Protocol  
  
扩展协议：Sec-WebSocket-Extensions  
  
CORS：Origin

![c18069f52f14ad07a9d7566790fc5d25.png][]

![070562c0e14943a43d7dd44d0dee6da7.png][]

#### 如何证明握手被服务器接受？预防意外 ####

请求中的 Sec-WebSocket-Key 随机数  
  
Sec-WebSocket-Key: A1EEou7Nnq6+BBZoAZqWlg==  
响应中的 Sec-WebSocket-Accept 证明值  
  
GUID（RFC4122）：258EAFA5-E914-47DA-95CA-C5AB0DC85B11

• 值构造规则：BASE64(SHA1(Sec-WebSocket-KeyGUID))

• 拼接值：A1EEou7Nnq6+BBZoAZqWlg==258EAFA5-E914-47DA-95CA-C5AB0DC85B11

• SHA1 值：713f15ece2218612fcadb1598281a35380d1790f

• BASE 64 值：cT8V7OIhhhL8rbFZgoGjU4DReQ8=

• 最终头部：Sec-WebSocket-Accept: cT8V7OIhhhL8rbFZgoGjU4DReQ8=

[4c93cb80d8f480f169bec60614a96426.png]: https://img-blog.csdnimg.cn/img_convert/4c93cb80d8f480f169bec60614a96426.png
[366234d1def1202eaa088a21fd62e518.png]: https://img-blog.csdnimg.cn/img_convert/366234d1def1202eaa088a21fd62e518.png
[6f9eafbcb4d271cc445cfce22c045115.png]: https://img-blog.csdnimg.cn/img_convert/6f9eafbcb4d271cc445cfce22c045115.png
[435eb9855efaca901e938e0ef007ffae.png]: https://img-blog.csdnimg.cn/img_convert/435eb9855efaca901e938e0ef007ffae.png
[822bf3a388db5a845be771f0145661ce.png]: https://img-blog.csdnimg.cn/img_convert/822bf3a388db5a845be771f0145661ce.png
[aac0b8f70863d3205f7ee82b2fd23f6e.png]: https://img-blog.csdnimg.cn/img_convert/aac0b8f70863d3205f7ee82b2fd23f6e.png
[dca99eda12cfe76c34a5152ded289bb9.png]: https://img-blog.csdnimg.cn/img_convert/dca99eda12cfe76c34a5152ded289bb9.png
[dc9fc4a78e1e180a5b84e3548c1800d2.png]: https://img-blog.csdnimg.cn/img_convert/dc9fc4a78e1e180a5b84e3548c1800d2.png
[372b2b783a4faa6e2af8c3179d0813ae.png]: https://img-blog.csdnimg.cn/img_convert/372b2b783a4faa6e2af8c3179d0813ae.png
[c4b6ef6b69dd7ae2620934a8a9eb446e.png]: https://img-blog.csdnimg.cn/img_convert/c4b6ef6b69dd7ae2620934a8a9eb446e.png
[3bab3248529aa9a819f607765b4a34a8.png]: https://img-blog.csdnimg.cn/img_convert/3bab3248529aa9a819f607765b4a34a8.png
[b7de990c2e8374328a5fec5d790ddb88.png]: https://img-blog.csdnimg.cn/img_convert/b7de990c2e8374328a5fec5d790ddb88.png
[c18069f52f14ad07a9d7566790fc5d25.png]: https://img-blog.csdnimg.cn/img_convert/c18069f52f14ad07a9d7566790fc5d25.png
[070562c0e14943a43d7dd44d0dee6da7.png]: https://img-blog.csdnimg.cn/img_convert/070562c0e14943a43d7dd44d0dee6da7.png