TypeScript WebSocket 库：ws、Socket.IO、uWebSockets.js

TypeScript WebSocket 库：全面概述与实践示例

在现代 Web 开发中，WebSocket 技术已成为创建实时（real-time）应用的标准。得益于客户端与服务器之间的持久双向连接，WebSocket 非常适合聊天、在线游戏、股票交易、监控系统以及任何需要即时数据传输的项目。在本文中，我们将详细解析三种主要的 TypeScript WebSocket 库：ws、Socket.IO 和 uWebSockets.js，包括它们的安装、配置和代码示例。

1. ws 库——轻量且快速的 Node.js WebSocket 库

ws 库是 Node.js 中最流行且最简约的 WebSocket 协议实现。它不添加任何额外的抽象层，直接与原生协议交互，并提供最佳性能。通过可单独安装的类型定义，它支持 TypeScript。

安装

npm install wsnpm install -D @types/ws

TypeScript 简单服务器示例

import { WebSocketServer, WebSocket } from 'ws';

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

wss.on('connection', (ws: WebSocket) => {  console.log('客户端已连接');

  ws.on('message', (message: Buffer) => {    console.log('收到消息:', message.toString());    // 向所有连接的客户端发送响应    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`回声: ${message.toString()}`);      }    });  });

  ws.on('close', () => {    console.log('客户端已断开');  });});

console.log('WebSocket 服务器已启动于 ws://localhost:8080');

客户端代码（浏览器）

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {  console.log('连接已建立');  ws.send('你好，服务器！');};

ws.onmessage = (event: MessageEvent) => {  console.log('来自服务器的响应:', event.data);};

优点： 开销最小，完全控制协议，非常适合高负载系统。

缺点： 没有内置的房间支持、自动重连或 HTTP 传输回退。

2. Socket.IO——功能丰富的通用解决方案

Socket.IO 不仅仅是一个 WebSocket 库，而是一个完整的实时通信框架。它使用 WebSocket 作为主要传输方式，但如果 WebSocket 不可用（例如，在代理或旧浏览器后面），它会自动切换到 HTTP long-polling。Socket.IO 提供了现成的机制：房间、命名空间（namespaces）、自动重连、消息送达确认（acknowledgements）等等。

安装

npm install socket.io socket.io-clientnpm install -D @types/socket.io

带房间的 TypeScript 服务器示例

import { Server, Socket } from 'socket.io';import http from 'http';

const server = http.createServer();const io = new Server(server, {  cors: { origin: '*' }});

io.on('connection', (socket: Socket) => {  console.log('用户已连接:', socket.id);

  // 加入房间  socket.on('join_room', (roomName: string) => {    socket.join(roomName);    socket.to(roomName).emit('user_joined', socket.id);  });

  // 向房间发送消息  socket.on('room_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: socket.id,      text: data.message    });  });

  socket.on('disconnect', () => {    console.log('用户已断开:', socket.id);  });});

server.listen(3000, () => {  console.log('Socket.IO 服务器已启动于端口