前端聊天室
<!DOCTYPE html><html><head> <title>Socket.IO 聊天室</title> <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script> <style> .chat-box { height: 400px; border: 1px solid #ccc; overflow-y: auto; padding: 10px; } .message { margin: 8px 0; padding: 8px; border-radius: 4px; } .self { background: #e3f2fd; margin-left: 20%; } .others { background: #f5f5f5; margin-right: 20%; } #user-list { position: fixed; right: 20px; top: 20px; background: white; padding: 10px; border: 1px solid #ddd; } </style></head><body> <div id="user-list"></div> <div class="chat-box" id="chatBox"></div> <input type="text" id="messageInput" placeholder="输入消息..." style="width: 70%"> <button onclick="sendMessage()">发送</button> <script> // 初始化连接 const socket = io('wss://your-chat-server.com', { auth: { userId: localStorage.getItem('userId') || `user_${Date.now()}` }, reconnectionAttempts: 3, transports: ['websocket'] }); // 消息发送函数 function sendMessage() { const input = document.getElementById('messageInput'); if (input.value.trim()) { socket.emit('chatMessage', { text: input.value, time: new Date().toISOString() }); input.value = ''; } } // 监听服务端消息 socket.on('chatMessage', (msg) => { const isSelf = msg.userId === socket.auth.userId; const div = document.createElement('div'); div.className = `message ${isSelf ? 'self' : 'others'}`; div.innerHTML = `<b>${msg.nickname}</b>: ${msg.text}<br><small>${new Date(msg.time).toLocaleTimeString()}</small>`; document.getElementById('chatBox').appendChild(div); }); // 用户列表更新 socket.on('userListUpdate', (users) => { document.getElementById('user-list').innerHTML = `<h4>在线用户 (${users.length})</h4>` + users.map(u => `<div>${u.nickname}</div>`).join(''); }); // 连接状态管理 socket.on('connect', () => { console.log('已连接服务器'); socket.emit('joinRoom', 'public'); }); socket.on('disconnect', () => { console.warn('连接已断开'); }); // 回车发送 document.getElementById('messageInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); </script></body></html>二、核心功能说明
连接配置
自动生成用户 ID 并存储于
localStorage优先使用 WebSocket 协议，失败后自动重连
消息交互
支持文本消息发送与格式化时间显示
消息气泡区分自己/他人（CSS 样式控制）
状态管理
实时更新在线用户列表
自动加入默认公共聊天室
public
三、服务端需配合实现
虽然此示例为纯前端代码，但需服务端支持以下逻辑：
处理
joinRoom事件管理房间广播
chatMessage到同一房间用户维护用户连接状态并推送
userListUpdate
四、扩展建议
历史记录
添加localStorage缓存最近的 100 条消息文件传输
通过socket.emit('fileUpload', base64Data)实现（需服务端支持）心跳检测
增加setInterval发送心跳包维持连接