🔧 WebSocket 診斷工具
-
+
準備開始診斷...
-
+
-
+
-
+
等待操作...
@@ -84,43 +84,43 @@
let websocket = null;
let logElement = document.getElementById('log');
let statusElement = document.getElementById('status');
-
+
function log(message, type = 'info') {
const timestamp = new Date().toLocaleTimeString();
logElement.textContent += `[${timestamp}] ${message}\n`;
logElement.scrollTop = logElement.scrollHeight;
-
+
// 更新狀態
statusElement.textContent = message;
statusElement.className = `status ${type}`;
}
-
+
function clearLog() {
logElement.textContent = '';
log('日誌已清除');
}
-
+
function testConnection() {
const url = document.getElementById('wsUrl').value;
-
+
if (websocket) {
log('關閉現有連接...', 'warning');
websocket.close();
websocket = null;
}
-
+
log(`嘗試連接到: ${url}`, 'info');
-
+
try {
websocket = new WebSocket(url);
-
+
websocket.onopen = function(event) {
log('✅ WebSocket 連接成功！', 'success');
};
-
+
websocket.onmessage = function(event) {
log(`📨 收到消息: ${event.data}`, 'success');
-
+
try {
const data = JSON.parse(event.data);
log(`📋 解析後的數據: ${JSON.stringify(data, null, 2)}`, 'info');
@@ -128,36 +128,36 @@
log(`⚠️ JSON 解析失敗: ${e.message}`, 'warning');
}
};
-
+
websocket.onclose = function(event) {
log(`🔌 連接已關閉 - Code: ${event.code}, Reason: ${event.reason}`, 'warning');
websocket = null;
};
-
+
websocket.onerror = function(error) {
log(`❌ WebSocket 錯誤: ${error}`, 'error');
console.error('WebSocket error:', error);
};
-
+
} catch (error) {
log(`❌ 連接失敗: ${error.message}`, 'error');
}
}
-
+
function sendMessage() {
const messageInput = document.getElementById('messageInput');
const message = messageInput.value.trim();
-
+
if (!message) {
log('⚠️ 請輸入要發送的消息', 'warning');
return;
}
-
+
if (!websocket || websocket.readyState !== WebSocket.OPEN) {
log('❌ WebSocket 未連接', 'error');
return;
}
-
+
try {
websocket.send(message);
log(`📤 已發送: ${message}`, 'info');
@@ -166,13 +166,13 @@
log(`❌ 發送失敗: ${error.message}`, 'error');
}
}
-
+
// 頁面加載時自動測試
window.onload = function() {
log('🚀 WebSocket 診斷工具已載入');
log('💡 點擊 "測試連接" 開始診斷');
};
-
+
// Enter 鍵發送消息
document.getElementById('messageInput').addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
diff --git a/docs/architecture/component-details.md b/docs/architecture/component-details.md
index 94e10f8..f21c4e1 100644
--- a/docs/architecture/component-details.md
+++ b/docs/architecture/component-details.md
@@ -13,25 +13,25 @@ graph TB
TOOL[interactive_feedback