今天想和大家聊聊 WebSocket 这个在实时 Web 应用里绕不开的技术。很多刚接触的朋友会觉得它神秘，其实用 Chrome 开发者工具一分析，就会发现它既强大又直观。我们先从最基础的握手过程看起。

打开 Chrome DevTools，切换到 Network 面板，然后访问一个使用了 WebSocket 的页面。你会看到在众多 HTTP 请求中，有一个类型为 websocket 的连接。点开它，在 “Headers” 标签页下，就能看到整个升级握手的过程。

一个典型的 WebSocket 握手始于客户端发送一个带有 Upgrade: websocket 和 Connection: Upgrade 头部的 HTTP GET 请求。服务端同意升级后，会返回 101 Switching Protocols 状态码。这个过程在 Network 面板里一目了然，比单纯的文档描述清晰多了。

那么，为什么要用 WebSocket 而不是传统的 HTTP 轮询呢？我们可以简单对比一下：

1. 连接方式：HTTP 轮询需要客户端不断发起新的请求来“询问”服务器是否有新数据，无论有没有数据，请求都会发生。而 WebSocket 在初次握手后，就建立了一个持久化的全双工通道，数据可以随时从任一端推送。
2. 开销：轮询每次请求都携带完整的 HTTP 头部（如 Cookie、User-Agent），浪费带宽。WebSocket 在建立连接后，传输的数据帧头部极小，通常只有几个字节。
3. 实时性：轮询有延迟，取决于轮询间隔。间隔设短了，服务器压力大；设长了，消息不实时。WebSocket 是真正的实时推送，消息到达即传输。
4. 服务器压力：高频率的轮询会给服务器造成巨大的无意义开销。WebSocket 连接虽然持久占用资源，但只有在真正有数据交互时才会消耗处理能力。

理解了原理，我们来看看如何用 TypeScript 实现一个健壮的 WebSocket 客户端。一个生产可用的客户端不能只是简单的 new WebSocket()，还需要状态管理、自动重连、心跳检测等机制。

下面是一个包含核心功能的 TypeScript 类示例：

// 定义连接状态枚举，便于状态管理
enum ConnectionState {
  CONNECTING = 'CONNECTING',
  OPEN = 'OPEN',
  CLOSING = 'CLOSING',
  CLOSED = 'CLOSED',
}

// 定义消息类型，使用泛型增强灵活性
interface WebSocketMessage<T = any> {
  type: string;
  payload: T;
}

class RobustWebSocketClient {
  private ws: WebSocket | null = null;
  private state: ConnectionState = ConnectionState.CLOSED;
  private reconnectAttempts: number = 0;
  private maxReconnectAttempts: number = 5;
  private heartbeatInterval: number = 30000; // 30秒心跳
  private heartbeatTimer: NodeJS.Timeout | null = null;
  private url: string;

  constructor(url: string) {
    this.url = url;
    this.connect();
  }

  // 建立连接
  private connect(): void {
    if (this.state === ConnectionState.CONNECTING || this.state === ConnectionState.OPEN) {
      return;
    }
    this.state = ConnectionState.CONNECTING;
    this.ws = new WebSocket(this.url);

    this.ws.onopen = () => this.onOpen();
    this.ws.onmessage = (event) => this.onMessage(event);
    this.ws.onerror = (error) => this.onError(error);
    this.ws.onclose = (event) => this.onClose(event);
  }

  private onOpen(): void {
    console.log('WebSocket 连接已建立');
    this.state = ConnectionState.OPEN;
    this.reconnectAttempts = 0; // 连接成功，重置重连计数
    this.startHeartbeat();
  }

  private onMessage(event: MessageEvent): void {
    // 处理心跳回应
    if (event.data === 'pong') {
      return;
    }

    try {
      // 假设我们使用 JSON 格式传输结构化数据
      const message: WebSocketMessage = JSON.parse(event.data);
      this.handleMessage(message);
    } catch (e) {
      console.error('消息解析失败:', e, '原始数据:', event.data);
      // 这里可以处理二进制数据
      if (event.data instanceof ArrayBuffer || event.data instanceof Blob) {
        this.handleBinaryData(event.data);
      }
    }
  }

