📖 目录

SSE是一种让服务器能够主动向浏览器推送数据的技术。 与传统的一问一答 HTTP 请求不同。SSE 可以保持连接并逐块推送数据，适合 LLM 流式回答场景。

说到浏览器，我要数据！服务器这方面，给你
而 SSE 模式下：
至于浏览器，我要听你直播！从服务器来看，好，我一句一句说给你听…，→ 数据块
→ 数据块
→ 数据块
→ …，

使用者痛点的观点是，

• 直接对接 LLM 的 ReadableStream 必须手动解码；
• 需要解析 “data:” 前缀和换行分隔符；
• 处理 `` 结束标记；老实说，
• 应对断流、半包、乱码等边界情况。

这些脏活累活如果每次都写进 Vue 组件里代码会变得杂乱且难维护。把它们抽象出来让前端只关心展示即可。

🆚 SSE vs WebSocket   

…，…对于 LLM 的“不断吐字”需求，SSE 是最轻量也最易实现的方案。

BFF 是为前端服务的轻量后端层。把“面向页面”的业务逻辑从通用后端剥离出来让前端团队可以快速迭代接口格式、字段裁剪和数据聚合，而不必频繁打扰后端同事。

传统后端与前端需求冲突的根源：

"Model–View–Controller"

Model – View – Controller
关注 CRUD 接口规范、安全并发等通用需求。当前端需要定制化接口或聚合多服务的数据时会出现高沟通成本和响应慢的问题。话说回来，



BFF 在中间扮演了桥梁角色：
`
` 前端 ──► Node ──► 后端 
`
` ▲ ▲ `
` │ │ `
` └────── API Key 存储────┘ `
` `

BFF 的本质：把面向页面的定制逻辑从通用后端剥离出来交给前端自己掌控。


为什么把流式输出交给 BFF 层？


- 前端直接对接 LLM 流时遇到：

- 二进制 ReadableStream 解码耗时；- “data:” 前缀 + 换行分隔符解析繁琐；- `` 不易，- 半包/乱码/断流等异常情况难以预判。- 每个组件重复实现这套逻辑，使项目膨胀。- 长期维护成本高，

- 把复杂性抽象到 Node/BFF 后：

- 接收请求并携带 prompt；+ 调用深度学习模型接口；不过，+ 对返回的 ReadableStream 做拆包、解码；+ 按 SSE 协议逐块写入 res.write;+ 自动管理连接关闭与错误重试。- 前端只需 fetch 并监听 EventSource 或 StreamReader 即可。- 所有繁琐细节隐藏在后端，实现“一键复用”。老实说，


从主要思想来看。**复杂留给 BFF**，**简单留给前端**。


整体架构设计简述 📐️🔧️⚙️️‍♂️️‍♀️️‍♂️️‍♀️⚡️🌟🔎👓🏗️🐙💻🛠🔧🚀🤖🤝🏽🏃‍♂️🏃‍♀️📈📉📝✨🌱☕🍵☕🌾🍁🍃🍂🪴🌳🌲⛰︎⛏︎🔬🚨🚧⚠💡💬🔎🚦🗺🏹🚀🚁✈︎ 🚪🚤🏝 🌍🌎🌏 🕸 🌌💫🔭 🔮 💥 ⚡ ⚙ 🌀 🌊 ❄ ⛄ ☃ ❄ ❄ ❄ 🎆 🎇 🔔 🔔 ✨ 🌠 🎇 💥 ⚔ ⚙ 🚢 ✈︎ 🚴 🛤 🛣 🚋 🚍 🚞 🚚 🚛 💼 💳 📦 🗳 📑 📜 📖 📚 ☕ 🍵 🍺 🍻 🍸 🍹 🍾 🍷 🍽 🥂🥃🥤🥑🥪🥙 🥗🥘 🥫 👩‍💻👨‍💻👩‍🔬👨‍🔬🧑‍🎓👩‍🎓👨‍🎓 👩🏻 👨🏻 👩🏼 👨🏼 👩🏽 👨🏽 👩🏾 👨🏾 👩🏿 👨🏿 🙋🙋🏼🙋🏻🙋🏻 …，…․‥，’">"
text
stream-bff/
├── server.mjs ← Node / Express 后台服务
├── vite.config.js ← Vite 配置
├── package.json ← 项目依赖脚本
├── .env.local ← 环境变量
├── index.html ← 页面入口
└── src/
├── main.js ← Vue 应用入口
└── App.vue ← 主页面组件

**关键点**
1️⃣ **前端** 在 Vite 开发服务器 上运行。② **BFF** 在 Node 上监听。③ **API Key** 单独存放在 `.env.local` 并仅被 **Node** 读取。④ 前后两层通过 **Vite Proxy** 或 CORS 转发通信，无需暴露密钥。mermaid
flowchart TD
A -->|fetch| B
B -->|rewrite /api → /stream| C
C -->|POST /chat/completions| D
D -->|ReadableStream| C -->|SSE | A
text
↑ ↑
│ │
│ —— API Key 保存在此处 ——
│ │
└─────────────────────────────────────────────┘