Vibe Draw实时通信机制：SSE与WebSocket如何协同工作

Vibe Draw实时通信机制：SSE与WebSocket如何协同工作

【免费下载链接】vibe-draw🎨 Turn your roughest sketches into stunning 3D worlds by vibe drawing项目地址: https://gitcode.com/gh_mirrors/vi/vibe-draw

Vibe Draw是一款能将粗略草图实时转换为精美3D世界的创新工具，其核心优势在于流畅的实时交互体验。这背后离不开两种关键实时通信技术——SSE（Server-Sent Events）和WebSocket的协同工作。本文将深入解析Vibe Draw如何巧妙运用这两种技术，为用户打造无缝的3D创作体验。

实时通信技术选型：为何需要两种方案？

Vibe Draw采用双技术架构并非偶然，而是基于不同场景的需求优化：

• SSE（Server-Sent Events）：适合单向、持续的数据流传输，如AI绘图进度更新
• WebSocket：提供全双工通信能力，适用于需要即时双向交互的场景

这种组合确保了在不同功能模块中使用最适合的通信方式，既保证了数据传输效率，又降低了系统复杂度。

图：Vibe Draw实时通信架构示意图，展示了SSE与WebSocket在3D创作流程中的应用场景

SSE在3D代码生成中的应用

在Vibe Draw中，当用户绘制草图并请求生成3D模型时，系统使用SSE技术提供实时进度反馈。这一实现主要体现在以下代码中：

后端SSE实现

在backend/app/api/routes.py中，开发团队实现了基于Redis pub/sub的SSE事件生成器：

async def event_generator(task_id: str, request: Request): """Generate SSE events from Redis pub/sub.""" # Subscribe to the Redis channel pubsub = redis_service.subscribe(f"task_stream:{task_id}") try: # Check if the client is still connected while not await request.is_disconnected(): # Get message from Redis pub/sub message = pubsub.get_message(ignore_subscribe_messages=True, timeout=1.0) if message: data = json.loads(message["data"]) event_type = data.get("event") event_data = data.get("data") # Yield the event yield { "event": event_type, "data": json.dumps(event_data) } # If this is the completion event, exit the loop if event_type in ["complete", "error"]: break # Small sleep to prevent CPU spinning await asyncio.sleep(0.01)

前端SSE接收

前端在frontend/app/lib/vibe3DCode.tsx中通过EventSource接收SSE事件：

