chat 实时聊天页面 tailwind.config = { theme: { extend: { colors: { primary: '#1677ff', success: '#52c41a', warning: '#faad14', danger: '#ff4d4f', chat: { self: '#e6f7ff', other: '#ffffff', } }, } } } 聊天对象 未连接 请输入消息开始聊天 发送 // ========== 核心变量 ========== const chatContainer = document.getElementById('chat-container'); const messageInput = document.getElementById('message-input'); const sendBtn = document.getElementById('send-btn'); const connectionStatus = document.getElementById('connection-status'); // WebSocket 实例（替换为你的后端地址） let ws; // 当前用户信息（可根据实际情况修改） const currentUser = { id: 'user1', name: '我', avatar: 'https://picsum.photos/id/4/48/48' }; // 聊天对象信息 const targetUser = { id: 'user2', name: '对方', avatar: 'https://picsum.photos/id/1/48/48' }; // ========== 工具函数 ========== // 获取当前时间戳（HH:MM） function getCurrentTime() { const now = new Date(); return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`; } // 添加消息到聊天窗口 function addMessageToUI(sender, content, isSelf = false) { const time = getCurrentTime(); const messageHTML = ` ${!isSelf ? `` : ''} ${content} ${time} ${isSelf ? `` : ''} `; chatContainer.insertAdjacentHTML('beforeend', messageHTML); // 滚动到底部 chatContainer.scrollTop = chatContainer.scrollHeight; } // 添加系统提示 function addSystemMessage(content) { const systemHTML = ` ${content} `; chatContainer.insertAdjacentHTML('beforeend', systemHTML); chatContainer.scrollTop = chatContainer.scrollHeight; } // 更新连接状态 function updateConnectionStatus(isConnected) { if (isConnected) { connectionStatus.innerHTML = '已连接'; messageInput.disabled = false; sendBtn.disabled = false; addSystemMessage('已连接到聊天服务器，可以开始聊天'); } else { connectionStatus.innerHTML = '未连接'; messageInput.disabled = true; sendBtn.disabled = true; addSystemMessage('与服务器断开连接，请刷新页面重试'); } } // ========== WebSocket 相关 ========== // 初始化WebSocket连接 function initWebSocket() { // 替换为你的后端WebSocket地址，本地测试一般是 ws://localhost:3000 const wsUrl = 'ws://localhost:3000'; try { ws = new WebSocket(wsUrl); // 连接成功 ws.onopen = function() { updateConnectionStatus(true); }; // 接收消息 ws.onmessage = function(event) { try { const message = JSON.parse(event.data); // 显示对方发送的消息 addMessageToUI(targetUser, message.content, false); } catch (e) { // 如果不是JSON格式，直接显示 addMessageToUI(targetUser, event.data, false); } }; // 连接关闭 ws.onclose = function() { updateConnectionStatus(false); // 尝试重连（可选） setTimeout(initWebSocket, 3000); }; // 连接错误 ws.onerror = function(error) { console.error('WebSocket错误:', error); updateConnectionStatus(false); }; } catch (e) { console.error('初始化WebSocket失败:', e); addSystemMessage('连接服务器失败，请检查网络'); } } // 发送消息 function sendMessage() { const content = messageInput.value.trim(); if (!content) return; // 先显示自己的消息到UI addMessageToUI(currentUser, content, true); // 发送到服务器 if (ws && ws.readyState === WebSocket.OPEN) { const message = { from: currentUser.id, to: targetUser.id, content: content, time: getCurrentTime() }; ws.send(JSON.stringify(message)); } else { addSystemMessage('发送失败：未连接到服务器'); } // 清空输入框 messageInput.value = ''; } // ========== 事件绑定 ========== // 发送按钮点击事件 sendBtn.addEventListener('click', sendMessage); // 回车发送消息 messageInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendMessage(); } }); // 页面加载时初始化WebSocket window.addEventListener('load', function() { initWebSocket(); // 初始滚动到底部 chatContainer.scrollTop = chatContainer.scrollHeight; }); // 页面关闭时关闭WebSocket连接 window.addEventListener('beforeunload', function() { if (ws) { ws.close(); } });