diff --git a/main/xiaozhi-server/test/js/app.js b/main/xiaozhi-server/test/js/app.js index 96f6afc0..76819a6f 100644 --- a/main/xiaozhi-server/test/js/app.js +++ b/main/xiaozhi-server/test/js/app.js @@ -40,9 +40,6 @@ class App { // 关闭加载loading this.setModelLoadingStatus(false); - // 绑定页面卸载事件 - this.bindUnload(); - log('应用初始化完成', 'success'); } @@ -84,16 +81,6 @@ class App { modelLoading.style.display = isLoading ? 'flex' : 'none'; } } - - // 绑定页面卸载事件 - bindUnload() { - window.addEventListener('beforeunload', () => { - // 销毁定时器 - if (this.uiController && this.uiController.wsTimer) { - clearInterval(this.uiController.wsTimer); - } - }); - } } // 创建并启动应用 diff --git a/main/xiaozhi-server/test/js/core/network/websocket.js b/main/xiaozhi-server/test/js/core/network/websocket.js index 187a57e4..c35b5300 100644 --- a/main/xiaozhi-server/test/js/core/network/websocket.js +++ b/main/xiaozhi-server/test/js/core/network/websocket.js @@ -5,6 +5,7 @@ import { getConfig, saveConnectionUrls } from '../../config/manager.js'; import { getAudioPlayer } from '../audio/player.js'; import { getAudioRecorder } from '../audio/recorder.js'; import { getMcpTools, executeMcpTool, setWebSocket as setMcpWebSocket } from '../mcp/tools.js'; +import { uiController } from '../../ui/controller.js' // WebSocket处理器类 export class WebSocketHandler { @@ -17,7 +18,6 @@ export class WebSocketHandler { this.onChatMessage = null; // 新增:聊天消息回调 this.currentSessionId = null; this.isRemoteSpeaking = false; - this.isEstablishConnection = false; // 新增:是否已建立连接 } // 发送hello握手消息 @@ -74,7 +74,7 @@ export class WebSocketHandler { handleTextMessage(message) { if (message.type === 'hello') { log(`服务器回应:${JSON.stringify(message, null, 2)}`, 'success'); - this.isEstablishConnection = true; + uiController.startAIChatSession(); } else if (message.type === 'tts') { this.handleTTSMessage(message); } else if (message.type === 'audio') { diff --git a/main/xiaozhi-server/test/js/ui/controller.js b/main/xiaozhi-server/test/js/ui/controller.js index 6cf2def7..1d22f32f 100644 --- a/main/xiaozhi-server/test/js/ui/controller.js +++ b/main/xiaozhi-server/test/js/ui/controller.js @@ -1,5 +1,5 @@ // UI控制模块 -import { loadConfig, saveConfig, getConfig } from '../config/manager.js'; +import { loadConfig, saveConfig } from '../config/manager.js'; import { getAudioRecorder } from '../core/audio/recorder.js'; import { getWebSocketHandler } from '../core/network/websocket.js'; import { getAudioPlayer } from '../core/audio/player.js'; @@ -11,7 +11,6 @@ class UIController { this.visualizerCanvas = null; this.visualizerContext = null; this.audioStatsTimer = null; - this.wsTimer = null; this.currentBackgroundIndex = 0; this.backgroundImages = ['1.png', '2.png', '3.png']; @@ -93,6 +92,7 @@ class UIController { if (isConnected) { wsHandler.disconnect(); this.updateDialButton(false); + this.addChatMessage('已断开连接,期待下次再见~😉', false); } else { // 检查OTA地址是否已填写 const otaUrlInput = document.getElementById('otaUrl'); @@ -347,30 +347,9 @@ class UIController { this.addChatMessage('配置已保存', false); } - // 处理未绑定设备事件 - handleUnboundDevice() { - const dialBtn = document.getElementById('dialBtn'); - if (dialBtn) { - dialBtn.click(); - } - } - - // 拨号成功后直接开始录音 - dialAndRecord() { - const recordBtn = document.getElementById('recordBtn'); - const wsHandler = getWebSocketHandler(); - this.wsTimer = setInterval(() => { - if (wsHandler.isConnected() && wsHandler.websocket.onopen) { - clearInterval(this.wsTimer); - this.wsTimer = null; - if (wsHandler.isEstablishConnection) { - recordBtn.click(); - } else { - this.handleUnboundDevice(); - } - return; - } - }, 500); + // 连接成功后开始对话 + startAIChatSession() { + this.addChatMessage('连接成功,开始聊天吧~🙂', false); } // 处理连接按钮点击 @@ -412,21 +391,12 @@ class UIController { } try { - // 获取配置信息 - const config = getConfig(); - // 导入OTA连接器 - const { webSocketConnect } = await import('../core/network/ota-connector.js'); + // 获取WebSocket处理器 + const wsHandler = getWebSocketHandler(); + const isConnected = await wsHandler.connect(); - // 建立OTA连接 - const websocket = await webSocketConnect(otaUrl, config); - - if (websocket) { - // 获取WebSocket处理器 - const wsHandler = getWebSocketHandler(); - - // 设置WebSocket连接 - wsHandler.websocket = websocket; + if (isConnected) { // 设置连接状态回调 wsHandler.onConnectionStateChange = (isConnected) => { @@ -462,16 +432,10 @@ class UIController { dialBtn.disabled = false; dialBtn.querySelector('.btn-text').textContent = '挂断'; dialBtn.classList.add('dial-active'); - - this.dialAndRecord(); } this.hideModal('settingsModal'); - // 自动尝试建立WebSocket连接 - setTimeout(() => { - wsHandler.connect(); - }, 1000); } else { throw new Error('OTA连接失败'); }