  private handleMessage(message: WebSocketMessage): void {
    // 根据 message.type 分发处理不同的业务逻辑
    console.log('收到消息:', message);
  }

  private handleBinaryData(data: ArrayBuffer | Blob): void {
    // 处理二进制数据，例如图片、音频等
    console.log('收到二进制数据，大小:', data instanceof ArrayBuffer ? data.byteLength : data.size);
    // 可以进行反序列化等操作
  }

  private onError(error: Event): void {
    console.error('WebSocket 错误:', error);
  }

  private onClose(event: CloseEvent): void {
    console.log(`连接关闭，代码: ${event.code}, 原因: ${event.reason}`);
    this.state = ConnectionState.CLOSED;
    this.stopHeartbeat();

    // 非正常关闭且未超过最大重试次数，则尝试重连
    if (event.code !== 1000 && this.reconnectAttempts < this.maxReconnectAttempts) {
      const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000); // 指数退避，最大30秒
      console.log(`将在 ${delay}ms 后尝试第 ${this.reconnectAttempts + 1} 次重连`);
      setTimeout(() => {
        this.reconnectAttempts++;
        this.connect();
      }, delay);
    }
  }

  // 发送消息，支持文本和二进制
  public send(data: string | ArrayBuffer | Blob): boolean {
    if (this.state !== ConnectionState.OPEN || !this.ws) {
      console.warn('连接未就绪，无法发送消息');
      return false;
    }
    try {
      this.ws.send(data);
      return true;
    } catch (e) {
      console.error('发送消息失败:', e);
      return false;
    }
  }

  public sendJson(message: WebSocketMessage): boolean {
    return this.send(JSON.stringify(message));
  }

  // 心跳机制，保持连接活跃并检测死连接
  private startHeartbeat(): void {
    this.stopHeartbeat();
    this.heartbeatTimer = setInterval(() => {
      if (this.state === ConnectionState.OPEN && this.ws) {
        this.ws.send('ping'); // 发送简单的心跳包
        // 注意：实际生产环境可能需要更复杂的心跳确认机制
      }
    }, this.heartbeatInterval);
  }

  private stopHeartbeat(): void {
    if (this.heartbeatTimer) {
      clearInterval(this.heartbeatTimer);
      this.heartbeatTimer = null;
    }
  }

  // 主动关闭连接
  public close(code?: number, reason?: string): void {
    this.state = ConnectionState.CLOSING;
    this.stopHeartbeat();
    if (this.ws) {
      this.ws.close(code || 1000, reason);
    }
  }
}

// 使用示例
const client = new RobustWebSocketClient('ws://your-websocket-server.com');
// 发送一个JSON消息
client.sendJson({ type: 'greeting', payload: 'Hello Server!' });

这个客户端类实现了几个关键点：使用枚举管理状态、指数退避算法进行自动重连、以及简单的心跳检测。其中，重连的指数退避算法时间复杂度是 O(1)，因为它只是计算一个延迟时间，不涉及循环或递归。

对于服务端，以 Node.js 的 ws 库为例，一个支持基础广播和连接管理的服务端代码如下：

import WebSocket, { WebSocketServer } from 'ws';
import http from 'http';

// 创建 HTTP 服务器，WebSocket 服务将附加其上
const server = http.createServer();
const wss = new WebSocketServer({ server });

// 存储所有活跃连接
const clients = new Set<WebSocket>();

wss.on('connection', (ws: WebSocket, request: http.IncomingMessage) => {
  console.log('新的客户端连接');
  clients.add(ws);

  // 监听客户端消息
  ws.on('message', (data: WebSocket.RawData, isBinary: boolean) => {
    console.log(`收到${isBinary ? '二进制' : '文本'}消息`);
    
    // 简单广播给所有其他客户端
    clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data, { binary: isBinary });
      }
    });
  });

  // 连接关闭时清理
  ws.on('close', () => {
    console.log('客户端断开连接');
    clients.delete(ws);
  });

  // 发送欢迎消息
  ws.send(JSON.stringify({ type: 'welcome', payload: 'Connected to server!' }));
});

server.listen(8080, () => {
  console.log('WebSocket 服务器运行在 ws://localhost:8080');
});

