【无标题】

WebSocket 是什么？

WebSocket 是一种在单个 TCP 连接 上进行全双工通信 的网络协议。它使得客户端和服务器之间可以进行持久性、双向的实时数据交换。

主要特点

1. 双向通信

• 不同于 HTTP 的请求-响应模式
• 服务器可以主动向客户端推送数据
• 客户端也可以随时向服务器发送数据

2. 低延迟

• 建立连接后，通信头部开销很小
• 适合实时应用（如聊天、游戏、股票行情）

3. 持久连接

• 一次握手，长久连接
• 避免重复建立连接的开销

与 HTTP 对比

特性	HTTP	WebSocket
通信模式	请求-响应	全双工
连接	短连接	长连接
头部开销	每次请求都带完整头部	初始握手后头部很小
服务器推送	需要轮询/长轮询	原生支持

连接建立过程

握手阶段（HTTP Upgrade）

客户端 → 服务器：
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

服务器 → 客户端：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

数据帧格式

WebSocket 数据以帧为单位传输：

0                   1                   2                   3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |   (if payload len==126/127)   |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
|     Extended payload length continued, if payload len == 127  |
+ - - - - - - - - - - - - - - - +-------------------------------+
|                               |Masking-key, if MASK set to 1  |
+-------------------------------+-------------------------------+
| Masking-key (continued)       |          Payload Data         |
+-------------------------------- - - - - - - - - - - - - - - - +
:                     Payload Data continued ...                :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|                     Payload Data continued ...                |
+---------------------------------------------------------------+

使用示例

客户端（JavaScript）

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/chat');

// 连接打开
socket.onopen = function(event) {
    console.log('连接已建立');
    socket.send('Hello Server!');
};

// 接收消息
socket.onmessage = function(event) {
    console.log('收到消息:', event.data);
};

// 连接关闭
socket.onclose = function(event) {
    console.log('连接关闭');
};

// 错误处理
socket.onerror = function(error) {
    console.error('WebSocket 错误:', error);
};

服务器端（Node.js 示例）

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
    console.log('客户端已连接');
    
    // 接收消息
    socket.on('message', (message) => {
        console.log('收到:', message);
        
        // 发送消息
        socket.send(`服务器回复: ${message}`);
    });
    
    // 连接关闭
    socket.on('close', () => {
        console.log('客户端断开连接');
    });
});

适用场景

1. 实时聊天应用
2. 在线游戏
3. 实时数据监控（股票、物流）
4. 协同编辑工具
5. 实时通知推送
6. 物联网设备控制

安全性

• 使用 wss://（WebSocket Secure）进行加密通信
• 同源策略限制
• 可结合 Token 进行身份验证

浏览器支持

• 现代浏览器全面支持
• IE 10+ 支持