前端流式接收数据示例讲解
作者：Code_Geo
在现代的前端应用中,处理大量数据和实时数据流变得越来越普遍,下面这篇文章主要介绍了前端流式接收数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
前端流式接收数据（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 | 单向 | 很强 | 较新浏览器 | 分段解析、关键词处理等 |
到此这篇关于前端流式接收数据的文章就介绍到这了,更多相关前端流式接收数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！