SSE实时进度推送
SSE Real-time Progress
通过Server-Sent Events实现长时间任务的实时进度推送和前端可视化
子问题
1.SSE连接管理
2.步骤级进度追踪
3.前端进度可视化
4.断线重连
5.多阶段加权进度计算
6.章节级并行写作流式预览
7.搜索骨架屏到结果卡片的原地替换
8.智能自动滚动与手动暂停检测
各项目的解法1 solutions
Signals
横向对比
| 维度 | vibe-blog |
|---|---|
| 传输协议 | Flask SSE + stream_with_context，单向推送 |
| 事件类型化 | 12 种命名事件（connected/progress/log/stream/outline_ready/writing_chunk/result/complete/error/cancelled/heartbeat），前端按类型精确分发 |
| 队列架构 | TaskManager 单例 + 每任务独立 threading.Queue，内存级 |
| 心跳保活 | 10 秒间隔 heartbeat 事件 + X-Accel-Buffering: no 禁用 Nginx 缓冲 |
| 进度粒度 | 阶段加权百分比（analyze 10% / outline 20% / content 30%）+ 章节级流式预览 |
| 前端封装 | Vue 3 Composable（useTaskStream）封装 EventSource 生命周期 + 100ms 节流预览 |
| 断线处理 | 5 分钟延迟清理 Queue + EventSource 原生自动重连 + 事件唯一 ID |
| 交互能力 | outline_ready 事件实现 HITL 暂停确认，cancel 端点支持用户主动中断 |
最佳实践
1.Flask SSE配合TaskService管理事件流
2.前端用composables封装SSE连接生命周期
3.每事件携带 uuid ID 支持 Last-Event-ID 断线续传
4.X-Accel-Buffering: no 头禁用反向代理缓冲
5.send_error 区分 recoverable 控制 SSE 连接是否终止
6.sectionContentMap + sectionOrder 双结构支持乱序章节到达