Gemini· Stream· API实战：实时流式输出的前后端实现

一站式接入主流 AI 大模型，支持对话 · 生图 · 生视频，即开即用

ChatGPT Claude Gemini Grok DeepSeek 通义千问 Ollama

做AI聊天、代码解释、文档总结这类应用时，用户最怕的不是等几秒，而是页面一直没反应。普通接口一般要等模型生成完整结果后一次性返回，体验会显得“卡”。我在做模型接入方案时，会先通过 t.877ai.cn 这类 AI模型聚合平台对比不同模型的响应速度、流式输出效果和中文生成稳定性，再决定前后端实现方式。Gemini Stream API的价值就在于：模型边生成，前端边展示，让用户更快看到结果。

流式输出的核心思路很简单：后端不等待完整答案，而是把模型返回的片段持续转发给前端。前端收到一段就渲染一段，类似打字机效果。对于长回答、代码生成、报告分析等场景，这种体验差异超级明显。即使总耗时差不多，用户感知也会更流畅。

从架构上看，可以分成三层：前端页面、业务后端、Gemini接口。前端负责发起问题和渲染内容；后端负责鉴权、参数封装、调用模型、转发流；Gemini负责生成内容。这里不提议前端直接调用模型接口，由于密钥管理、权限控制、日志记录都应该放在服务端。

后端实现流式输出，常见方式有两种：SSE和WebSocket。SSE适合单向推送，也就是客户端提问后，服务端持续返回生成内容；WebSocket适合双向实时通信，列如多人协作、语音对话、复杂状态同步。对于大多数AI问答页面，SSE已经够用，实现简单，兼容性也不错。

以Node.js为例，后端接口可以设计成：

app.post('/api/chat/stream', async (req, res) => {  res.setHeader('Content-Type', 'text/event-stream');  res.setHeader('Cache-Control', 'no-cache');  res.setHeader('Connection', 'keep-alive');
  const { prompt } = req.body;
  const stream = await callGeminiStream(prompt);
  for await (const chunk of stream) {    const text = chunk.text || '';    res.write(`data: ${JSON.stringify({ text })}

`);  }
  res.write(`data: ${JSON.stringify({ done: true })}

`);  res.end();});

这段代码只是示意，重点是res.write不断把片段写回前端。实际项目里还要处理异常、超时、用户中断、空内容和日志记录。流式接口最怕“只在正常情况可用”，一旦模型超时或网络断开，前端必须能给出明确提示。

前端接收SSE也不复杂。如果使用EventSource，一般是GET请求；如果要POST提交复杂参数，可以使用fetch读取ReadableStream。实际开发中，许多团队会选择fetch + stream reader，由于它更灵活，方便传递上下文、模型参数和会话ID。

简化版前端逻辑如下：

const response = await fetch('/api/chat/stream', {  method: 'POST',  headers: { 'Content-Type': 'application/json' },  body: JSON.stringify({ prompt: input })});
const reader = response.body.getReader();const decoder = new TextDecoder('utf-8');
while (true) {  const { value, done } = await reader.read();  if (done) break;
  const chunk = decoder.decode(value);  appendToMessage(chunk);}