async function waitForCodeGeneration(taskId: string): Promise<{ content: string } | null> { return new Promise((resolve, reject) => { const eventSource = new EventSource(`http://localhost:8000/api/subscribe/${taskId}`); eventSource.onmessage = (event) => { try { const data = JSON.parse((event as MessageEvent).data); if (data.status === 'completed') { console.log('Code generation completed:', data); if (data.content) { resolve({ content: data.content }); } else { resolve(null); } eventSource.close(); } else if (data.status === 'failed' || data.status === 'error') { console.error('Code generation error:', data.message); reject(new Error(data.message || 'Error generating code')); eventSource.close(); } else { console.log('Code generation status update:', data.message || data.status); } } catch (error) { console.error('Error parsing event data:', error); reject(error); eventSource.close(); } }; // 设置超时处理 setTimeout(() => { if (eventSource.readyState !== EventSource.CLOSED) { console.warn('Code generation timed out, closing SSE connection'); eventSource.close(); reject(new Error('Code generation timed out')); } }, 300000); // 5分钟超时 }); }

SSE特别适合代码生成这类场景，因为：

1. 它是单向通信，服务器可以持续发送进度更新
2. 自动重连机制保证了连接稳定性
3. 文本协议易于调试和集成

WebSocket在3D模型渲染中的应用

当处理Trellis API的3D模型生成任务时，Vibe Draw转而使用WebSocket技术，这需要更频繁的双向交互。

后端WebSocket实现

在backend/app/api/routes.py中，WebSocket端点实现了任务状态轮询：

@router.websocket("/trellis/task/ws/{task_id}") async def trellis_task_status_websocket(websocket: WebSocket, task_id: str): """WebSocket endpoint that polls the Trellis API for task status.""" # Check if API key is available if not settings.TRELLIS_API_KEY: await websocket.close(code=1008, reason="Trellis API key not configured") return await websocket.accept() # Set up headers for Trellis API headers = { "x-api-key": settings.TRELLIS_API_KEY, "Content-Type": "application/json" } # Flag to control polling loop continue_polling = True try: # Start polling loop while continue_polling: try: # Poll the Trellis API for task status async with httpx.AsyncClient() as client: response = await client.get( f"{TRELLIS_API_URL}/{task_id}", headers=headers, timeout=10.0 ) # Process response and send updates via WebSocket # ... # Wait before next poll await asyncio.sleep(2) except Exception as e: # Handle errors # ... finally: # Ensure the WebSocket is closed await websocket.close()

前端WebSocket处理

前端在frontend/app/lib/vibe3DCode.tsx中实现WebSocket客户端：

async function waitForTaskResult(taskId: string): Promise<string> { return new Promise((resolve, reject) => { const eventSource = new WebSocket(`http://localhost:8000/api/trellis/task/ws/${taskId}`); eventSource.onmessage = (event) => { const data = JSON.parse((event as MessageEvent).data); if (data.status === 'completed') { console.log('3D model ready:', data.data); resolve(data.data); eventSource.close(); } else if (data.status === 'failed' || data.status === 'error') { console.error('Error:', data.message); reject(new Error(data.message || 'Unknown error occurred')); eventSource.close(); } else { console.log('Status update:', data.message); } }; eventSource.onerror = (event) => { console.error('WebSocket connection error:', event); reject(new Error('Error with WebSocket connection')); eventSource.close(); }; // 设置超时处理 setTimeout(() => { if (eventSource.readyState !== WebSocket.CLOSED) { console.warn('Task timed out, closing WebSocket connection'); eventSource.close(); reject(new Error('Task timed out')); } }, 120000); // 2分钟超时 }); }

SSE与WebSocket协同工作流程

Vibe Draw根据不同任务类型智能选择通信方式：

1. 3D代码生成：使用SSE技术

   • 用户提交草图
   • 后端通过/api/queue/3d端点创建任务
   • 前端通过/api/subscribe/{task_id}建立SSE连接
   • 实时接收代码生成进度更新

2. Trellis 3D模型生成：使用WebSocket技术

   • 用户触发Trellis处理
   • 后端通过/api/trellis/task创建任务
   • 前端通过/api/trellis/task/ws/{task_id}建立WebSocket连接
   • 双向通信确保任务状态实时同步

图：Vibe Draw实时通信流程展示了SSE与WebSocket在不同场景下的应用

性能优化与错误处理

Vibe Draw在实时通信实现中特别注重稳定性和用户体验：

超时处理

两种通信方式都实现了超时机制，防止无限期等待：

• SSE设置5分钟超时（代码生成可能需要较长时间）
• WebSocket设置2分钟超时（Trellis API响应较快）

错误恢复

• SSE利用浏览器内置的自动重连机制
• WebSocket实现了错误处理和连接关闭逻辑
• 任务状态持久化到Redis，确保页面刷新后仍能恢复状态

资源管理

• 通信完成后主动关闭连接，释放资源
• 使用Redis pub/sub避免服务器资源浪费
• 前端实现连接状态监控，及时反馈给用户

总结：实时通信如何提升3D创作体验

Vibe Draw通过SSE与WebSocket的协同应用，为用户打造了流畅的3D创作体验：

• 即时反馈：用户操作后立即获得视觉反馈，减少等待感
• 状态透明：清晰展示后台处理进度，降低用户不确定性
• 高效协作：双技术架构优化不同场景下的数据传输效率

图：Vibe Draw的实时通信技术支持流畅的3D创作体验

通过这种精心设计的实时通信架构，Vibe Draw成功将复杂的3D建模过程转化为直观、交互性强的创作体验，让普通用户也能轻松将创意转化为3D世界。

要开始使用Vibe Draw，只需执行以下命令克隆仓库：

git clone https://gitcode.com/gh_mirrors/vi/vibe-draw

深入了解实现细节，可以查看以下核心文件：

• SSE实现：backend/app/api/routes.py
• WebSocket实现：backend/app/api/routes.py
• 前端通信逻辑：frontend/app/lib/vibe3DCode.tsx

【免费下载链接】vibe-draw🎨 Turn your roughest sketches into stunning 3D worlds by vibe drawing项目地址: https://gitcode.com/gh_mirrors/vi/vibe-draw