基于 TypeScript 的 WebSocket 库：ws、Socket.IO 和 SockJS

TypeScript WebSocket 库：教育网站完整概述

WebSocket 是一种协议，可在客户端和服务器之间实现实时双向通信。在 TypeScript 生态系统中，有几个流行的库可以简化 WebSocket 的使用。在本文中，我们将介绍三种主要工具：ws、Socket.IO 和 SockJS，并展示如何将它们集成到 TypeScript 教育项目中。

为什么 WebSocket 对教育很重要？

教育网站通常需要实时功能：聊天、协作代码编辑、通知、直播。WebSocket 可以避免不断轮询服务器，并实现即时数据传输。TypeScript 添加了类型定义，这对于大型项目的维护至关重要。

1. ws 库——适用于 Node.js 的极简 WebSocket

ws 是用于 Node.js 服务器端最简单、最快的 WebSocket 库。它非常适合需要纯 WebSocket 而无需额外功能的场景。

安装

npm install wsnpm install @types/ws --save-dev

TypeScript 服务器示例

import { WebSocketServer } from 'ws';

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

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

  ws.send('欢迎来到教育网站！');

  ws.on('message', (data) => {    console.log(`收到: ${data}`);    ws.send(`回声: ${data}`);  });

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

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

TypeScript 客户端示例

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

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

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

ws.onclose = () => {  console.log('连接已关闭');};

优点：体积小、性能高、完全可控。
缺点：无自动重连、无房间支持。

2. Socket.IO——强大的实时应用库

Socket.IO 是实时应用的事实标准。它提供自动重连、房间、命名空间以及对回退传输（例如长轮询）的支持。

安装

npm install socket.io socket.io-clientnpm install @types/socket.io --save-dev

TypeScript 服务器示例

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

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

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

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

  socket.on('send_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: socket.id,      message: data.message    });  });

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

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

TypeScript 客户端示例

import { io, Socket } from 'socket.io-client';

const socket: Socket = io('http://localhost:3000');

socket.on('connect', () => {  console.log('已连接到服务器，ID:', socket.id);  socket.emit('join_room', 'javascript-lesson');});

socket.on('new_message', (data) => {  console.log(`${data.user}: ${