接下来聊聊性能。当消息量很大时，文本格式的 JSON 序列化和网络传输会成为瓶颈。我们可以考虑对消息进行压缩。使用 Chrome Performance 面板可以直观看到优化效果。

1. 在优化前，先使用 Performance 面板录制一段高频发送 JSON 消息的操作，观察 Event: message 的频率和主线程的负载。
2. 然后，我们可以在发送前对消息字符串进行压缩（例如使用 pako 库进行 gzip 压缩，注意浏览器端压缩消耗 CPU，需权衡），或者改用更高效的二进制序列化格式，如 Protocol Buffers 或 MessagePack。
3. 再次录制性能，对比 Event: message 的处理时长和网络吞吐量。通常会发现，虽然增加了编码/解码的 CPU 时间（对于强格式化的 Protobuf 解码，时间复杂度接近 O(n)，n 为字段数量），但网络传输时间大幅减少，整体吞吐量得到提升，尤其是在移动网络环境下。

安全是另一个重中之重。首要原则是：生产环境务必使用 WSS（WebSocket Secure），即基于 TLS 的 WebSocket。这能防止中间人攻击和流量窥探。在 Nginx 中配置 WSS 代理很常见：

location /websocket/ {
    proxy_pass http://backend_ws_server;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    # 重要：设置合理的超时时间
    proxy_read_timeout 3600s;
    proxy_send_timeout 3600s;
}

其次，要防范 WebSocket 可能引发的 CSRF（跨站请求伪造）。虽然 WebSocket 不受同源策略中“限制跨域读操作”的影响（因为它本身就是一个“写”通道），但浏览器在发起 WebSocket 握手时仍然会携带目标域下的 Cookie。如果用户的认证信息保存在 Cookie 中，恶意网站就可以伪造 WebSocket 连接来以用户身份执行操作。

防护措施包括：

1. 使用 Origin 头部验证。在握手请求中，浏览器会发送 Origin 头。服务端必须验证此 Origin 是否在允许的域名列表内。
2. 使用 Token 认证而非 Cookie。在连接建立时，通过 URL 参数或第一个消息传递一个一次性或短期的 Token 进行认证，而不是依赖浏览器自动发送的 Cookie。

最后，结合实践经验，我总结了一个 『生产环境 WebSocket 应用 Checklist』，包含了五个关键要点：

1. 连接超时与保活设置：客户端和服务端都需要设置合理的心跳间隔（如 25-30 秒）和超时时间（如 3 倍心跳间隔）。这能及时清理死连接，释放资源。Nginx 的 proxy_read_timeout 也需要相应调整。

2. 完善的连接状态管理与重试：像前面代码所示，必须明确管理连接的不同状态（连接中、已打开、关闭中、已关闭）。重试逻辑要采用指数退避策略，避免网络瞬时波动或服务端重启时客户端请求雪崩。

3. 内存泄漏排查：服务端尤其要注意。确保在 connection close 或 error 事件中，将客户端连接从全局的 Map 或 Set 中移除，并清除与之相关的所有定时器和监听器。可以使用 Node.js 的 --inspect 参数结合 Chrome DevTools 的 Memory 面板定期抓取堆快照，检查 WebSocket 对象是否异常累积。

4. 消息边界与序列化协议：WebSocket 是基于消息帧的，天然有边界。但要设计好应用层的消息协议。对于复杂数据，选择高效的序列化方式（如 JSON、MsgPack、Protobuf）。对于二进制流（如文件分片），要设计好分帧和重组逻辑。

5. 监控与降级：对 WebSocket 连接的建立成功率、消息往返延迟（RTT）、错误码分布进行监控。制定降级方案，例如在 WebSocket 连接失败或不可用时，自动降级为长轮询（Long Polling）或服务器发送事件（SSE），保证核心功能的可用性。

WebSocket 入门容易，但要打造一个稳定、高效、安全的生产级实时通信系统，需要考虑的细节非常多。希望这篇从 Chrome 工具观察开始，到代码实现，再到性能安全讨论的笔记，能帮你建立起一个完整的知识框架。剩下的，就是在具体的项目中不断实践和优化了。