TypeScript中的WebSockets：从零开始构建实时应用

为什么WebSockets是实时通信的魔法？

想象一下，你打开了一个客服聊天，发送了一条消息，然后……等待。一秒、两秒、五秒。熟悉吗？这是经典的HTTP请求：你请求，服务器响应。但如果服务器自己想说点什么怎么办？比如CRM中的新订单，或者在线游戏中的语音？这时HTTP就无能为力了——它需要持续的轮询。

WebSockets从根本上解决了这个问题。它们在客户端和服务器之间创建了持久的双向通道。一次“握手”之后，数据就可以瞬间双向传输。没有多余的流量，没有延迟。只有纯粹的实时魔法。

在本文中，我们将使用TypeScript构建一个完整的实时应用。我们将学习如何在Node.js上运行WebSocket服务器，配置客户端，甚至添加错误处理。最后，你将能够编写自己的聊天系统、通知系统或多人在线游戏。

什么是WebSockets，为什么需要它们？

WebSocket是一种基于TCP的协议，它在浏览器和服务器之间提供持久连接。与HTTP每次请求都打开和关闭连接不同，WebSocket保持连接打开状态。

哪些场景至关重要？

\n
• 聊天和即时通讯——消息无延迟到达。
\n
• 在线游戏——玩家位置实时更新。
\n
• 股票行情——价格每毫秒都在变化。
\n
• 协同编辑——就像Google Docs一样。
\n

TypeScript在此基础上增加了严格的类型检查。你不会意外地将字符串发送到需要数字的地方——编译器会在开发阶段捕获错误。这可以避免生产环境中的bug。

项目设置：Node.js + TypeScript + WebSocket

我们从初始化开始。确保你已经安装了Node.js（版本18+）和npm。

mkdir websocket-ts-chat\ncd websocket-ts-chat\nnpm init -y\nnpm install ws @types/ws typescript ts-node @types/node\nnpx tsc --init

在tsconfig.json中，启用严格模式并设置outDir: "./dist"。这是任何TypeScript项目的基础。

用TypeScript编写WebSocket服务器

创建文件server.ts。这里我们将在8080端口上启动一个WebSocket服务器。

import { WebSocketServer, WebSocket } from 'ws';\n\nconst wss = new WebSocketServer({ port: 8080 });\n\ninterface CustomWebSocket extends WebSocket {\n    id: string;\n    username?: string;\n}\n\nwss.on('connection', (ws: CustomWebSocket) => {\n    ws.id = generateId();\n    console.log(`客户端已连接：${ws.id}`);\n\n    ws.on('message', (data: Buffer) => {\n        const message = data.toString();\n        console.log(`收到消息：${message}`);\n\n        // 广播给除发送者外的所有客户端\n        wss.clients.forEach((client) => {\n            if (client !== ws && client.readyState === WebSocket.OPEN) {\n                client.send(`[${ws.id}]: ${message}`);\n            }\n        });\n    });\n\n    ws.on('close', () => {\n        console.log(`客户端已断开：${ws.id}`);\n    });\n\n    ws.send('欢迎加入聊天！');\n});\n\nfunction generateId(): string {\n    return Math.random().toString(36).substring(2, 9);\n}\n\nconsole.log('服务器已启动，地址：ws://localhost:8080');

我们来解析关键点：

\n
• WebSocketServer——创建服务器。
\n
• connection——新客户端连接时触发的事件。
\n
• message——接收来自客户端的数据。
\n
• send——将数据发送回客户端。
\n

使用命令npx ts-node server.ts启动服务器。它将监听8080端口。

客户端部分：连接到WebSocket

现在创建client.ts。这是一个简单的脚本，用于连接到服务器并发送消息。