WebSocket Patterns

概览

WebSocket 是一种通信协议，提供了全双工通信通道，通过单个 TCP 连接实现。它使得客户端和服务器之间能够进行实时、事件驱动的通信，非常适合需要即时更新的应用，如聊天应用、实时仪表板和协作工具。

前提条件

• 理解 HTTP 协议和 REST APIs
• 了解 JavaScript/Node.js 或等效的后端语言
• 基本了解 TCP/IP 网络
• 熟悉异步编程模式

关键概念

WebSocket 基础

WebSocket 是一种协议，它：

• 提供持久的、全双工通信
• 使用单个 TCP 连接
• 在握手期间通过 HTTP/1.1 操作，然后升级
• 与 HTTP 轮询相比开销较低
• 支持文本和二进制数据

WebSocket 与 HTTP 轮询与 SSE 比较

特性	WebSocket	HTTP 轮询	服务器发送事件 (SSE)
方向	双向	客户端 → 服务器	仅服务器 → 客户端
连接	持久	每个请求新建	持久
开销	低	高	低
浏览器支持	优秀	优秀	优秀
二进制数据	是	是	否（仅限文本）
重连	手动	不适用	浏览器处理
用例	交互式实时	简单更新	单向流

何时使用 WebSocket：

• 实时聊天应用
• 实时协作工具
• 多人游戏
• 实时仪表板
• 股票交易平台

何时使用 HTTP 轮询：

• 简单、不频繁的更新
• 需要旧版浏览器支持
• 低复杂性要求

何时使用 SSE：

• 单向服务器到客户端更新
• 新闻源，通知
• 股票行情

连接生命周期

握手

WebSocket 连接始于一个 HTTP 升级请求：

GET /ws HTTP/1.1
Host: 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=

连接状态

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

// 0 = 连接中 - 连接尚未打开
console.log(ws.readyState === WebSocket.CONNECTING);

// 1 = 打开 - 连接已打开，准备就绪
ws.onopen = () => {
  console.log(ws.readyState === WebSocket.OPEN);
};

// 2 = 关闭中 - 连接正在关闭过程中
ws.onclose = () => {
  console.log(ws.readyState === WebSocket.CLOSING);
};

// 3 = 已关闭 - 连接已关闭
ws.onclose = () => {
  console.log(ws.readyState === WebSocket.CLOSED);
};

实施指南

基础 WebSocket 服务器 (Node.js)

…（此处省略中间代码和文本，保持原有格式不变）

安全考虑

WSS (WebSocket Secure)

…（此处省略中间代码和文本，保持原有格式不变）

测试

单元测试

…（此处省略中间代码和文本，保持原有格式不变）

监控和调试

日志记录

…（此处省略中间代码和文本，保持原有格式不变）

最佳实践

…（此处省略中间代码和文本，保持原有格式不变）

相关技能

…（此处省略中间代码和文本，保持原有格式不变）