Nanobot前端开发实战：JavaScript实现实时交互界面-平芜编程栈

Nanobot前端开发实战：JavaScript实现实时交互界面

1. 引言

想象一下，你正在开发一个AI助手，用户输入问题后，需要实时看到思考过程、工具调用和最终回答。传统的请求-响应模式已经无法满足这种交互需求，用户希望看到"活"的思考过程，而不是等待几秒钟后的静态结果。

这就是Nanobot前端开发面临的挑战：如何用JavaScript构建一个能够实时展示AI思考过程、工具调用状态和动态响应的交互界面。本文将带你深入实战，从基础架构到高级技巧，完整实现一个与Nanobot后端无缝协作的前端界面。

通过本文，你将掌握如何构建一个专业的AI交互界面，让用户真正感受到智能助手的"思考"和"行动"过程。

2. Nanobot前端架构设计

2.1 核心架构概览

Nanobot前端架构需要处理几个关键挑战：实时消息传递、状态同步、工具调用展示和流畅的用户体验。我们采用基于事件驱动的架构来应对这些需求。

class NanobotFrontend { constructor() { this.socket = null; this.messageQueue = []; this.isConnected = false; this.conversationState = 'idle'; this.toolCallHistory = []; } // 初始化连接 async initializeConnection(apiKey, endpoint) { try { this.socket = new WebSocket(`${endpoint}?apiKey=${apiKey}`); await this.setupWebSocketHandlers(); this.isConnected = true; } catch (error) { console.error('连接初始化失败:', error); this.handleConnectionError(error); } } }

2.2 消息流设计

Nanobot的消息不是简单的问答，而是包含多种类型的复杂数据流：

// 消息类型定义 const MessageTypes = { USER_QUERY: 'user_query', AGENT_THINKING: 'agent_thinking', TOOL_CALL: 'tool_call', TOOL_RESULT: 'tool_result', FINAL_RESPONSE: 'final_response', ERROR: 'error' }; // 消息处理器映射 const messageHandlers = { [MessageTypes.AGENT_THINKING]: (data) => { this.updateThinkingState(data.thought); }, [MessageTypes.TOOL_CALL]: (data) => { this.displayToolCall(data.toolName, data.parameters); }, [MessageTypes.TOOL_RESULT]: (data) => { this.updateToolResult(data.callId, data.result); } };

3. 实时通信实现

3.1 WebSocket连接管理

WebSocket是实现实时通信的核心，我们需要处理连接、重连和错误处理：

class WebSocketManager { constructor(url, options = {}) { this.url = url; this.options = options; this.socket = null; this.reconnectAttempts = 0; this.maxReconnectAttempts = 5; this.reconnectDelay = 1000; } connect() { this.socket = new WebSocket(this.url); this.socket.onopen = () => { console.log('WebSocket连接已建立'); this.reconnectAttempts = 0; this.onOpen(); }; this.socket.onmessage = (event) => { this.handleMessage(JSON.parse(event.data)); }; this.socket.onclose = (event) => { console.log('WebSocket连接关闭', event.code, event.reason); this.handleClose(event); }; this.socket.onerror = (error) => { console.error('WebSocket错误:', error); this.handleError(error); }; } handleClose(event) { if (event.code !== 1000 && this.reconnectAttempts < this.maxReconnectAttempts) { const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts); setTimeout(() => { this.reconnectAttempts++; this.connect(); }, delay); } } }

3.2 消息协议设计

与Nanobot后端通信需要定义清晰的消息协议：

// 发送消息到Nanobot function sendMessageToNanobot(type, content, metadata = {}) { const message = { id: generateMessageId(), type, timestamp: Date.now(), content, metadata }; if (this.socket.readyState === WebSocket.OPEN) { this.socket.send(JSON.stringify(message)); this.messageQueue.push(message); } else { console.warn('WebSocket未就绪，消息已排队'); this.messageQueue.push(message); } } // 生成唯一消息ID function generateMessageId() { return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; }

4. 用户界面组件开发

4.1 聊天界面组件

聊天界面需要展示多种类型的消息，并保持流畅的滚动体验：

