WebSocket #

什么是 WebSocket？ #

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它于 2011 年被 IETF 标准化（RFC 6455），使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                         WebSocket                            │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  全双工      │  │  低延迟      │  │  长连接      │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  二进制支持  │  │  协议标准    │  │  广泛支持    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

WebSocket 的优势 #

优势 说明
全双工通信 客户端和服务端都能主动发送消息
低延迟 毫秒级实时通信
轻量协议 头部开销极小（2-14 字节）
二进制支持 支持文本和二进制数据传输
跨域支持 不受同源策略限制
广泛支持 所有主流浏览器支持

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 WebSocket：

1. 入门基础 #

主题 描述 文档链接
WebSocket 简介 WebSocket 的历史发展、核心特点、应用场景 intro.md
WebSocket 基础 连接建立、消息收发、事件处理 basics.md
WebSocket 协议 协议细节、帧格式、握手过程 protocol.md

2. 客户端与服务端 #

主题 描述 文档链接
客户端实现 浏览器、Node.js、移动端客户端开发 client.md
服务端实现 Node.js、Python、Go、Java 服务器搭建 server.md

3. 高级主题 #

主题 描述 文档链接
安全最佳实践 认证授权、数据加密、安全策略 security.md
高级特性 性能优化、集群方案、消息队列 advanced.md

学习路径 #

入门阶段（WebSocket 新手） #

text 
WebSocket 简介 → 基础使用 → 协议详解
  1. 了解 WebSocket 的基本概念和优势
  2. 学习创建连接和收发消息
  3. 理解 WebSocket 协议原理

进阶阶段（WebSocket 熟练） #

text 
客户端实现 → 服务端实现 → 安全实践
  1. 掌握多平台客户端开发
  2. 学习服务端架构设计
  3. 理解安全认证机制

高级阶段（WebSocket 专家） #

text 
高级特性 → 性能优化 → 生产部署
  1. 掌握集群和分布式方案
  2. 学习性能优化技巧
  3. 实现生产级应用

WebSocket vs 其他方案 #

对比分析 #

特性 WebSocket HTTP 轮询 长轮询 SSE
通信方式 全双工 半双工 半双工 单向
实时性 极高 低 中 高
连接开销 低 高 中 低
浏览器支持 广泛 全部 全部 较好
二进制支持 ✅ ✅ ✅ ❌
断线重连 需实现 无需 需实现 内置

选择建议 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    技术选型指南                              │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  选择 WebSocket 的场景：                                     │
│  ✅ 需要双向实时通信                                        │
│  ✅ 高频消息推送                                            │
│  ✅ 在线游戏、协作应用                                      │
│  ✅ 需要传输二进制数据                                      │
│  ✅ 即时通讯应用                                            │
│                                                              │
│  选择 SSE 的场景：                                           │
│  ✅ 只需要服务端推送                                        │
│  ✅ 实时通知、新闻推送                                      │
│  ✅ 简单场景，快速实现                                      │
│                                                              │
│  选择轮询的场景：                                            │
│  ✅ 兼容性要求极高                                          │
│  ✅ 更新频率很低                                            │
│  ✅ 简单场景，快速原型                                      │
│                                                              │
└─────────────────────────────────────────────────────────────┘

快速开始 #

浏览器客户端 #

javascript 
const socket = new WebSocket('wss://example.com/ws');

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

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

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

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

Node.js 服务端 #

javascript 
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('新客户端连接');
  
  ws.on('message', function message(data) {
    console.log('收到消息:', data.toString());
    ws.send(`服务器收到: ${data}`);
  });
  
  ws.send('欢迎连接 WebSocket 服务器！');
});

console.log('WebSocket 服务器运行在 ws://localhost:8080');

核心概念 #

连接状态 #

javascript 
WebSocket.CONNECTING  // 0 - 连接中
WebSocket.OPEN        // 1 - 已连接
WebSocket.CLOSING     // 2 - 关闭中
WebSocket.CLOSED      // 3 - 已关闭

数据格式 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    数据格式支持                              │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  文本数据：                                                  │
│  ─────────────────────────────────────────────────────────  │
│  JSON 字符串                                                │
│  普通文本消息                                               │
│  XML 数据                                                   │
│                                                              │
│  二进制数据：                                                │
│  ─────────────────────────────────────────────────────────  │
│  ArrayBuffer                                                │
│  Blob                                                       │
│  文件传输                                                   │
│  音视频流                                                   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

应用场景 #

1. 即时通讯 #

  • 实时消息收发
  • 在线状态同步
  • 正在输入提示
  • 消息已读回执

2. 协作办公 #

  • 在线文档协作
  • 白板实时同步
  • 视频会议

3. 金融交易 #

  • 实时股票行情
  • 外汇交易
  • 数字货币

4. 在线游戏 #

  • 多人游戏
  • 实时对战
  • 游戏直播

5. 物联网 #

  • 智能家居
  • 工业监控
  • 车联网

浏览器支持 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    浏览器支持情况                            │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  桌面浏览器：                                                │
│  Chrome      4+     ✅ 完全支持                             │
│  Firefox     4+     ✅ 完全支持                             │
│  Safari      5+     ✅ 完全支持                             │
│  Edge        12+    ✅ 完全支持                             │
│                                                              │
│  移动浏览器：                                                │
│  iOS Safari  4.2+   ✅ 完全支持                             │
│  Android     4.4+   ✅ 完全支持                             │
│                                                              │
└─────────────────────────────────────────────────────────────┘

学习资源 #

开始学习 #

准备好了吗？让我们从 WebSocket 简介 开始你的实时通信学习之旅！

最后更新：2026-03-29