From d9ce5e4ce7f30f8b59447676a5063891d4d4f557 Mon Sep 17 00:00:00 2001
From: funshine <guijie.hong@gmail.com>
Date: Tue, 15 Apr 2025 10:55:00 +0800
Subject: [PATCH] fix audio test page websocket disconn

---
 .../test/abbreviated_version/app.js           | 10 +++-
 main/xiaozhi-server/test/test_page.html       | 56 ++++++++++++-------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/main/xiaozhi-server/test/abbreviated_version/app.js b/main/xiaozhi-server/test/abbreviated_version/app.js
index 59b75625..b2286524 100644
--- a/main/xiaozhi-server/test/abbreviated_version/app.js
+++ b/main/xiaozhi-server/test/abbreviated_version/app.js
@@ -992,7 +992,9 @@ function connectToServer() {
 
             if(connectButton.id === "connectButton") {
                 connectButton.textContent = '断开';
-                connectButton.onclick = disconnectFromServer;
+                // connectButton.onclick = disconnectFromServer;
+                connectButton.removeEventListener("click", connectToServer);
+                connectButton.addEventListener("click", disconnectFromServer);
             }
             
             if(messageInput.id === "messageInput") {
@@ -1011,7 +1013,9 @@ function connectToServer() {
 
             if(connectButton.id === "connectButton") {
                 connectButton.textContent = '连接';
-                connectButton.onclick = connectToServer;
+                // connectButton.onclick = connectToServer;
+                connectButton.removeEventListener("click", disconnectFromServer);
+                connectButton.addEventListener("click", connectToServer);
             }
             
             if(messageInput.id === "messageInput") {
@@ -1175,7 +1179,7 @@ function updateStatus(message, type = 'info') {
 // 处理文本消息
 function handleTextMessage(message) {
     if (message.type === 'hello') {
-        console.log(`服务器回应：${message.message}`);
+        console.log(`服务器回应：${JSON.stringify(message, null, 2)}`);
     } else if (message.type === 'tts') {
         // TTS状态消息
         if (message.state === 'start') {
diff --git a/main/xiaozhi-server/test/test_page.html b/main/xiaozhi-server/test/test_page.html
index 2735fb5a..35dd57ef 100644
--- a/main/xiaozhi-server/test/test_page.html
+++ b/main/xiaozhi-server/test/test_page.html
@@ -475,22 +475,36 @@
 
         // 日志函数
         function log(message, type = 'info') {
-            const logEntry = document.createElement('div');
-            logEntry.className = `log-entry log-${type}`;
-            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-            if (type === 'error') {
-                logEntry.style.color = 'red';
-            } else if (type === 'debug') {
-                logEntry.style.color = 'gray';
-                return;
-            } else if (type === 'warning') {
-                logEntry.style.color = 'orange';
-            } else if (type === 'success') {
-                logEntry.style.color = 'green';
-            } else {
-                logEntry.style.color = 'black';
-            }
-            logContainer.appendChild(logEntry);
+            // 将消息按换行符分割成多行
+            const lines = message.split('\n');
+            const now = new Date();
+            // const timestamp = `[${now.toLocaleTimeString()}] `;
+            const timestamp = `[${now.toLocaleTimeString()}.${now.getMilliseconds().toString().padStart(3, '0')}] `;
+            // 为每一行创建日志条目
+            lines.forEach((line, index) => {
+                const logEntry = document.createElement('div');
+                logEntry.className = `log-entry log-${type}`;
+                // 如果是第一条日志，显示时间戳
+                const prefix = index === 0 ? timestamp : ' '.repeat(timestamp.length);
+                logEntry.textContent = `${prefix}${line}`;
+                // logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+                // logEntry.style 保留起始的空格
+                logEntry.style.whiteSpace = 'pre';
+                if (type === 'error') {
+                    logEntry.style.color = 'red';
+                } else if (type === 'debug') {
+                    logEntry.style.color = 'gray';
+                    return;
+                } else if (type === 'warning') {
+                    logEntry.style.color = 'orange';
+                } else if (type === 'success') {
+                    logEntry.style.color = 'green';
+                } else {
+                    logEntry.style.color = 'black';
+                }
+                logContainer.appendChild(logEntry);
+            });
+
             logContainer.scrollTop = logContainer.scrollHeight;
         }
 
@@ -1153,7 +1167,9 @@
                     await sendHelloMessage();
 
                     connectButton.textContent = '断开';
-                    connectButton.onclick = disconnectFromServer;
+                    connectButton.removeEventListener('click', connectToServer);
+                    connectButton.addEventListener('click', disconnectFromServer);
+                    // connectButton.onclick = disconnectFromServer;
                     messageInput.disabled = false;
                     sendTextButton.disabled = false;
 
@@ -1169,7 +1185,9 @@
                     connectionStatus.style.color = 'red';
 
                     connectButton.textContent = '连接';
-                    connectButton.onclick = connectToServer;
+                    connectButton.removeEventListener('click', disconnectFromServer);
+                    connectButton.addEventListener('click', connectToServer);
+                    // connectButton.onclick = connectToServer;
                     messageInput.disabled = true;
                     sendTextButton.disabled = true;
                     recordButton.disabled = true;
@@ -1189,7 +1207,7 @@
                             const message = JSON.parse(event.data);
 
                             if (message.type === 'hello') {
-                                log(`服务器回应：${message.message}`, 'info');
+                                log(`服务器回应：${JSON.stringify(message, null, 2)}`, 'success');
                             } else if (message.type === 'tts') {
                                 // TTS状态消息
                                 if (message.state === 'start') {