WebSocket学习总结

news2025/6/1 6:36:09

WebSocket 是一种基于TCP的网络通信协议，允许浏览器和服务器之间进行全双工、实时、低延迟的双向数据传输。它突破了传统HTTP协议的限制（请求-响应模式），特别适合需要实时通信的场景（如聊天、实时数据推送、游戏等）。

核心特点

全双工通信
客户端和服务器可以同时发送和接收数据，无需等待对方的响应。
持久连接
连接建立后（通过HTTP握手），会保持打开状态，直到任意一方主动关闭，避免了频繁建立连接的开销。
低延迟
由于连接复用和实时传输，相比轮询或长轮询（Long Polling），延迟显著降低。
二进制和文本数据支持
可以传输文本（如JSON）和二进制数据（如图片、视频）。
跨域支持
原生支持跨域通信，无需额外配置（如CORS）。

工作原理

握手阶段（HTTP升级）
客户端通过HTTP请求发送升级协议头，服务器确认后，连接从HTTP升级为WebSocket：

// 客户端请求
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13

// 服务器响应
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

数据传输阶段
握手成功后，连接转为TCP通道，双方通过**帧（Frame）**格式交换数据，无需HTTP头部，开销极小。
连接关闭
任意一方发送关闭帧（Close Frame）终止连接。

与HTTP的对比

特性	HTTP	WebSocket
通信模式	请求-响应（半双工）	全双工
连接状态	短连接（每次请求新建）	持久连接
实时性	低（需轮询）	高（实时推送）
协议开销	高（每次请求带头部）	低（仅握手时用HTTP）
典型场景	静态资源、API调用	聊天、实时数据更新

应用场景

实时通信
- 即时聊天（如微信、QQ）、在线客服。
- 多人协作工具（如Google Docs的实时编辑）。
数据推送
- 股票行情、体育赛事比分、天气预报更新。
- 消息通知（如邮件、社交平台提醒）。
游戏与直播
- 实时多人游戏（如在线棋牌）。
- 音视频直播弹幕、互动功能。
物联网（IoT）
- 设备状态监控、远程控制（如智能家居）。

实现方式

客户端（浏览器）

使用JavaScript的WebSocket API：

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

// 连接打开时触发
ws.onopen = () => {
  ws.send('Hello, server!');
};

// 收到消息时触发
ws.onmessage = (event) => {
  console.log('Received:', event.data);
};

// 连接关闭时触发
ws.onclose = () => {
  console.log('Connection closed');
};