WebSocket 简介 #
什么是实时通信？ #
实时通信是指数据在产生后能够立即传输到接收方，实现即时交互的技术。在现代 Web 应用中，实时通信已经成为不可或缺的功能。
text
┌─────────────────────────────────────────────────────────────┐
│ 实时通信的应用场景 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 即时通讯 聊天应用、在线客服、社交平台 │
│ 协作办公 在线文档、白板协作、视频会议 │
│ 金融交易 股票行情、外汇交易、数字货币 │
│ 在线游戏 多人游戏、实时对战、游戏直播 │
│ 物联网 智能家居、工业监控、车联网 │
│ 数据大屏 实时监控、数据可视化、仪表盘 │
│ │
└─────────────────────────────────────────────────────────────┘
传统 HTTP 的局限 #
HTTP 请求-响应模式 #
text
┌─────────────────────────────────────────────────────────────┐
│ 传统 HTTP 模式 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ 客户端 │ │ 服务端 │ │
│ └────┬────┘ └────┬────┘ │
│ │ │ │
│ │ 1. 发起请求 │ │
│ │─────────────────────────>│ │
│ │ │ │
│ │ 2. 返回响应 │ │
│ │<─────────────────────────│ │
│ │ │ │
│ │ 3. 连接关闭 │ │
│ │ │ │
│ │
│ 问题： │
│ ❌ 只能客户端发起请求 │
│ ❌ 服务端无法主动推送 │
│ ❌ 每次请求都有头部开销 │
│ ❌ 实时性差 │
│ │
└─────────────────────────────────────────────────────────────┘
模拟实时的方案 #
text
┌─────────────────────────────────────────────────────────────┐
│ 传统模拟实时方案 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. 短轮询（Short Polling） │
│ ───────────────────────────────────────────────────── │
│ 客户端定时发送请求 │
│ 优点：实现简单 │
│ 缺点：延迟高、浪费资源 │
│ │
│ 2. 长轮询（Long Polling） │
│ ───────────────────────────────────────────────────── │
│ 服务端有数据才返回，否则挂起请求 │
│ 优点：比短轮询实时 │
│ 缺点：占用连接资源、实现复杂 │
│ │
│ 3. SSE（Server-Sent Events） │
│ ───────────────────────────────────────────────────── │
│ 服务端单向推送 │
│ 优点：原生支持、自动重连 │
│ 缺点：只能单向通信 │
│ │
│ 4. iframe 流 │
│ ───────────────────────────────────────────────────── │
│ 通过隐藏 iframe 实现流式传输 │
│ 优点：兼容性好 │
│ 缺点：性能差、不推荐 │
│ │
└─────────────────────────────────────────────────────────────┘
什么是 WebSocket？ #
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它于 2011 年被 IETF 标准化（RFC 6455），使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
核心定位 #
text
┌─────────────────────────────────────────────────────────────┐
│ WebSocket │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 全双工 │ │ 低延迟 │ │ 长连接 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 二进制支持 │ │ 协议标准 │ │ 广泛支持 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────┘
WebSocket 解决的问题 #
text
┌─────────────────────────────────────────────────────────────┐
│ WebSocket 解决的问题 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 传统 HTTP 问题： │
│ │
│ 1. 单向通信 │
│ 只能客户端发起请求 │
│ 服务端无法主动推送 │
│ │
│ 2. 头部开销大 │
│ 每次 HTTP 请求携带大量头部 │
│ Cookie、User-Agent 等 │
│ │
│ 3. 实时性差 │
│ 轮询方案延迟高 │
│ 资源浪费严重 │
│ │
│ WebSocket 解决方案： │
│ │
│ ✅ 全双工通信：客户端和服务端都能主动发送 │
│ ✅ 轻量协议：头部开销极小 │
│ ✅ 持久连接：一次握手，持续通信 │
│ ✅ 低延迟：实时双向数据传输 │
│ │
└─────────────────────────────────────────────────────────────┘
WebSocket 的历史 #
发展历程 #
text
2008年 ─── WebSocket 概念提出
│
│ HTML5 规范的一部分
│ 解决实时通信问题
│
2010年 ─── Google Chrome 首先支持
│
│ Chrome 4 实现
│ 其他浏览器跟进
│
2011年 ─── RFC 6455 发布
│
│ IETF 正式标准
│ 协议稳定
│
2012年 ─── 广泛浏览器支持
│
│ 所有主流浏览器支持
│ 移动端支持
│
至今 ─── 成为主流方案
│
│ 实时通信标准
│ 丰富的生态
协议版本演进 #
| 版本 | 时间 | 说明 |
|---|---|---|
| hixie-76 | 2010 | 早期草案版本 |
| hybi-00 | 2011 | 新草案开始 |
| hybi-10 | 2011 | 接近最终版 |
| RFC 6455 | 2011 | 正式标准版本 |
WebSocket 的核心特点 #
1. 全双工通信 #
text
┌─────────────────────────────────────────────────────────────┐
│ 全双工通信 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ 客户端 │◄──────────────►│ 服务端 │ │
│ └─────────┘ 双向数据流 └─────────┘ │
│ │
│ 客户端 → 服务端：发送消息、请求数据 │
│ 服务端 → 客户端：推送消息、实时更新 │
│ │
│ 示例：聊天应用 │
│ - 客户端发送消息 │
│ - 服务端广播给其他用户 │
│ - 双方同时进行，互不阻塞 │
│ │
└─────────────────────────────────────────────────────────────┘
2. 低延迟 #
text
┌─────────────────────────────────────────────────────────────┐
│ 延迟对比 │
├─────────────────────────────────────────────────────────────┤
│ │
│ HTTP 轮询： │
│ ───────────────────────────────────────────────────────── │
│ 请求 → 等待 → 响应 → 断开 → 请求... │
│ 延迟：1-3 秒（取决于轮询间隔） │
│ │
│ WebSocket： │
│ ───────────────────────────────────────────────────────── │
│ 握手 → 持续连接 → 即时通信 │
│ 延迟：毫秒级 │
│ │
│ 性能提升： │
│ ✅ 无需重复建立连接 │
│ ✅ 无需重复发送头部 │
│ ✅ 数据即时传输 │
│ │
└─────────────────────────────────────────────────────────────┘
3. 轻量协议 #
text
┌─────────────────────────────────────────────────────────────┐
│ 协议开销对比 │
├─────────────────────────────────────────────────────────────┤
│ │
│ HTTP 请求头部（约 400-800 字节）： │
│ ───────────────────────────────────────────────────────── │
│ GET /api/data HTTP/1.1 │
│ Host: example.com │
│ User-Agent: Mozilla/5.0... │
│ Accept: application/json │
│ Cookie: session=abc123... │
│ ...更多头部... │
│ │
│ WebSocket 数据帧（2-14 字节）： │
│ ───────────────────────────────────────────────────────── │
│ ┌─────┬─────┬─────────────┐ │
│ │ FIN │ RSV │ Opcode │ 1 字节 │
│ ├─────┼─────┼─────────────┤ │
│ │Mask │ Payload Len │ 1 字节 │
│ ├─────┴───────────────────┤ │
│ │ Masking Key (可选) │ 0-4 字节 │
│ ├─────────────────────────┤ │
│ │ Payload Data │ 实际数据 │
│ └─────────────────────────┘ │
│ │
│ 开销减少：90% 以上 │
│ │
└─────────────────────────────────────────────────────────────┘
4. 二进制支持 #
text
┌─────────────────────────────────────────────────────────────┐
│ 数据格式支持 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 文本数据： │
│ ───────────────────────────────────────────────────────── │
│ JSON 字符串 │
│ 普通文本消息 │
│ XML 数据 │
│ │
│ 二进制数据： │
│ ───────────────────────────────────────────────────────── │
│ ArrayBuffer │
│ Blob │
│ 文件传输 │
│ 音视频流 │
│ 游戏数据 │
│ │
│ 示例： │
│ // 发送文本 │
│ ws.send('Hello World'); │
│ │
│ // 发送二进制 │
│ const buffer = new ArrayBuffer(1024); │
│ ws.send(buffer); │
│ │
└─────────────────────────────────────────────────────────────┘
5. 跨域支持 #
text
┌─────────────────────────────────────────────────────────────┐
│ 跨域特性 │
├─────────────────────────────────────────────────────────────┤
│ │
│ WebSocket 不受同源策略限制： │
│ │
│ ✅ 可以连接任意域名的 WebSocket 服务 │
│ ✅ 通过 Origin 头部进行安全验证 │
│ ✅ 服务端可以控制允许的来源 │
│ │
│ 示例： │
│ // 网页在 https://example.com │
│ // 可以连接到 wss://api.other.com/ws │
│ │
│ 服务端验证： │
│ const origin = request.headers.origin; │
│ if (allowedOrigins.includes(origin)) { │
│ // 允许连接 │
│ } │
│ │
└─────────────────────────────────────────────────────────────┘
WebSocket vs 其他方案 #
对比分析 #
| 特性 | WebSocket | HTTP 轮询 | 长轮询 | SSE |
|---|---|---|---|---|
| 通信方式 | 全双工 | 半双工 | 半双工 | 单向 |
| 实时性 | 极高 | 低 | 中 | 高 |
| 连接开销 | 低 | 高 | 中 | 低 |
| 浏览器支持 | 广泛 | 全部 | 全部 | 较好 |
| 二进制支持 | ✅ | ✅ | ✅ | ❌ |
| 断线重连 | 需实现 | 无需 | 需实现 | 内置 |
| 复杂度 | 中 | 低 | 中 | 低 |
选择建议 #
text
┌─────────────────────────────────────────────────────────────┐
│ 技术选型指南 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 选择 WebSocket 的场景： │
│ ✅ 需要双向实时通信 │
│ ✅ 高频消息推送 │
│ ✅ 在线游戏、协作应用 │
│ ✅ 需要传输二进制数据 │
│ ✅ 即时通讯应用 │
│ │
│ 选择 SSE 的场景： │
│ ✅ 只需要服务端推送 │
│ ✅ 实时通知、新闻推送 │
│ ✅ 简单场景，快速实现 │
│ │
│ 选择轮询的场景： │
│ ✅ 兼容性要求极高 │
│ ✅ 更新频率很低 │
│ ✅ 简单场景，快速原型 │
│ │
└─────────────────────────────────────────────────────────────┘
WebSocket 的应用场景 #
1. 即时通讯 #
text
┌─────────────────────────────────────────────────────────────┐
│ 即时通讯应用 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 用户A ──┐ │
│ │ │
│ ├──► 聊天服务器 ──► 用户B │
│ │ │ │
│ 用户C ──┘ └──► 用户D │
│ │
│ 功能： │
│ - 实时消息收发 │
│ - 在线状态同步 │
│ - 正在输入提示 │
│ - 消息已读回执 │
│ - 群组聊天 │
│ │
└─────────────────────────────────────────────────────────────┘
2. 协作办公 #
text
┌─────────────────────────────────────────────────────────────┐
│ 协作办公应用 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 在线文档： │
│ - 多人同时编辑 │
│ - 实时同步内容 │
│ - 光标位置显示 │
│ │
│ 白板协作： │
│ - 实时绘制同步 │
│ - 多人标注 │
│ - 操作回放 │
│ │
│ 视频会议： │
│ - 实时音视频 │
│ - 屏幕共享 │
│ - 互动白板 │
│ │
└─────────────────────────────────────────────────────────────┘
3. 金融交易 #
text
┌─────────────────────────────────────────────────────────────┐
│ 金融交易应用 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 行情推送： │
│ - 实时股票价格 │
│ - K 线图更新 │
│ - 深度数据 │
│ │
│ 交易系统： │
│ - 实时订单状态 │
│ - 成交推送 │
│ - 风控预警 │
│ │
│ 要求： │
│ - 毫秒级延迟 │
│ - 高可靠性 │
│ - 数据完整性 │
│ │
└─────────────────────────────────────────────────────────────┘
4. 在线游戏 #
text
┌─────────────────────────────────────────────────────────────┐
│ 在线游戏应用 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 多人游戏： │
│ - 玩家位置同步 │
│ - 动作实时传输 │
│ - 游戏状态同步 │
│ │
│ 实时对战： │
│ - 低延迟要求 │
│ - 二进制数据传输 │
│ - 高频消息 │
│ │
│ 游戏直播： │
│ - 弹幕互动 │
│ - 礼物特效 │
│ - 观众互动 │
│ │
└─────────────────────────────────────────────────────────────┘
5. 物联网 #
text
┌─────────────────────────────────────────────────────────────┐
│ 物联网应用 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 智能家居： │
│ - 设备状态同步 │
│ - 远程控制 │
│ - 场景联动 │
│ │
│ 工业监控： │
│ - 传感器数据 │
│ - 实时告警 │
│ - 远程诊断 │
│ │
│ 车联网： │
│ - 车辆位置 │
│ - 远程控制 │
│ - 实时导航 │
│ │
└─────────────────────────────────────────────────────────────┘
浏览器支持 #
支持情况 #
text
┌─────────────────────────────────────────────────────────────┐
│ 浏览器支持情况 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 桌面浏览器： │
│ ───────────────────────────────────────────────────────── │
│ Chrome 4+ ✅ 完全支持 │
│ Firefox 4+ ✅ 完全支持 │
│ Safari 5+ ✅ 完全支持 │
│ Edge 12+ ✅ 完全支持 │
│ IE 10+ ⚠️ 部分支持（建议使用 polyfill） │
│ │
│ 移动浏览器： │
│ ───────────────────────────────────────────────────────── │
│ iOS Safari 4.2+ ✅ 完全支持 │
│ Android 4.4+ ✅ 完全支持 │
│ Chrome 4+ ✅ 完全支持 │
│ │
│ 兼容性检测： │
│ if ('WebSocket' in window) { │
│ // 支持 WebSocket │
│ } else { │
│ // 不支持，使用降级方案 │
│ } │
│ │
└─────────────────────────────────────────────────────────────┘
学习路径 #
text
入门阶段
├── WebSocket 简介（本文）
├── WebSocket 基础使用
└── WebSocket 协议详解
进阶阶段
├── 服务端实现
├── 客户端实现
└── 高级主题
实战阶段
├── 安全最佳实践
├── 性能优化
└── 实际项目应用
下一步 #
现在你已经了解了 WebSocket 的基本概念，接下来学习 WebSocket 基础使用，开始你的实时通信之旅！
最后更新：2026-03-29