TypeScript 上的 WebSocket：从 A 到 Z 的实时应用

WebSocket 和 TypeScript 用于实时应用简介

现代 Web 应用越来越需要客户端和服务器之间的即时数据交换。传统的 HTTP 协议基于“请求-响应”模式，不适合对信息传递速度要求苛刻的任务：在线聊天、股票报价、多人在线游戏或监控系统。正是在这里，WebSocket——一种提供持久双向连接的协议——发挥了作用。

结合 TypeScript——JavaScript 的严格类型化超集——WebSocket 应用的开发不仅高效，而且安全。TypeScript 允许在编译阶段发现错误，提高代码可读性，并简化重构。在本文中，我们将分析使用 TypeScript 创建 WebSocket 实时应用的完整周期：从理论到实践示例。

WebSocket 基础：协议如何工作

什么是 WebSocket？

WebSocket（RFC 6455）是一种在客户端（浏览器）和服务器之间建立持久连接的协议。在握手之后，数据可以在两个方向上传输，无需重复的 HTTP 请求。这降低了延迟和网络负载。

与 HTTP 的区别

• HTTP：客户端发起请求 → 服务器响应 → 连接关闭（或保持打开以进行后续请求，但仍由客户端发起）。
• WebSocket：建立连接后，服务器可以随时向客户端发送数据（推送通知）。

WebSocket 连接的生命周期

1. 握手：客户端发送带有 Upgrade: websocket 头的 HTTP 请求。服务器响应状态码 101 Switching Protocols。
2. 数据交换：成功握手后，连接切换到 WebSocket 协议。数据以帧的形式传输。
3. 关闭：任何一方都可以通过发送特殊的控制帧来发起连接关闭。

在 TypeScript 上创建 WebSocket 服务器

选择库

对于服务器端，我们将使用流行的 ws 库——一个轻量级且快速的 Node.js WebSocket 实现。我们将它与 TypeScript 的类型定义一起安装：

npm install wsnpm install -D @types/ws

基础服务器

创建文件 server.ts：

import { WebSocketServer, WebSocket } from 'ws';

const PORT = 8080;const wss = new WebSocketServer({ port: PORT });

console.log(`WebSocket 服务器已启动在 ws://localhost:${PORT}`);

wss.on('connection', (ws: WebSocket) => {  console.log('新的连接');

  // 发送欢迎消息  ws.send('欢迎来到服务器！');

  // 处理传入消息  ws.on('message', (message: Buffer) => {    const text = message.toString();    console.log(`收到: ${text}`);

    // 回声响应    ws.send(`回声: ${text}`);  });

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

  // 处理错误  ws.on('error', (error: Error) => {    console.error('WebSocket 错误:', error);  });});

处理不同类型的消息

在实际应用中，消息通常以 JSON 格式结构化。让我们创建一个类型化的处理器：

interface ChatMessage {  type: 'message' | 'join' | 'leave';  username: string;  content?: string;  timestamp: number;}

wss.on('connection', (ws: WebSocket) => {  ws.on('message', (data: Buffer) => {    try {      const msg: ChatMessage = JSON.parse(data.toString());            switch (msg.type) {        case 'join':          console.log(`${msg.username} 加入了`);