class ChatInterface { constructor(containerId) { this.container = document.getElementById(containerId); this.messages = []; this.isScrolledToBottom = true; this.initializeUI(); this.setupEventListeners(); } initializeUI() { this.container.innerHTML = ` <div class="chat-messages"></div> <div class="chat-input-area"> <textarea placeholder="输入您的问题..." rows="1"></textarea> <button class="send-button">发送</button> </div> <div class="typing-indicator" style="display: none;"> <span>Nanobot正在思考...</span> </div> `; } addMessage(message, type) { const messageElement = this.createMessageElement(message, type); const messagesContainer = this.container.querySelector('.chat-messages'); messagesContainer.appendChild(messageElement); this.messages.push({ message, type, timestamp: Date.now() }); if (this.isScrolledToBottom) { this.scrollToBottom(); } } createMessageElement(message, type) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${type}`; switch (type) { case 'user': messageDiv.innerHTML = ` <div class="message-content"> <div class="avatar user-avatar">👤</div> <div class="text">${this.escapeHtml(message)}</div> </div> `; break; case 'agent-thinking': messageDiv.innerHTML = ` <div class="message-content"> <div class="avatar agent-avatar">🤖</div> <div class="thinking-indicator"> <span class="thinking-text">${message}</span> <div class="thinking-dots"> <span></span><span></span><span></span> </div> </div> </div> `; break; case 'tool-call': messageDiv.innerHTML = ` <div class="message-content"> <div class="avatar tool-avatar">🛠️</div> <div class="tool-call"> <div class="tool-name">调用工具: ${message.tool}</div> <div class="tool-params">参数: ${JSON.stringify(message.params)}</div> </div> </div> `; break; } return messageDiv; } }

4.2 工具调用可视化

当Nanobot调用工具时，我们需要直观地展示调用过程和结果：

class ToolCallVisualizer { constructor() { this.activeToolCalls = new Map(); this.toolCallElements = new Map(); } showToolCall(toolCallId, toolName, parameters) { const toolCallElement = this.createToolCallElement(toolCallId, toolName, parameters); document.getElementById('tool-calls-container').appendChild(toolCallElement); this.activeToolCalls.set(toolCallId, { toolName, parameters, status: 'in_progress', startTime: Date.now() }); this.toolCallElements.set(toolCallId, toolCallElement); } updateToolCallResult(toolCallId, result, success = true) { const toolCall = this.activeToolCalls.get(toolCallId); if (!toolCall) return; toolCall.status = success ? 'completed' : 'failed'; toolCall.endTime = Date.now(); toolCall.duration = toolCall.endTime - toolCall.startTime; toolCall.result = result; const element = this.toolCallElements.get(toolCallId); this.updateToolCallElement(element, toolCall); } createToolCallElement(toolCallId, toolName, parameters) { const element = document.createElement('div'); element.className = 'tool-call'; element.id = `tool-call-${toolCallId}`; element.innerHTML = ` <div class="tool-header"> <span class="tool-name">${toolName}</span> <span class="tool-status">执行中...</span> <div class="tool-timer">0.0s</div> </div> <div class="tool-parameters"> <pre>${JSON.stringify(parameters, null, 2)}</pre> </div> <div class="tool-result" style="display: none;"></div> `; return element; } }

5. 状态管理与用户体验优化

5.1 应用状态管理

使用状态机管理复杂的交互状态：

class AppStateManager { constructor() { this.state = { connection: 'disconnected', conversation: 'idle', currentToolCalls: [], messageHistory: [], userInput: '', error: null }; this.listeners = new Set(); } setState(newState) { this.state = { ...this.state, ...newState }; this.notifyListeners(); } addListener(listener) { this.listeners.add(listener); } notifyListeners() { this.listeners.forEach(listener => listener(this.state)); } // 状态转换方法 startConversation() { this.setState({ conversation: 'waiting_for_response', currentToolCalls: [] }); } addToolCall(toolCall) { this.setState({ currentToolCalls: [...this.state.currentToolCalls, toolCall] }); } }

5.2 性能优化技巧

确保实时界面的流畅性：

class PerformanceOptimizer { constructor() { this.messageBatch = []; this.batchTimeout = null; this.batchDelay = 50; // 毫秒 } // 批量处理消息更新 batchMessageUpdate(message, callback) { this.messageBatch.push(message); if (!this.batchTimeout) { this.batchTimeout = setTimeout(() => { this.processBatch(callback); this.batchTimeout = null; }, this.batchDelay); } } processBatch(callback) { if (this.messageBatch.length > 0) { callback(this.messageBatch); this.messageBatch = []; } } // 虚拟化长列表 setupVirtualScroll(container, items, renderItem) { const visibleItemCount = Math.ceil(container.clientHeight / 50); let startIndex = 0; const renderVisibleItems = () => { const scrollTop = container.scrollTop; startIndex = Math.floor(scrollTop / 50); const visibleItems = items.slice(startIndex, startIndex + visibleItemCount); const offsetY = startIndex * 50; container.innerHTML = ''; visibleItems.forEach((item, index) => { const element = renderItem(item); element.style.position = 'absolute'; element.style.top = `${offsetY + index * 50}px`; container.appendChild(element); }); }; container.addEventListener('scroll', renderVisibleItems); renderVisibleItems(); } }

6. 错误处理与恢复机制

6.1 连接错误处理

class ErrorHandler { constructor() { this.connectionErrors = 0; this.maxRetries = 3; } handleConnectionError(error) { this.connectionErrors++; if (this.connectionErrors > this.maxRetries) { this.showFatalError('无法建立连接，请检查网络设置'); return; } this.showRetryPrompt(error.message, () => { this.retryConnection(); }); } showRetryPrompt(message, retryCallback) { const retryDialog = document.createElement('div'); retryDialog.className = 'error-dialog'; retryDialog.innerHTML = ` <div class="error-content"> <h3>连接问题</h3> <p>${message}</p> <div class="error-actions"> <button class="retry-button">重试</button> <button class="cancel-button">取消</button> </div> </div> `; retryDialog.querySelector('.retry-button').onclick = retryCallback; retryDialog.querySelector('.cancel-button').onclick = () => { document.body.removeChild(retryDialog); }; document.body.appendChild(retryDialog); } }

6.2 消息重发机制

class MessageQueueManager { constructor() { this.pendingMessages = new Map(); this.retryQueue = []; } sendMessageWithRetry(message, sendFunction, maxRetries = 3) { return new Promise((resolve, reject) => { const messageId = message.id; let retries = 0; const trySend = () => { sendFunction(message).then(resolve).catch(error => { retries++; if (retries <= maxRetries) { console.warn(`消息发送失败，第${retries}次重试:`, error); setTimeout(trySend, 1000 * retries); } else { reject(error); this.retryQueue.push({ message, resolve, reject }); } }); }; this.pendingMessages.set(messageId, { message, resolve, reject }); trySend(); }); } retryAll() { const failedMessages = [...this.retryQueue]; this.retryQueue = []; failedMessages.forEach(({ message, resolve, reject }) => { this.sendMessageWithRetry(message, this.sendFunction) .then(resolve) .catch(reject); }); } }