手机网站 百度推广,网贷代理推广,一般网站建设电话,做一网站要什么软件Node.js实现WebSocket教程
1. WebSocket简介
WebSocket是一种在单个TCP连接上提供全双工通信的协议#xff0c;允许服务器和客户端之间进行实时、双向通信。本教程将详细讲解如何在Node.js中实现WebSocket。
2. 技术选型
我们将使用ws库来实现WebSocket服务器#xff0c;…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.json4. 详细实现
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 langzh-CN
headmeta charsetUTF-8titleWebSocket聊天室/titlestylebody { 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
bodydiv idchat-messages/divinput typetext idmessage-input placeholder输入消息button idsend-btn发送/buttonscript srcclient.js/script
/body
/html4.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:30006. 功能特点
实时双向通信唯一客户端标识广播消息机制连接/断开事件处理聊天消息和系统通知
7. 性能与扩展建议
生产环境考虑使用Redis等外部存储管理WebSocket连接增加身份验证机制实现消息持久化使用负载均衡
8. 安全注意事项
使用WSSWebSocket Secure实现连接速率限制验证和过滤消息内容防止跨站WebSocket劫持
