// 初始化 WebSocket 连接 const socket = new WebSocket('ws://your-websocket-server-url'); // 替换为实际的 WebSocket URL // 监听 WebSocket 打开事件 socket.addEventListener('open', () => { console.log('WebSocket 连接已建立'); }); // 监听 WebSocket 消息事件 socket.addEventListener('message', (event) => { const chatBox = document.getElementById('chat-box'); // 解析后端返回的消息 const aiMessage = event.data; // 添加 AI 消息到对话框 const aiMessageDiv = document.createElement('div'); aiMessageDiv.className = 'ai-message'; aiMessageDiv.innerHTML = `
${aiMessage}
`; chatBox.appendChild(aiMessageDiv); // 滚动到底部 chatBox.scrollTop = chatBox.scrollHeight; }); // 监听 WebSocket 错误事件 socket.addEventListener('error', (error) => { console.error('WebSocket 错误:', error); }); // 监听 WebSocket 关闭事件 socket.addEventListener('close', () => { console.log('WebSocket 连接已关闭'); }); // 发送消息功能 function sendMessage() { const userInput = document.getElementById('user-input'); const chatBox = document.getElementById('chat-box'); // 获取用户输入内容 const message = userInput.value.trim(); if (!message) return; // 添加用户消息到对话框 const userMessageDiv = document.createElement('div'); userMessageDiv.className = 'user-message'; userMessageDiv.innerHTML = `
${message}
`; chatBox.appendChild(userMessageDiv); // 清空输入框 userInput.value = ''; // 滚动到底部 chatBox.scrollTop = chatBox.scrollHeight; // 通过 WebSocket 发送消息到后端 socket.send(message); } // 绑定发送按钮点击事件 document.getElementById('send-btn').addEventListener('click', sendMessage); // 按下回车键发送消息 document.getElementById('user-input').addEventListener('keypress', function (e) { if (e.key === 'Enter') { sendMessage(); } });