websocket-realtime
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseWebSocket & Real-Time
WebSocket 与实时通信
WebSocket Server
WebSocket 服务器
typescript
import { WebSocketServer, WebSocket } from "ws";
const wss = new WebSocketServer({ port: 8080 });
const rooms = new Map<string, Set<WebSocket>>();
wss.on("connection", (ws, req) => {
const userId = authenticateFromUrl(req.url);
if (!userId) {
ws.close(4001, "Unauthorized");
return;
}
ws.on("message", (data) => {
const message = JSON.parse(data.toString());
switch (message.type) {
case "join":
joinRoom(message.room, ws);
break;
case "leave":
leaveRoom(message.room, ws);
break;
case "broadcast":
broadcastToRoom(message.room, message.payload, ws);
break;
}
});
ws.on("close", () => {
rooms.forEach((members) => members.delete(ws));
});
ws.send(JSON.stringify({ type: "connected", userId }));
});
function joinRoom(room: string, ws: WebSocket) {
if (!rooms.has(room)) rooms.set(room, new Set());
rooms.get(room)!.add(ws);
}
function broadcastToRoom(room: string, payload: unknown, sender: WebSocket) {
const members = rooms.get(room);
if (!members) return;
const message = JSON.stringify({ type: "message", room, payload });
members.forEach((client) => {
if (client !== sender && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
}typescript
import { WebSocketServer, WebSocket } from "ws";
const wss = new WebSocketServer({ port: 8080 });
const rooms = new Map<string, Set<WebSocket>>();
wss.on("connection", (ws, req) => {
const userId = authenticateFromUrl(req.url);
if (!userId) {
ws.close(4001, "Unauthorized");
return;
}
ws.on("message", (data) => {
const message = JSON.parse(data.toString());
switch (message.type) {
case "join":
joinRoom(message.room, ws);
break;
case "leave":
leaveRoom(message.room, ws);
break;
case "broadcast":
broadcastToRoom(message.room, message.payload, ws);
break;
}
});
ws.on("close", () => {
rooms.forEach((members) => members.delete(ws));
});
ws.send(JSON.stringify({ type: "connected", userId }));
});
function joinRoom(room: string, ws: WebSocket) {
if (!rooms.has(room)) rooms.set(room, new Set());
rooms.get(room)!.add(ws);
}
function broadcastToRoom(room: string, payload: unknown, sender: WebSocket) {
const members = rooms.get(room);
if (!members) return;
const message = JSON.stringify({ type: "message", room, payload });
members.forEach((client) => {
if (client !== sender && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
}Socket.io with Rooms
结合Rooms的Socket.io使用
typescript
import { Server } from "socket.io";
import { createAdapter } from "@socket.io/redis-adapter";
import { createClient } from "redis";
const io = new Server(httpServer, {
cors: { origin: "https://app.example.com" },
pingTimeout: 20000,
pingInterval: 25000,
});
const pubClient = createClient({ url: "redis://localhost:6379" });
const subClient = pubClient.duplicate();
await Promise.all([pubClient.connect(), subClient.connect()]);
io.adapter(createAdapter(pubClient, subClient));
io.use(async (socket, next) => {
const token = socket.handshake.auth.token;
try {
socket.data.user = verifyToken(token);
next();
} catch {
next(new Error("Authentication failed"));
}
});
io.on("connection", (socket) => {
socket.join(`user:${socket.data.user.id}`);
socket.on("chat:join", (roomId) => {
socket.join(`chat:${roomId}`);
socket.to(`chat:${roomId}`).emit("chat:userJoined", socket.data.user);
});
socket.on("chat:message", async ({ roomId, text }) => {
const message = await saveMessage(roomId, socket.data.user.id, text);
io.to(`chat:${roomId}`).emit("chat:message", message);
});
socket.on("disconnect", () => {
console.log(`User ${socket.data.user.id} disconnected`);
});
});typescript
import { Server } from "socket.io";
import { createAdapter } from "@socket.io/redis-adapter";
import { createClient } from "redis";
const io = new Server(httpServer, {
cors: { origin: "https://app.example.com" },
pingTimeout: 20000,
pingInterval: 25000,
});
const pubClient = createClient({ url: "redis://localhost:6379" });
const subClient = pubClient.duplicate();
await Promise.all([pubClient.connect(), subClient.connect()]);
io.adapter(createAdapter(pubClient, subClient));
io.use(async (socket, next) => {
const token = socket.handshake.auth.token;
try {
socket.data.user = verifyToken(token);
next();
} catch {
next(new Error("Authentication failed"));
}
});
io.on("connection", (socket) => {
socket.join(`user:${socket.data.user.id}`);
socket.on("chat:join", (roomId) => {
socket.join(`chat:${roomId}`);
socket.to(`chat:${roomId}`).emit("chat:userJoined", socket.data.user);
});
socket.on("chat:message", async ({ roomId, text }) => {
const message = await saveMessage(roomId, socket.data.user.id, text);
io.to(`chat:${roomId}`).emit("chat:message", message);
});
socket.on("disconnect", () => {
console.log(`User ${socket.data.user.id} disconnected`);
});
});Server-Sent Events (SSE)
Server-Sent Events (SSE)
typescript
app.get("/events/:userId", authenticate, (req, res) => {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
Connection: "keep-alive",
});
const sendEvent = (event: string, data: unknown) => {
res.write(`event: ${event}\n`);
res.write(`data: ${JSON.stringify(data)}\n\n`);
};
sendEvent("connected", { userId: req.params.userId });
const interval = setInterval(() => {
res.write(":heartbeat\n\n");
}, 30000);
const listener = (message: string) => {
const event = JSON.parse(message);
sendEvent(event.type, event.data);
};
redis.subscribe(`user:${req.params.userId}`, listener);
req.on("close", () => {
clearInterval(interval);
redis.unsubscribe(`user:${req.params.userId}`, listener);
});
});SSE is simpler than WebSocket for server-to-client unidirectional streaming. Works through HTTP proxies and load balancers without special configuration.
typescript
app.get("/events/:userId", authenticate, (req, res) => {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
Connection: "keep-alive",
});
const sendEvent = (event: string, data: unknown) => {
res.write(`event: ${event}\n`);
res.write(`data: ${JSON.stringify(data)}\n\n`);
};
sendEvent("connected", { userId: req.params.userId });
const interval = setInterval(() => {
res.write(":heartbeat\n\n");
}, 30000);
const listener = (message: string) => {
const event = JSON.parse(message);
sendEvent(event.type, event.data);
};
redis.subscribe(`user:${req.params.userId}`, listener);
req.on("close", () => {
clearInterval(interval);
redis.unsubscribe(`user:${req.params.userId}`, listener);
});
});SSE在服务器到客户端的单向流场景中比WebSocket更简单,无需特殊配置即可通过HTTP代理和负载均衡器工作。
Client Reconnection
客户端重连
typescript
class ReconnectingWebSocket {
private ws: WebSocket | null = null;
private retryCount = 0;
private maxRetries = 10;
constructor(private url: string) {
this.connect();
}
private connect() {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => { this.retryCount = 0; };
this.ws.onclose = () => { this.scheduleReconnect(); };
this.ws.onerror = () => { this.ws?.close(); };
}
private scheduleReconnect() {
if (this.retryCount >= this.maxRetries) return;
const delay = Math.min(1000 * 2 ** this.retryCount, 30000);
this.retryCount++;
setTimeout(() => this.connect(), delay);
}
send(data: string) {
if (this.ws?.readyState === WebSocket.OPEN) {
this.ws.send(data);
}
}
}typescript
class ReconnectingWebSocket {
private ws: WebSocket | null = null;
private retryCount = 0;
private maxRetries = 10;
constructor(private url: string) {
this.connect();
}
private connect() {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => { this.retryCount = 0; };
this.ws.onclose = () => { this.scheduleReconnect(); };
this.ws.onerror = () => { this.ws?.close(); };
}
private scheduleReconnect() {
if (this.retryCount >= this.maxRetries) return;
const delay = Math.min(1000 * 2 ** this.retryCount, 30000);
this.retryCount++;
setTimeout(() => this.connect(), delay);
}
send(data: string) {
if (this.ws?.readyState === WebSocket.OPEN) {
this.ws.send(data);
}
}
}Anti-Patterns
反模式
- Not authenticating WebSocket connections during the handshake
- Sending unbounded payloads without message size limits
- Missing heartbeat/ping-pong to detect stale connections
- Using WebSocket when SSE would suffice (server-to-client only)
- Not using a Redis adapter for horizontal scaling with Socket.io
- Blocking the event loop with synchronous processing of messages
- 未在握手阶段对WebSocket连接进行身份验证
- 发送无大小限制的消息负载
- 缺少心跳/ ping-pong机制来检测失效连接
- 在仅需服务器到客户端通信的场景下使用WebSocket(此时SSE已足够)
- 使用Socket.io进行水平扩展时未使用Redis适配器
- 同步处理消息导致事件循环阻塞
Checklist
检查清单
- WebSocket connections authenticated during handshake
- Message size limits enforced on incoming data
- Heartbeat mechanism detects and closes stale connections
- Client implements exponential backoff reconnection
- Redis pub/sub adapter used for multi-server deployment
- SSE used when communication is server-to-client only
- Room/channel membership cleaned up on disconnect
- Rate limiting applied to prevent message flooding
- 已在握手阶段对WebSocket连接进行身份验证
- 已对传入数据实施消息大小限制
- 已配置心跳机制来检测并关闭失效连接
- 客户端已实现指数退避重连机制
- 多服务器部署时已使用Redis发布/订阅适配器
- 仅服务器到客户端通信场景下已使用SSE
- 断开连接时已清理房间/频道成员关系
- 已应用速率限制来防止消息泛滥