长文本流式传输怎么实现？

访客网络编程 2026-06-07 16:15:23 2

从原理到最佳实践

目录导读

什么是长文本流式传输？ —— 概念与适用场景
核心技术原理 —— 分块、缓冲、协议选择
主流实现方式
- 基于HTTP/1.1的Chunked Transfer
- Server-Sent Events (SSE)
- WebSocket双向流
实际代码示例（Python与Node.js）
常见问题与解答（Q&A）
SEO优化建议 —— 如何确保流式内容被搜索引擎正确索引

什么是长文本流式传输？

长文本流式传输是一种允许服务器将大块文本数据（如日志、AI生成对话、实时报告）分批次、连续发送给客户端的技术，而非等待全部内容生成后再一次性返回。
典型场景：

ChatGPT生成的回答逐字显示
实时股票行情或体育比分推送
大文件日志的渐进式解析

核心技术原理

流式传输依赖三个关键机制：

分块编码（Chunked Encoding）：HTTP/1.1协议定义，数据被切成块，每块包含大小标记。
缓冲控制：服务器每生成一定量数据（如512字节）或达到时间间隔（如10ms）就发送一块。
非阻塞IO：使用异步编程（如Node.js的stream模块或Python的asyncio）避免等待。

问题：为什么不能用普通HTTP响应？
答：普通响应要求服务端完全准备好整个响应体后才发送，导致首字节延迟（TTFB）高，且无法实现“逐步显示”。

主流实现方式

1 HTTP分块传输（Chunked Transfer）

适用：简单文本流，如日志输出。
工作原理：

客户端发送请求,设置Accept-Encoding: identity。
服务器在响应头加入Transfer-Encoding: chunked，逐块发送数据。
每块格式为：[块大小（十六进制）]\r\n[块数据]\r\n，以0\r\n\r\n结束。

代码片段（Node.js）：

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, { 'Transfer-Encoding': 'chunked' });
  setInterval(() => res.write('data\n'), 1000);
}).listen(3000);

2 Server-Sent Events (SSE)

适用：单向文本流，如AI回复或通知推送。
优点：

原生支持断线重连（Last-Event-ID字段）。

浏览器API简洁（EventSource对象）。
示例（Python Flask）：

from flask import Response, stream_with_context
@app.route('/stream')
def stream():
  def generate():
      for i in range(10):
          yield f"data: 第{i}行文本\n\n"
  return Response(stream_with_context(generate()), mimetype='text/event-stream')

3 WebSocket（双向流）

适用：需要客户端和服务器互相推送的场景（如协作编辑）。
底层机制：通过帧（frame）传输，数据可分散在多个帧中。

实际代码示例（Python）

目标：模拟AI生成长文本，客户端逐字显示。

服务端（FastAPI）：

from fastapi import FastAPI
from fastapi.responses import StreamingResponse
import asyncio
app = FastAPI()
async def text_generator():
    for word in "你好，这是流式传输的示例文本。".split():
        yield word.encode('utf-8')
        await asyncio.sleep(0.3)
@app.get("/stream")
async def stream_endpoint():
    return StreamingResponse(text_generator(), media_type="text/plain")

客户端（HTML）：

<script>
const source = new EventSource('/stream');
source.onmessage = (event) => {
  document.getElementById('output').innerText += event.data;
};
</script>