前端流式接收数据全面讲解
前端流式接收数据（Streaming Data Reception）是现代 Web 应用中一个重要特性，尤其在处理实时通信、大文件传输、聊天、视频播放、实时日志监控等场景下。下面我们从概念到技术实现，再到应用示例，系统全面、细致地讲解前端如何流式接收数据。
一、什么是流式接收数据？
传统方式：前端发起请求，后端准备好完整数据后一次性返回。
流式方式：后端逐步返回数据片段（chunk），前端逐块接收和处理，实现边接收边处理。
优点
- 降低延迟，提升用户体验
- 节省内存
- 实现实时响应（如 AI 回答、日志推送）
二、前端接收数据的主流流式方式
我们重点介绍以下几种常见方式：
- Fetch + ReadableStream（原生流）
- EventSource（Server-Sent Events）
- WebSocket（双向通信）
- ReadableStream + TransformStream（高级控制）
三、Fetch + ReadableStream（推荐）
1. 使用场景
用于接收后端以流式返回的数据，例如：AI 输出、长日志、文件下载。
2. 示例代码
<button id="start">开始接收流数据</button>
<pre id="output"></pre>
<script>
document.getElementById("start").addEventListener("click", async () => {
const output = document.getElementById("output");
output.textContent = "";
const response = await fetch("/stream-endpoint");
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
while (true) {
const { done, value } = await reader.read();
if (done) break;
output.textContent += decoder.decode(value, { stream: true });
}
});
</script>
3. 后端需支持 chunked 传输（如 Node.js、Flask、FastAPI）
四、EventSource（SSE：服务器推送）
1. 使用场景
适用于服务器主动推送数据，如股票价格、消息通知、日志流。
2. 示例代码
<pre id="log"></pre>
<script>
const log = document.getElementById("log");
const evtSource = new EventSource("/sse");
evtSource.onmessage = (event) => {
log.textContent += `数据：${event.data}\n`;
};
</script>
3. 服务端要求
- 设置响应头：
Content-Type: text/event-stream - 使用
data:格式发送数据
data: Hello
data: World
五、WebSocket（全双工通信）
1. 使用场景
适用于双向通信场景：聊天室、在线游戏、协同编辑等。
2. 示例代码
<input id="msg" placeholder="输入消息" />
<button onclick="sendMessage()">发送</button>
<pre id="chat"></pre>
<script>
const ws = new WebSocket("ws://localhost:8080");
const chat = document.getElementById("chat");
ws.onmessage = (event) => {
chat.textContent += `服务器：${event.data}\n`;
};
function sendMessage() {
const msg = document.getElementById("msg").value;
ws.send(msg);
}
</script>
3. 服务端需实现 WebSocket 协议（如：ws 模块、Socket.IO、FastAPI WebSocket）
六、ReadableStream + TransformStream（更高级的控制）
1. 使用场景
需要对流数据做实时处理、转换，例如分割段落、转义数据。
2. 示例代码
const response = await fetch('/stream');
const textDecoderStream = new TextDecoderStream();
const transformStream = new TransformStream({
transform(chunk, controller) {
const timestamped = `[${new Date().toISOString()}] ${chunk}`;
controller.enqueue(timestamped);
}
});
response.body
.pipeThrough(textDecoderStream)
.pipeThrough(transformStream)
.pipeTo(new WritableStream({
write(chunk) {
document.body.innerText += chunk;
}
}));
七、如何选择合适的方式？
| 需求 | 建议使用方式 |
|---|---|
| 单向、实时推送 | SSE（EventSource） |
| 双向通信 | WebSocket |
| 边接收边展示长文本/AI输出 | Fetch + ReadableStream |
| 需要数据转化、过滤 | TransformStream |
八、常见问题与调试技巧
1. 后端未设置 Transfer-Encoding: chunked
确保响应头允许流式传输，否则浏览器会等全部内容加载完才显示。
2. 浏览器兼容性问题
ReadableStream和TextDecoderStream在新浏览器中支持良好- SSE 不支持 IE
- WebSocket 跨域需特别配置
3. 网络中断/重连机制
- SSE 自带断线重连机制
- WebSocket 需手动处理重连逻辑
九、延伸：结合前端框架（Vue/React）
以 Vue 为例：
<template>
<pre>{{ content }}</pre>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const content = ref('')
onMounted(async () => {
const response = await fetch('/stream');
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
content.value += decoder.decode(value);
}
});
</script>
十、总结
| 技术 | 单向/双向 | 控制能力 | 浏览器支持 | 用例 |
|---|---|---|---|---|
| Fetch Stream | 单向 | 强 | 新版浏览器 | AI回答、实时日志等 |
| EventSource | 单向 | 中 | 较好（除IE） | 消息推送、状态通知 |
| WebSocket | 双向 | 强 | 好 | 聊天、游戏、协同编辑 |
| TransformStream | 单向 | 很强 | 较新浏览器 | 分段解析、关键词处理等 |
