WebSocket 实战构建实时通信应用什么是 WebSocketWebSocket 是一种在单个 TCP 连接上提供全双工通信的协议允许服务器主动向客户端推送数据。WebSocket vs HTTP特性HTTPWebSocket连接方式单向请求-响应双向持久连接数据推送客户端主动请求服务器主动推送开销每次请求都有开销仅初始握手延迟较高低延迟WebSocket 基础使用客户端实现const ws new WebSocket(wss://example.com/ws); ws.onopen () { console.log(连接已建立); ws.send(Hello Server!); }; ws.onmessage (event) { console.log(收到消息:, event.data); }; ws.onerror (error) { console.error(连接错误:, error); }; ws.onclose (event) { console.log(连接关闭:, event.code, event.reason); };服务端实现Node.jsconst WebSocket require(ws); const wss new WebSocket.Server({ port: 8080 }); wss.on(connection, (ws) { console.log(新客户端连接); ws.on(message, (message) { console.log(收到消息:, message.toString()); ws.send(收到你的消息: message); }); ws.on(close, () { console.log(客户端断开连接); }); });实时聊天应用服务端const WebSocket require(ws); const wss new WebSocket.Server({ port: 8080 }); const clients new Set(); wss.on(connection, (ws) { clients.add(ws); ws.on(message, (data) { const message JSON.parse(data); clients.forEach((client) { if (client ! ws client.readyState WebSocket.OPEN) { client.send(JSON.stringify(message)); } }); }); ws.on(close, () { clients.delete(ws); }); });客户端const ws new WebSocket(ws://localhost:8080); const messages document.getElementById(messages); const input document.getElementById(input); function sendMessage() { const message { user: 当前用户, text: input.value, timestamp: new Date().toLocaleTimeString() }; ws.send(JSON.stringify(message)); input.value ; } ws.onmessage (event) { const message JSON.parse(event.data); const div document.createElement(div); div.innerHTML strong${message.user}/strong ${message.timestamp}: ${message.text}; messages.appendChild(div); };心跳机制// 服务端 wss.on(connection, (ws) { const heartbeatInterval setInterval(() { if (ws.readyState WebSocket.OPEN) { ws.ping(); } }, 30000); ws.on(close, () { clearInterval(heartbeatInterval); }); }); // 客户端 ws.on(ping, () { ws.pong(); });错误处理与重连function connect() { const ws new WebSocket(ws://localhost:8080); ws.onclose (event) { console.log(连接关闭正在重连...); setTimeout(connect, 5000); }; ws.onerror (error) { console.error(连接错误:, error); }; return ws; } const ws connect();使用 Socket.io服务端const io require(socket.io)(3000); io.on(connection, (socket) { console.log(新连接:, socket.id); socket.on(chat message, (msg) { io.emit(chat message, msg); }); socket.on(disconnect, () { console.log(断开连接:, socket.id); }); });客户端const socket io(http://localhost:3000); socket.on(chat message, (msg) { console.log(收到消息:, msg); }); socket.emit(chat message, Hello Server);房间功能// 服务端 io.on(connection, (socket) { socket.join(room1); io.to(room1).emit(message, 新用户加入房间); socket.on(send to room, (msg) { io.to(room1).emit(room message, msg); }); });WebSocket 安全使用 HTTPS/WSSconst https require(https); const fs require(fs); const WebSocket require(ws); const server https.createServer({ cert: fs.readFileSync(cert.pem), key: fs.readFileSync(key.pem) }); const wss new WebSocket.Server({ server });认证机制wss.on(connection, (ws, req) { const token req.headers[sec-websocket-protocol]; if (!validateToken(token)) { ws.close(1008, Unauthorized); return; } });总结WebSocket 为实时应用提供了强大的基础低延迟通信适合实时聊天、游戏等场景双向通信服务器可以主动推送数据持久连接减少连接开销通过合理的错误处理和重连机制可以构建稳定可靠的实时应用。
WebSocket 实战：构建实时通信应用
WebSocket 实战构建实时通信应用什么是 WebSocketWebSocket 是一种在单个 TCP 连接上提供全双工通信的协议允许服务器主动向客户端推送数据。WebSocket vs HTTP特性HTTPWebSocket连接方式单向请求-响应双向持久连接数据推送客户端主动请求服务器主动推送开销每次请求都有开销仅初始握手延迟较高低延迟WebSocket 基础使用客户端实现const ws new WebSocket(wss://example.com/ws); ws.onopen () { console.log(连接已建立); ws.send(Hello Server!); }; ws.onmessage (event) { console.log(收到消息:, event.data); }; ws.onerror (error) { console.error(连接错误:, error); }; ws.onclose (event) { console.log(连接关闭:, event.code, event.reason); };服务端实现Node.jsconst WebSocket require(ws); const wss new WebSocket.Server({ port: 8080 }); wss.on(connection, (ws) { console.log(新客户端连接); ws.on(message, (message) { console.log(收到消息:, message.toString()); ws.send(收到你的消息: message); }); ws.on(close, () { console.log(客户端断开连接); }); });实时聊天应用服务端const WebSocket require(ws); const wss new WebSocket.Server({ port: 8080 }); const clients new Set(); wss.on(connection, (ws) { clients.add(ws); ws.on(message, (data) { const message JSON.parse(data); clients.forEach((client) { if (client ! ws client.readyState WebSocket.OPEN) { client.send(JSON.stringify(message)); } }); }); ws.on(close, () { clients.delete(ws); }); });客户端const ws new WebSocket(ws://localhost:8080); const messages document.getElementById(messages); const input document.getElementById(input); function sendMessage() { const message { user: 当前用户, text: input.value, timestamp: new Date().toLocaleTimeString() }; ws.send(JSON.stringify(message)); input.value ; } ws.onmessage (event) { const message JSON.parse(event.data); const div document.createElement(div); div.innerHTML strong${message.user}/strong ${message.timestamp}: ${message.text}; messages.appendChild(div); };心跳机制// 服务端 wss.on(connection, (ws) { const heartbeatInterval setInterval(() { if (ws.readyState WebSocket.OPEN) { ws.ping(); } }, 30000); ws.on(close, () { clearInterval(heartbeatInterval); }); }); // 客户端 ws.on(ping, () { ws.pong(); });错误处理与重连function connect() { const ws new WebSocket(ws://localhost:8080); ws.onclose (event) { console.log(连接关闭正在重连...); setTimeout(connect, 5000); }; ws.onerror (error) { console.error(连接错误:, error); }; return ws; } const ws connect();使用 Socket.io服务端const io require(socket.io)(3000); io.on(connection, (socket) { console.log(新连接:, socket.id); socket.on(chat message, (msg) { io.emit(chat message, msg); }); socket.on(disconnect, () { console.log(断开连接:, socket.id); }); });客户端const socket io(http://localhost:3000); socket.on(chat message, (msg) { console.log(收到消息:, msg); }); socket.emit(chat message, Hello Server);房间功能// 服务端 io.on(connection, (socket) { socket.join(room1); io.to(room1).emit(message, 新用户加入房间); socket.on(send to room, (msg) { io.to(room1).emit(room message, msg); }); });WebSocket 安全使用 HTTPS/WSSconst https require(https); const fs require(fs); const WebSocket require(ws); const server https.createServer({ cert: fs.readFileSync(cert.pem), key: fs.readFileSync(key.pem) }); const wss new WebSocket.Server({ server });认证机制wss.on(connection, (ws, req) { const token req.headers[sec-websocket-protocol]; if (!validateToken(token)) { ws.close(1008, Unauthorized); return; } });总结WebSocket 为实时应用提供了强大的基础低延迟通信适合实时聊天、游戏等场景双向通信服务器可以主动推送数据持久连接减少连接开销通过合理的错误处理和重连机制可以构建稳定可靠的实时应用。
