流式输出：前端与后端的全栈实现指南

今禾
465 阅读3分钟

在 AI 技术快速发展的今天，流式输出（Streaming Output） 成为提升用户体验的重要手段。尤其是在大模型应用中，用户希望看到内容是“逐步生成”的，而不是等待全部完成才一次性展示。

本文将从基础原理到完整代码，带你一步步理解并实现 流式输出，从前端和后端两个角度进行讲解，并结合实际项目结构，提供一个可运行的示例。

一、为什么需要流式输出？

1. 用户体验优化

  • 边生成边输出：避免用户长时间等待。
  • 更真实的交互感：模拟人类打字效果，增强自然交互体验。
  • 降低感知延迟：即使整体响应时间较长，也能让用户尽快看到部分结果。

2. 技术背景支持

  • 大语言模型（LLM）如 GPT、通义千问等基于 Transformer 架构，逐 token 生成内容。
  • 每个 token 都可能产生费用，因此越早让用户看到有效信息，就越能提高使用效率。

二、技术选型：SSE 是最佳选择

方案类型是否双向通信易用性推荐场景
轮询请求/响应❌简单数据更新频率低
长轮询请求/响应❌中等实时性要求一般
WebSocket双向通信✅复杂实时聊天、多人协作
SSE（Server-Sent Events）单向推送❌简单服务器主动推送数据给客户端

✅ 推荐使用 SSE，它专为“服务端持续发送数据、客户端被动接收”设计，非常适合 AI 输出流式展示。

三、SSE 的基本原理

SSE 使用 HTTP 协议，通过一个持久连接让服务端不断发送事件流给客户端。

客户端监听事件：

const eventSource = new EventSource('http://localhost:1314/sse');

eventSource.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

eventSource.onerror = function(err) {
  console.error('连接异常:', err);
};

服务端设置响应头并写入数据：

app.get('/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  let count = 0;
  const messages = ["Hello", "I", "am", "your", "assistant"];

  const intervalId = setInterval(() => {
    if (count < messages.length) {
      res.write(`data: ${messages[count]}\n\n`);
      count++;
    } else {
      clearInterval(intervalId);
      res.end();
    }
  }, 500);
});

四、前后端全栈实现示例

1. 初始化项目

npm init -y
npm install express

2. 创建 server.js 文件

const express = require('express');
const app = express();

// 提供首页
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// SSE 接口
app.get('/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  let count = 0;
  const messages = ["Hello", "I", "am", "your", "assistant"];

  const intervalId = setInterval(() => {
    if (count < messages.length) {
      res.write(`data: ${messages[count]}\n\n`);
      count++;
    } else {
      clearInterval(intervalId);
      res.end();
    }
  }, 500);
});

app.listen(1314, () => {
  console.log('服务运行在 http://localhost:1314');
});

3. 创建 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流式输出演示</title>
</head>
<body>
  <h1>AI 输出内容：</h1>
  <div id="output" style="white-space: pre-wrap;"></div>

  <script>
    const output = document.getElementById('output');
    const eventSource = new EventSource('http://localhost:1314/sse');

    eventSource.onmessage = function(event) {
      output.textContent += event.data + ' ';
    };

    eventSource.onerror = function(err) {
      console.error('SSE 错误:', err);
    };
  </script>
</body>
</html>

五、运行流程说明

  1. 启动服务：node server.js
  2. 打开浏览器访问：http://localhost:1314
  3. 页面会逐步显示 "Hello I am your assistant"

六、应用场景举例

场景描述
AI 聊天机器人边生成边输出回答内容，模拟真实对话体验
日志实时展示如服务器日志监控系统
在线状态通知用户在线、离线、新消息提示
数据仪表盘实时刷新股票行情、天气预报、传感器数据等

七、常见问题与注意事项

1. Nginx 配置优化

如果你使用了 Nginx 做反向代理，请关闭缓冲：

location /sse {
    proxy_pass http://localhost:1314;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_buffering off;
}

2. 断线重连机制

浏览器默认会自动重连，但你可以通过 id 字段记录位置，实现断点续传。

3. 跨域问题处理

服务端需添加以下响应头：

res.setHeader('Access-Control-Allow-Origin', '*');

八、总结

流式输出不仅提升了用户体验，也符合当前大模型生成内容的特性。借助 SSE（Server-Sent Events） 技术，我们可以轻松地从前端和后端两个层面实现这一功能。

  • 前端：使用 EventSource 监听事件流；
  • 后端：通过 HTTP 设置特定响应头，持续写入内容；
  • 部署：注意反向代理配置、跨域问题和性能优化。

掌握这项技术，不仅能让你的产品更具竞争力，也能为构建智能 AI 应用提供坚实基础。

avatar
文章
阅读
粉丝