河北涿州住房和城乡建设厅网站品牌专业建设网站
Node.js实现WebSocket教程
1. WebSocket简介
WebSocket是一种在单个TCP连接上提供全双工通信的协议，允许服务器和客户端之间进行实时、双向通信。本教程将详细讲解如何在Node.js中实现WebSocket。
2. 技术选型
我们将使用ws库来实现WebSocket服务器，并结合express创建Web应用。
2.1 安装依赖
# 创建项目目录
mkdir nodejs-websocket-demo
cd nodejs-websocket-demo# 初始化项目
npm init -y# 安装依赖
npm install express ws uuid
依赖说明：
express: Web应用框架ws: WebSocket服务器实现uuid: 生成唯一标识符
3. 项目结构
nodejs-websocket-demo/
│
├── public/
│ ├── index.html
│ └── client.js
├── server.js
└── package.json
4. 详细实现
4.1 WebSocket服务器 (server.js)
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const { v4: uuidv4 } = require('uuid');const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });// 存储客户端连接
const clients = new Map();// 静态文件服务
app.use(express.static('public'));// WebSocket连接处理
wss.on('connection', (ws) => {// 为每个客户端分配唯一IDconst clientId = uuidv4();// 存储客户端连接clients.set(clientId, ws);// 发送客户端IDws.send(JSON.stringify({type: 'connection',clientId: clientId}));// 广播新用户连接broadcast({type: 'userJoined',clientId: clientId,message: `用户 ${clientId} 已加入聊天`}, clientId);// 消息处理ws.on('message', (message) => {try {const parsedMessage = JSON.parse(message);switch(parsedMessage.type) {case 'chat':handleChatMessage(clientId, parsedMessage);break;case 'typing':handleTypingNotification(clientId, parsedMessage);break;default:console.log('未知消息类型:', parsedMessage.type);}} catch (error) {console.error('消息解析错误:', error);}});// 连接关闭处理ws.on('close', () => {// 移除客户端clients.delete(clientId);// 广播用户离开broadcast({type: 'userLeft',clientId: clientId,message: `用户 ${clientId} 已离开聊天`}, clientId);});
});// 聊天消息处理
function handleChatMessage(senderId, message) {broadcast({type: 'chat',clientId: senderId,message: message.message}, senderId);
}// 输入状态通知
function handleTypingNotification(senderId, message) {broadcast({type: 'typing',clientId: senderId,isTyping: message.isTyping}, senderId);
}// 广播消息
function broadcast(message, excludeClientId = null) {clients.forEach((client, clientId) => {if (client.readyState === WebSocket.OPEN && clientId !== excludeClientId) {client.send(JSON.stringify(message));}});
}// 服务器启动
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {console.log(`WebSocket服务器运行在 ${PORT} 端口`);
});
4.2 客户端HTML (public/index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>WebSocket聊天室</title><style>body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }#chat-messages {height: 300px;overflow-y: scroll;border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;}</style>
</head>
<body><div id="chat-messages"></div><input type="text" id="message-input" placeholder="输入消息"><button id="send-btn">发送</button><script src="client.js"></script>
</body>
</html>
4.3 客户端JavaScript (public/client.js)
const socket = new WebSocket('ws://localhost:3000');
let clientId = null;const chatMessages = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');// WebSocket事件处理
socket.addEventListener('open', (event) => {appendMessage('系统', '连接成功');
});socket.addEventListener('message', (event) => {const message = JSON.parse(event.data);switch(message.type) {case 'connection':clientId = message.clientId;appendMessage('系统', `您的ID是: ${clientId}`);break;case 'chat':appendMessage(message.clientId, message.message);break;case 'userJoined':case 'userLeft':appendMessage('系统', message.message);break;case 'typing':handleTypingNotification(message);break;}
});socket.addEventListener('close', (event) => {appendMessage('系统', '连接已关闭');
});// 发送消息
sendBtn.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') {sendMessage();}
});function sendMessage() {const message = messageInput.value.trim();if (message) {socket.send(JSON.stringify({type: 'chat',message: message}));appendMessage(clientId, message);messageInput.value = '';}
}// 消息追加到聊天窗口
function appendMessage(sender, text) {const messageEl = document.createElement('div');messageEl.innerHTML = `<strong>${sender}:</strong> ${text}`;chatMessages.appendChild(messageEl);chatMessages.scrollTop = chatMessages.scrollHeight;
}// 处理打字状态通知
function handleTypingNotification(message) {// 可以在这里实现打字状态提示
}
5. 运行项目
# 启动服务器
node server.js# 访问 http://localhost:3000
6. 功能特点
- 实时双向通信
- 唯一客户端标识
- 广播消息机制
- 连接/断开事件处理
- 聊天消息和系统通知
7. 性能与扩展建议
- 生产环境考虑使用Redis等外部存储管理WebSocket连接
- 增加身份验证机制
- 实现消息持久化
- 使用负载均衡
8. 安全注意事项
- 使用WSS（WebSocket Secure）
- 实现连接速率限制
- 验证和过滤消息内容
- 防止跨站WebSocket劫持