WebSocket协议-CSDN博客

1. WebSocket 是什么？

本质：一种网络通信协议（像HTTP一样），但比HTTP更高级。
核心特点：双向实时通信（HTTP只能客户端主动请求，WebSocket 可以服务器主动推数据）。
类比：
- HTTP 像打电话（问一句答一句，问完挂断）。
- WebSocket 像微信聊天（双方随时发消息，一直连着）。

2. 为什么需要 WebSocket？

HTTP 的缺点：
- 每次请求都要重新连接，效率低。
- 服务器不能主动推送数据（比如聊天消息、股票实时价格）。
WebSocket 的解决：
- 建立一次连接，长期保持。
- 服务器和客户端随时互相发数据。

3. WebSocket 工作原理

步骤1：握手（像“打招呼”）

客户端先发一个 HTTP 升级请求（带特殊头信息）：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

服务器同意后回复：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

✅ 握手成功后，连接就从 HTTP 升级为 WebSocket 了！

步骤2：双向通信

之后双方通过 WebSocket 数据帧（Frame）传输数据，格式例如：
```
FIN=1, Opcode=1, Payload="Hello Server!"
```
- Opcode：标记数据类型（文本/二进制/关闭连接等）。
- Payload：实际传输的数据。

在这里插入图片描述

4. WebSocket 和 HTTP 的区别

特性	HTTP	WebSocket
连接方式	短连接（每次请求新建）	长连接（一次连接持续通信）
通信方向	仅客户端→服务器	双向实时通信
协议头	简单（Header+Body）	复杂（数据帧+掩码）
适用场景	网页浏览、API调用	聊天室、游戏、实时监控

5. WebSocket 的典型应用

在线聊天（微信、QQ网页版）
实时游戏（王者荣耀的队友同步）
股票行情（股价实时推送）
协同编辑（多人同时编辑文档）

6. 简单代码示例（前端）

// 1. 创建WebSocket连接
const socket = new WebSocket("wss://example.com/chat");

// 2. 接收服务器消息
socket.onmessage = (event) => {
  console.log("收到消息:", event.data);
};

// 3. 发送消息给服务器
socket.send("Hello Server!");

// 4. 关闭连接
socket.close();