69 lines
2.5 KiB
JavaScript
69 lines
2.5 KiB
JavaScript
// 初始化 WebSocket 连接
|
|
const socket = new WebSocket('ws://localhost:9000/socket'); // 替换为实际的 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 = `<div class="message">${aiMessage}</div>`;
|
|
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 = `<div class="message">${message}</div>`;
|
|
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();
|
|
}
|
|
}); |