在浏览器里实现“边生成边展示”的聊天效果，看起来很神奇，其实并不复杂。本文将从前端和后端两个角度，教你用 SSE（Server-Sent Events） 快速实现一个 LLM 聊天流效果，完整还原类似 ChatGPT 的交互体验。
为什么要用流式输出？
大模型场景下，传统接口需要等生成完才能返回数据，过程缓慢，用户体验较差。而流式输出可以：
- 实现边生成边展示，减少“卡顿感”
- 提前给用户反馈，缓解等待焦虑
- 更自然地模拟“AI 正在思考”的过程
什么是 SSE？
SSE（Server-Sent Events） 是 HTML5 标准提供的原生推送机制，允许服务器通过 HTTP 长连接不断向客户端发送消息，特点：
- 基于 HTTP 协议，浏览器支持好
- 单向通信（服务器 → 客户端）
- 适合“低频流”场景，例如文本生成、实时监控等
前端实现：监听 SSE 数据流
浏览器只需要原生的 EventSource 接口就能实现数据监听：
const source = new EventSource('/sse'); // 建立长连接
source.onmessage = function(event) {
const messages = document.getElementById('messages');
messages.innerHTML += event.data; // 每条消息追加显示
};
拆解说明：
| 代码 | 作用 |
|---|---|
new EventSource('/sse') | 和服务端 /sse 路由建立连接 |
onmessage | 每次服务端推送消息都会触发 |
event.data | 服务器发来的数据 |
innerHTML += | 将新消息追加显示，形成“流动感” |
后端实现：Node.js + Express 推送 SSE 数据
后端用 Express 提供一个 /sse 接口，不断推送消息给前端：
app.get('/sse', (req, res) => {
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
res.flushHeaders(); // 立即发送响应头
// 模拟每秒发一句话
setInterval(() => {
const message = `当前时间：${new Date().toLocaleTimeString()}`;
res.write(`data: ${message}\n\n`);
}, 1000);
});
⚠ 注意事项：
- 每条消息前加
data:，结尾两个换行符\n\n，格式不能错 res.flushHeaders()是关键，确保响应头立刻送达浏览器
添加 HTML 页面入口
当用户访问 / 路由时，返回一个页面供展示：
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
__dirname是 Node.js 当前路径变量res.sendFile用于返回完整页面文件
启动 HTTP 服务
用 Node.js 原生模块启动一个 HTTP 服务：
const http = require('http').Server(app);
http.listen(1023, () => {
console.log('server is running on 1023');
});
一图看懂 SSE 工作流程
SSE vs WebSocket：该怎么选？
| 对比项 | SSE | WebSocket |
|---|---|---|
| 通信方向 | 单向（服务端 ➝ 客户端） | 双向 |
| 协议 | HTTP（兼容性好） | WebSocket 新协议 |
| 易用性 | 浏览器原生支持 | 需额外封装 |
| 应用场景 | 文本流、日志、推送 | 聊天、协作、游戏等 |
✅ 如果你只需要“服务端不断推文本” → SSE 更轻便。
项目本地运行指南
npm init -y # 初始化项目
npm install express # 安装依赖
node server.js # 启动服务
# 打开浏览器访问：
http://localhost:1023/
总结：简单几步，搞定流式输出
| 技术点 | 说明 |
|---|---|
EventSource | 前端监听 SSE 流的关键接口 |
/sse 路由 | 后端提供流数据的接口 |
res.write('data: ...') | 按照 SSE 协议发送数据 |
res.flushHeaders() | 确保浏览器及时收到头信息 |
http.Server(app) | 启动服务的基本方法 |
📌 最后一句话：
不需要 WebSocket，也不必依赖 AI 平台，自己也能做出 ChatGPT 式的流式输出页面。前端 + Express + SSE，就能轻松实现！
如果你觉得本文对你有帮助，欢迎一键三连 ❤️
