我们早Yi习惯了与AI进行对话。但你有没有想过为什么有时候面对屏幕，你会感到一种莫名的焦虑？那是因为传统的“非流式”交互，强迫我们盯着一个加载圈，等待模型在后台默默思考，直到它把所有的字dou写完了才一次性把答案甩在你面前。这种体验，就像是在跟一个反应迟钝的书呆子下棋，让人急得抓耳挠腮。

而今天我们要聊的主角——DeepSeek的流式输出，正是为了解决这种“等待的折磨”而生。它让AI的回答像打字机一样，一个字一个字地蹦出来不仅消解了等待的焦虑，geng让交互变得像真人对话一样自然流畅。本文将剥开技术的层层外衣，带你从零开始，彻底搞懂如何在前端和后端实现DeepSeek的流式输出。

想象一下你向DeepSeek提出了一个复杂的问题。Ru果是非流式模式，你可Neng需要盯着空白屏幕发呆十几秒甚至geng久，心里不禁怀疑：“是不是挂了？”而流式输出则完全不同，它将模型生成的文本拆解成无数个细小的碎片，随着生成的进度，实时推送到你的屏幕上。

这不仅仅是视觉上的爽快，geng是一种心理上的抚慰。这种“边生成边显示”的模式，完美契合了人类对话的自然节奏。从技术角度来kan，这背后的核心传统全量返回模式的缺陷显而易见：生成长文本时用户被迫经历漫长的“全有或全无”的等待，这简直是对用户耐心的极限挑战。

那么DeepSeek是如何Zuo到这一点的呢？其实DeepSeek以及大量兼容OpenAI格式的平台，其流式输出的本质dou是标准的 Server-Sent Events。这是一种基于HTTP的文本协议，单向地从服务端流向浏览器，相比WebSocket，它显得geng加轻量级。

当你把请求体里的 stream 字段设为 true 时奇迹就发生了。模型不再憋大招，而是开始源源不断地吐字。在控制台或者网络面板里你会kan到一行行以 data: 开头的文本，后面紧跟着一段JSON数据。当一切结束时你会kan到一个特殊的结束标记：data: 。这就是流式输出的“句号”。

虽然直接在前端调用API并不是生产环境的Zui佳实践，但这绝对是理解流式原理Zui直观的方式。我们不需要任何复杂的框架，就用Zui原生的 fetch 和 ReadableStream，来一场硬核的实战。

这里有一个基于Vue CDN的单页示例。别被代码的长度吓到，它的逻辑其实非常清晰：发送请求 -> 读取流 -> 解析每一行数据 -> 拼接到页面上。你Ke以直接把这段代码保存为HTML文件，扔到浏览器里运行。

记住这一句口诀：流式开关在请求体里的 stream 字段；而浏览器侧“读流”的套路，基本就是 ReadableStream 读片 + 文本解码 + 行缓冲 + 解析 data: JSON。掌握了这个，你就掌握了流式输出的精髓。

虽然上面的前端直连方案hen酷，但在工程实践中，它有一个致命的弱点：安全性。把API Key直接放在前端代码里就相当于把你家大门的钥匙贴在了门上。而且，标准的浏览器 EventSource API 只支持 GET 请求，且hen难自定义 Authorization 头，这对于需要 POST JSON Body 的大模型接口来说简直是八字不合。

这时候，我们需要引入一层 BFF。简单来说就是写一个轻量级的后端服务，由它来持有密钥，替浏览器去请求DeepSeek的上游接口。然后它把上游返回的SSE流“裁剪”或“转写”一下再转发给浏览器。这样，浏览器只需要通过简单的 GET 请求或者标准的 EventSource 就Neng连接了既安全又省心。

为了展示这种架构的威力，我们用Node.js写一个零依赖的代理服务器。不需要Express，不需要Dotenv，就用Node原生的 httpfs 和 fetch。文件即服务，简单粗暴。

在项目根目录创建一个 .env.local 文件，填入你的Key：

VITE_DEEPSEEK_API_KEY=sk-你自己的Key

然后创建 server.js，代码如下。这段代码不仅实现了流式转发，还贴心地处理了CORS跨域问题和环境变量加载。

"use strict";
/**
 * 零依赖代理：Node + 内置 fetch
 * 启动：node server.js
 * 环境变量：在项目根目录放置 .env.local 或 .env，写入
 *   VITE_DEEPSEEK_API_KEY=sk-...
 * 可选：PORT=3000, DEEPSEEK_API_URL=https://api.deepseek.com/chat/completions
 */
const http = require;
const fs = require;
const path = require;
const ROOT = __dirname;
// 简单的 .env 加载逻辑
function loadDotEnv {
  for  {
    const file = path.join;
    if ) continue;
    const text = fs.readFileSync;
    for ) {
      const trimmed = line.trim;
      if ) continue;
      const eq = trimmed.indexOf;
      if  continue;
      const key = trimmed.slice.trim;
      let val = trimmed.slice.trim;
      // 去除引号
      if (
         && val.endsWith) ||
         && val.endsWith)
      ) {
        val = val.slice;
      }
      if  process.env = val;
    }
  }
}
loadDotEnv;
const PORT = Number || 3000;
const API_KEY =
  process.env.VITE_DEEPSEEK_API_KEY || process.env.DEEPSEEK_API_KEY || "";
const UPSTREAM =
  process.env.DEEPSEEK_API_URL ||
  "https://api.deepseek.com/chat/completions";
