Stream & SSE —— Web 端实时接收 AI Agent 终端输出

前言

使用者痛点：在浏览器里触发 AI Agent后传统的 HTTP 请求只能等全部执行完毕后一次性返回结果。导致使用者只能盯着空白页面等待，体验极差。者更希望像在本地终端那样，实时看到每一行输出及时发现错误或进度卡顿。

为了解决这个痛点，我们采用了 Stream + SSE 的组合。让浏览器能够像终端一样逐行渲染 AI Agent 的流式输出。

为什么不是 WebSocket

使用者痛点：很多人默认使用 WebSocket 实现实时通信。却忽视了它的“全双工”特性带来的额外开销和实现复杂度，而我们的场景只需要服务端单向推送。

SSE 在「服务端单向推送」的场景下更轻量、易用且兼容性好。

SSE 工作原理简述

1. 后端生成流式数据：AI Agent 在执行过程中，通过 Node.js、Python 等语言的 Stream API 将每一行/块数据写入响应体。
2. SSE 包装流：后端把这些流转换成符合 SSE 协议的文本块。每块以 结束，字段使用data:前缀。
3. 浏览器 EventSource 接收：前端创建new EventSource浏览器会保持一个持久的 HTTP 长连接并自动解析data:字段。
4. 实时渲染：收到每条'message'事件后将文本追加到 UI 中，实现“终端滚动”效果。

前端实现示例

                    

                        

                            

                                 上一篇： 
                                Java反射如何获取字段修饰符？  
                            
                            

                                 下一篇： 
                                Spring Boot有哪些核心知识点？