WebSocket 深度解析

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务端主动向客户端推送数据，彻底改变了 HTTP “请求-响应”的单向通信模式。

在 WebSocket 出现之前，实现“实时通信”必须依赖以下两种变通方案：

WebSocket 的生命周期分为两个阶段：握手升级 和 数据传输。

握手过程 (Handshake)

客户端发送带有 Upgrade: websocket 头的 HTTP 请求，服务器若支持则返回 101 Switching Protocols，协议即从 HTTP 升级为 WebSocket。

readyState 连接状态

WebSocket 对象的 readyState 属性表示当前连接状态：

数据帧结构 (Data Frame)

连接建立后，双方通过“帧”交换数据。每帧包含极小的头部（最小 2 字节）：

HTTP vs WebSocket vs SSE

性能对比基准

基础连接示例

在浏览器中使用 WebSocket 非常简单，原生 API 就足够强大：

// 1. 创建连接
const ws = new WebSocket('wss://echo.websocket.org');

// 2. 连接成功回调
ws.onopen = () => {
    console.log('连接已建立！');
    ws.send('Hello Server!'); // 发送数据
};

// 3. 接收消息回调
ws.onmessage = (event) => {
    console.log('收到消息：', event.data);
};

// 4. 连接关闭回调
ws.onclose = (event) => {
    console.log(`连接关闭：码=${event.code} 原因=${event.reason}`);
};

// 5. 错误处理
ws.onerror = (error) => {
    console.error('连接错误：', error);
};

完整示例（带重连与心跳）

class WebSocketClient {
    constructor(url) {
        this.url = url;
        this.ws = null;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        this.heartbeatInterval = null;
    }
    
    connect() {
        this.ws = new WebSocket(this.url);
        
        this.ws.onopen = () => {
            console.log('连接成功');
            this.reconnectAttempts = 0;
            this.startHeartbeat();
        };
        
        this.ws.onclose = () => {
            this.stopHeartbeat();
            this.reconnect();
        };
    }
    
    startHeartbeat() {
        this.heartbeatInterval = setInterval(() => {
            if (this.ws.readyState === WebSocket.OPEN) {
                this.ws.send(JSON.stringify({ type: 'ping' }));
            }
        }, 30000); // 每 30 秒发送心跳
    }
    
    reconnect() {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            const delay = Math.pow(2, this.reconnectAttempts) * 1000; // 指数退避
            setTimeout(() => {
                this.reconnectAttempts++;
                this.connect();
            }, delay);
        }
    }
}

Node.js 示例（使用 ws 库）

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

wss.on('connection', (ws, req) => {
    const ip = req.socket.remoteAddress;
    console.log(`客户端连接: ${ip}`);
    
    // 接收消息
    ws.on('message', (data) => {
        console.log(`收到: ${data}`);
        // 广播给所有客户端
        wss.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(data);
            }
        });
    });
    
    // 心跳检测
    ws.isAlive = true;
    ws.on('pong', () => { ws.isAlive = true; });
});

// 定时检查连接状态
setInterval(() => {
    wss.clients.forEach(ws => {
        if (!ws.isAlive) return ws.terminate();
        ws.isAlive = false;
        ws.ping();
    });
}, 30000);

Python 示例（使用 websockets 库）

import asyncio
import websockets

async def handler(websocket, path):
    async for message in websocket:
        print(f"收到: {message}")
        await websocket.send(f"回复: {message}")

async def main():
    async with websockets.serve(handler, "localhost", 8080):
        await asyncio.Future()  # 永远运行

asyncio.run(main())

WSS 加密传输

生产环境必须使用 wss:// 协议，它是 WebSocket 的 TLS 加密版本，类似于 HTTPS：

• 数据加密传输，防止窃听
• 防止中间人攻击 (MITM)
• 确保身份验证

Origin 来源验证

服务端应该检查 HTTP 握手时的 Origin 头，防止跨站 WebSocket 劫持 (CSWSH)：

// Node.js 服务端验证 Origin
wss.on('connection', (ws, req) => {
    const origin = req.headers.origin;
    const allowedOrigins = ['https://example.com', 'https://app.example.com'];
    
    if (!allowedOrigins.includes(origin)) {
        ws.close(1008, 'Origin not allowed');
        return;
    }
});

认证机制

WebSocket 不支持自定义头部，常用认证方式：

const ws = new WebSocket(
    'wss://api.com/ws?token=xxx'
);

ws.onopen = () => {
    ws.send(JSON.stringify({
        type: 'auth',
        token: 'xxx'
    }));
};

浏览器开发者工具

• Chrome DevTools：打开 Network 面板 → 筛选 WS → 查看 Messages 选项卡
• Firefox：网络面板 → 筛选 WS → 可查看实时消息流
• 在线测试工具：websocket.org/echo、piesocket.com/websocket-tester

常用关闭码参考

WebSocket 子协议

客户端可在握手时通过 Sec-WebSocket-Protocol 头声明支持的子协议：

const ws = new WebSocket('wss://api.com/ws', ['graphql-ws', 'json']);

// 检查服务器选择的子协议
ws.onopen = () => {
    console.log('Selected protocol:', ws.protocol);
};

常见子协议

扩展 (Extensions)

permessage-deflate 是最常用的扩展，提供消息压缩功能，可减少 60-80% 带宽消耗。

浏览器兼容性