if  {
  console.error(
    "缺少 API Key：请在 .env.local 或 .env 中设置 VITE_DEEPSEEK_API_KEY",
  );
  process.exit;
}
const CORS = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type",
};
/**
 * 将上游 OpenAI 兼容 SSE 行解析为 delta 文本，并写给客户端
 * 这里Zuo了一些清洗，确保发给浏览器的数据是干净的
 */
async function pipeUpstreamSseToClient {
  const decoder = new TextDecoder;
  let carry = "";
  while  {
    const { value, done } = await reader.read;
    if  break;
    carry += decoder.decode;
    let nl;
    // 处理缓冲区中的每一行
    while ) !== -1) {
      const rawLine = carry.slice;
      carry = carry.slice;
      const line = rawLine.trim;
      if ) continue;
      if ) continue;
      const payload = line.slice.trim;
      if  {
        res.write;
        res.write;
        return;
      }
      try {
        const data = JSON.parse;
        const delta = data?.choices?.?.delta?.content;
        if  {
          // 用 JSON 包裹一段文本，避免 delta 内含换行破坏 SSE 协议
          res.write}

`);
        }
      } catch  {
        // 解析失败，可Neng是数据包被截断，放回缓冲区下次处理
        carry = `${rawLine}
${carry}`;
        break;
      }
    }
  }
  res.write;
  res.write;
}
const server = http.createServer => {
  // ... 
  // 处理流式请求
  if  {
    const question =  || "").trim;
    if  {
      res.writeHead;
      res.end;
      return;
    }
    res.writeHead(200, {
      ...CORS,
      "Content-Type": "text/event-stream; charset=utf-8",
      "Cache-Control": "no-cache, no-transform",
      Connection: "keep-alive",
      "X-Accel-Buffering": "no", // 禁用 Nginx 缓冲
    });
    const ac = new AbortController;
    const onClose =  => ac.abort;
    res.on;
    try {
      const upstream = await fetch(UPSTREAM, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${API_KEY}`,
        },
        body: JSON.stringify({
          model: "deepseek-chat",
          messages: ,
          stream: true,
        }),
        signal: ac.signal,
      });
      if  {
        const t = await upstream.text.catch => "");
        res.write(
          `data: ${JSON.stringify({
            error: `upstream ${upstream.status}`,
            body: t.slice,
          })}

`,
        );
        return;
      }
      await pipeUpstreamSseToClient);
    } catch  {
      if  return;
      console.error;
      res.write(
        `data: ${JSON.stringify })}

`,
      );
    } finally {
      res.off;
      if  res.end;
    }
    return;
  }
  // ... 
});
server.listen => {
  console.log;
});

有了Node.jsZuo保镖，前端代码就Ke以卸下重担了。我们不再需要手动处理复杂的 fetch 流读取，而是Ke以使用浏览器原生的 EventSource API。它天生就是为了SSE设计的，自带自动重连功Neng，代码简洁得令人发指。

下面是配合上述Node.js代理的前端代码。注意这里我们不再需要传Key了只需要传问题：

// 建立 SSE 连接
const evtSource = new EventSource}`);
// 监听服务器发来的消息
evtSource.onmessage =  => {
  if  {
    evtSource.close; // 收到结束标记，关闭连接
    return;
  }
  console.log;
  // geng新UI...
};
// 监听错误
evtSource.onerror =  => {
  console.error;
  evtSource.close;
};

这种写法不仅代码量少，而且语义清晰。服务端写入时只需要遵循 Content-Type: text/event-stream，消息以 data: 开头，并以双换行符 即可。Node.js里的 res.write} \`) 正是在干这件事。

虽然Node.jsGo语言凭借其高性Neng和并发Neng力，也是处理流式数据的热门选择。在Go中，我们同样Ke以定义结构体来解析DeepSeek的响应，并利用其强大的标准库来处理文件持久化。

比如我们可Neng希望将对话历史保存到本地文件中。在Go中，这只需要几行代码就Neng搞定：

package main
import (
    "bufio"
    "encoding/json"
    "fmt"
    "net/http"
    "os"
    "strings"
    "time"
)
// 定义响应结构，用于解析JSON
type ChatResponse struct {
    Choices struct {
        Delta struct {
            Content string `json:"content"`
        } `json:"delta"`
    } `json:"choices"`
}
func main {
    // 创建输出文件，以追加模式打开
    file, err := os.OpenFile
    if err != nil {
        fmt.Printf
        return
    }
    defer file.Close
    // API 配置
    url := "https://api.deepseek.com/v1/chat/completions" // 示例地址
    // ... 
    // 假设我们拿到了流式响应 body
    // scanner := bufio.NewScanner
    // for scanner.Scan {
    //     line := scanner.Text
    //     if strings.HasPrefix {
    //         // 解析并写入文件
    //         var resp ChatResponse
    //         json.Unmarshal, &resp)
    //         file.WriteString
    //     }
    // }
}

这段Go代码展示了后端处理流式数据的另一种思路：一边接收流，一边写入磁盘。这对于需要构建聊天记录、审计日志或者进行离线分析的系统来说是非常基础且关键的功Neng。

从Zui初枯燥的等待，到如今如丝般顺滑的流式输出，我们kan到的不仅仅是技术的迭代，geng是人机交互体验的飞跃。DeepSeek通过兼容OpenAI的SSE协议，降低了开发者接入的门槛，让我们Neng够轻松构建出具有“生命力”的应用。

无论是前端的 fetch 流式读取，还是后端的BFF代理转发，亦或是Go语言的文件持久化，这些技术细节共同编织成了现代AI应用的基石。希望这篇文章Neng让你谁又愿意多等那一秒钟呢？