前端流式处理实现：从原理到代码的完整解析

优质文章学习记录

— 9 min read
前端流式处理实现：从原理到代码的完整解析
在这里插入图片描述

引言

在现代Web应用中，流式处理已经成为提升用户体验的重要技术之一。特别是在AI对话、长文本生成等场景中，流式处理能够让用户看到内容的实时生成过程，而不是等待整个内容生成完成后一次性显示。本文将详细介绍如何实现前端流式处理，以及如何通过流式处理实现界面的逐个文字显示效果。

什么是流式处理？

流式处理（Streaming）是一种数据处理方式，它允许数据在生成的同时被处理和显示，而不需要等待所有数据都生成完成。在Web开发中，流式处理通常通过以下技术实现：

  1. Server-Sent Events (SSE)：一种服务器向客户端推送数据的技术
  2. WebSocket：全双工通信协议
  3. Fetch API + ReadableStream：现代浏览器提供的流式处理能力

本文将重点介绍基于Fetch API和ReadableStream的流式处理实现。

实现原理

前端流式处理的核心原理是：

  1. 客户端发送请求时，设置stream: true参数
  2. 服务器收到请求后，以流式方式返回数据
  3. 客户端通过ReadableStream接口逐块接收数据
  4. 每接收到一块数据，就更新一次界面

完整实现示例

1. 后端实现（Node.js）

首先，我们需要一个能够返回流式响应的后端服务。以下是一个使用Express.js实现的简单后端：

// server.jsconst express =require('express');const app =express();const port =3001; app.use(express.json()); app.post('/api/stream',(req, res)=>{// 设置响应头，确保使用流式传输 res.setHeader('Content-Type','text/event-stream'); res.setHeader('Cache-Control','no-cache'); res.setHeader('Connection','keep-alive');// 模拟AI生成文本的过程const responseText ="这是一个流式处理的示例，展示如何实现逐个文字显示的效果。";let index =0;// 每隔100ms发送一个字符const interval =setInterval(()=>{if(index < responseText.length){const char = responseText[index];// 发送SSE格式的数据 res.write(`data: ${JSON.stringify({content: char })}\n\n`); index++;}else{// 发送结束标志 res.write(`data: [DONE]\n\n`);clearInterval(interval); res.end();}},100);}); app.listen(port,()=>{ console.log(`Server running on port ${port}`);});

2. 前端实现（React）

现在，让我们创建一个前端应用来接收和处理流式数据：

// App.jsx import React, { useState } from 'react'; function App() { const [input, setInput] = useState(''); const [response, setResponse] = useState(''); const [isStreaming, setIsStreaming] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setResponse(''); setIsStreaming(true); try { const response = await fetch('http://localhost:3001/api/stream', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt: input }), }); if (!response.ok) { throw new Error('Network response was not ok'); } // 获取响应流 const reader = response.body.getReader(); const decoder = new TextDecoder(); let; // 循环读取流数据 while (true) { const { done, value } = await reader.read(); if (done) { break; } // 解码数据 const chunk = decoder.decode(value, { stream: true }); // 处理SSE格式的数据 const lines = chunk.split('\n\n'); for (const line of lines) { if (line.startsWith('data: ')) { const data = line.substring(6); if (data === '[DONE]') { setIsStreaming(false); break; } try { const parsed = JSON.parse(data); if (parsed.content) { completeResponse += parsed.content; setResponse(completeResponse); } } catch (error) { console.error('Error parsing JSON:', error); } } } } } catch (error) { console.error('Error:', error); setIsStreaming(false); } }; return ( <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}> <h1>流式处理示例</h1> <form onSubmit={handleSubmit}> <div style={{ marginBottom: '20px' }}> <label style={{ display: 'block', marginBottom: '8px' }}> 输入提示词： </label> <input type="text" value={input} onChange={(e) => setInput(e.target.value)} style={{ width: '100%', padding: '8px' }} /> </div> <button type="submit" disabled={isStreaming} style={{ padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: isStreaming ? 'not-allowed' : 'pointer' }} > {isStreaming ? '生成中...' : '生成文本'} </button> </form> <div style={{ marginTop: '30px' }}> <h2>响应：</h2> <div style={{ padding: '15px', border: '1px solid #ddd', borderRadius: '4px', minHeight: '100px', whiteSpace: 'pre-wrap' }}> {response} {isStreaming && <span style={{ animation: 'blink 1s infinite' }}>|</span>} </div> </div> <style jsx global>{` @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } `}</style> </div> ); } export default App;

3. 核心流式处理逻辑解析

让我们详细分析前端的流式处理逻辑：

  1. 发送请求：
    • 使用fetch API发送POST请求到后端
    • 设置Content-Type为application/json
  2. 获取响应流：
    • 通过response.body.getReader()获取流读取器
    • 创建TextDecoder用于解码二进制数据
  3. 循环读取数据：
    • 使用while(true)循环持续读取流数据
    • 通过reader.read()获取数据块
  4. 处理数据块：
    • 使用decoder.decode()解码二进制数据为字符串
    • 按\n\n分割SSE格式的数据
    • 解析每个数据行，提取JSON数据
    • 更新界面显示
  5. 处理结束标志：
    • 当收到[DONE]消息时，结束流式处理
    • 设置isStreaming为false，更新UI状态

技术要点详解

1. SSE格式解析

SSE（Server-Sent Events）是一种服务器向客户端推送数据的协议，其格式为：

data: { "content": "H" } data: { "content": "e" } data: { "content": "l" } data: [DONE]

每个数据块以data:开头，以两个换行符结束。我们的代码通过分割这些数据块并解析JSON来获取实际内容。

2. 流式读取实现

const reader = response.body.getReader();while(true){const{ done, value }=await reader.read();if(done)break;// 处理数据...}

这段代码使用了ReadableStream.getReader()方法获取一个流读取器，然后通过reader.read()方法异步读取数据块。当done为true时，表示流已经结束。

3. 实时更新UI

if(parsed.content){ completeResponse += parsed.content;setResponse(completeResponse);}

每次接收到新的内容片段，我们就更新completeResponse变量，并通过setResponse更新UI状态，从而实现逐个文字显示的效果。

4. 性能优化

  • 使用stream: true选项：在decoder.decode()时使用{ stream: true }选项，允许解码器在流模式下工作，提高性能。
  • 避免频繁DOM更新：虽然我们在每次接收到数据时都更新状态，但React会自动批处理这些更新，减少实际的DOM操作。

常见问题与解决方案

1. CORS问题

当前端和后端运行在不同域名或端口时，可能会遇到CORS（跨域资源共享）问题。解决方案是在后端设置适当的CORS头：

app.use((req, res, next)=>{ res.setHeader('Access-Control-Allow-Origin','*'); res.setHeader('Access-Control-Allow-Methods','GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers','Content-Type');next();});

2. 流中断处理

如果网络连接中断或服务器出错，流处理可能会异常终止。我们可以添加错误处理来提高应用的健壮性：

try{// 流式处理代码...}catch(error){ console.error('Streaming error:', error);setIsStreaming(false);setResponse('Error: '+ error.message);}

3. 大文本处理

对于非常长的文本，频繁更新UI可能会导致性能问题。我们可以考虑添加节流（throttling）或防抖（debouncing）机制：

let updateTimer;if(parsed.content){ completeResponse += parsed.content;clearTimeout(updateTimer); updateTimer =setTimeout(()=>{setResponse(completeResponse);},50);// 每50ms更新一次UI}

扩展应用场景

流式处理不仅适用于AI文本生成，还可以应用于以下场景：

  1. 实时聊天应用：显示对方正在输入的内容
  2. 文件上传进度：实时显示上传进度
  3. 数据可视化：实时更新图表数据
  4. 视频/音频流：实时播放媒体内容

总结

流式处理是一种强大的技术，它能够显著提升用户体验，特别是在处理需要时间生成的内容时。通过本文的实现示例，我们可以看到：

  1. 后端：需要设置正确的响应头，并以流式方式发送数据
  2. 前端：需要使用ReadableStream接口逐块接收和处理数据
  3. UI更新：通过实时更新状态来实现逐个文字显示的效果

流式处理的核心思想是"边生成边处理"，这与传统的"等待全部生成完成后再处理"的方式形成了鲜明对比。通过掌握流式处理技术，我们可以构建更加响应迅速、用户体验更好的Web应用。

代码优化建议

  1. 使用AbortController：添加取消请求的能力，提高用户体验
  2. 添加重试机制：处理网络波动导致的流中断
  3. 使用Web Workers：将流式处理逻辑移到Web Worker中，避免阻塞主线程
  4. 优化解码过程：对于大型流，可以考虑使用更高效的解码策略

输入输出示例

输入输出示例

前端输入：

点击"生成文本"按钮

后端输出（SSE格式）：

data: {"content": "这"} data: {"content": "是"} data: {"content": "一"} data: {"content": "个"} data: {"content": "流"} data: {"content": "式"} data: {"content": "处"} data: {"content": "理"} data: {"content": "的"} data: {"content": "示"} data: {"content": "例"} data: [DONE]

前端显示（逐字显示）：

这 这是 这是一 这是一个 这是一个流 这是一个流式 这是一个流式处 这是一个流式处理 这是一个流式处理的 这是一个流式处理的示 这是一个流式处理的示例

通过这种方式，用户可以实时看到内容的生成过程，而不是等待整个内容生成完成后一次性显示，大大提升了用户体验。

结论

流式处理是现代Web开发中的一项重要技术，它不仅可以提升用户体验，还可以降低服务器和客户端的内存消耗。通过本文的详细解析和实现示例，相信您已经对如何实现前端流式处理有了清晰的理解。

在实际应用中，您可以根据具体需求对代码进行调整和优化，以达到最佳的性能和用户体验。希望本文对您有所帮助！

📌 推荐阅读

前端工程师必懂：图解 AI Agent 的 ReAct 模式，如何设计不焦虑的等待体验
AI时代，前端到底在干什么？从“页面仔”到“智能交互架构师”的范式跃迁
RAG进化史：从“幻觉”到“可信”，及前端流式渲染实战
详解 JavaScript 高级语法：模板字符串与可选链的巧妙结合
React 中 Modal 弹框闪现问题的原理分析与解决方案
TypeScript 非空断言操作符 (!) 详解
JavaScript 的 Switch 语句：一个隐藏的“作用域陷阱”
React + Redux 深度解析：从单向数据流到闭环实现

Read more

【论文笔记】A Survey on Data Synthesis and Augmentation for Large Language Models

【论文笔记】A Survey on Data Synthesis and Augmentation for Large Language Models

A Survey on Data Synthesis and Augmentation for Large Language Models(大型语言模型的数据合成与增强综述) 1. 作者 2. 年份 2024 零、摘要 大型语言模型（LLM）的成功与否，本质上与用于训练和评估的海量、多样化和高质量数据的可用性息息相关。然而，高质量数据的增长速度明显落后于训练数据集的扩展速度，从而导致迫在眉睫的数据耗尽危机。这突显了提高数据效率和探索新数据来源的迫切需求。在此背景下，合成数据已成为一种有前景的解决方案。目前，数据生成主要包括两种主要方法：数据增强和合成。本文全面回顾并总结了LLM生命周期中的数据生成技术，包括数据准备、预训练、微调、指令调整、偏好对齐和应用。此外，我们还讨论了这些方法目前面临的限制，并探讨了未来发展和研究的潜在途径。我们的愿望是使研究人员清楚地了解这些方法，使他们能够在构建LLM时迅速确定适当的数据生成策略，同时为未来的探索提供有价值的见解。 一、介绍 * 近年来，LLM在许多行业取得了巨大的进步。但是大模型的性能高度依赖它们接受训练的数据的质量和

基于大疆MSDK实现的无人机视觉引导自适应降落功能

基于大疆MSDK实现的无人机视觉引导自适应降落功能 概述 最初需求：想要无人机在执行完航线任务后，一键落到一个指定的位置，简化人工控制。 实现一套完整的无人机自主降落功能,通过虚拟摇杆控制使无人机飞向指定位置，再利用视觉识别引导无人机精确降落到具体位置。本文中采用自适应降落策略,根据高度动态调整精度要求和下降速度,以实现安全、精确的降落。 核心点: * 虚拟摇杆导航替代FlyTo功能 * 双轴(X/Y)位置偏移实时调整 * 高度自适应降落策略 * 视觉识别引导定位 * 智能避障管理 系统架构 整体流程 否 是 高于50m 20-50m 5-20m 低于5m 是 否 是 否 否 是 用户触发Return to Vehicle 获取无人机GPS位置 计算与目标点距离 启动虚拟摇杆导航 飞向目标位置 5m/s 距离小于10m? 开始自适应降落 视觉识别系统 计算X/Y偏移量
【AI绘画】Midjourney进阶：色调详解（上）

【AI绘画】Midjourney进阶：色调详解（上）

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]本文专栏: AI绘画 | Midjourney 文章目录 * 💯前言 * 💯Midjourney中的色彩控制 * 为什么要控制色彩？ * 为什么要在Midjourney中控制色彩？ * 💯色调 * 白色调 * 淡色调 * 明色调 * 💯小结 💯前言 【AI绘画】Midjourney进阶：色相详解     https://blog.ZEEKLOG.net/2201_75539691?type=blog 在上一篇文章中，我们详细探讨了色相的基本概念和运用。而色相作为色彩的基础，虽然能帮助我们区分颜色的种类，但它并不能完全满足实际创作中的需求。尤其在 AI绘画中，颜色的呈现往往需要更加精细的调控，颜色的表达也需要超越单纯的“色相”维度。例如，当我们谈到蓝色时，仅仅知道它是蓝色并不足够。在不同的创作场景中，蓝色可以呈现为淡蓝、深蓝、灰蓝或纯蓝等多种形式，而每一种形式都能传递不同的氛围与视觉感受。 对这些变化的理解与运用，其实是对色调的掌握。色调可以看作是颜色的性格特征，
LazyLLM 多 Agent 应用全流程实践：从源码部署到可视化 Web 调试的低代码方案

LazyLLM 多 Agent 应用全流程实践：从源码部署到可视化 Web 调试的低代码方案

LazyLLM 多 Agent 应用全流程实践：从源码部署到可视化 Web 调试的低代码方案 前言：为什么选择 LazyLLM 构建多 Agent 大模型应用？ LazyLLM 作为低代码构建多 Agent 大模型应用的开发工具，可大幅降低大模型应用的开发与部署门槛。本文聚焦其在豆包模型的落地实践，将从源码部署豆包文本模型的完整配置步骤入手，延伸至官方 WebModule 启动可视化 Web 界面的实操流程，并配套精准性、简洁度等多维度的部署测试说明，为开发者提供可直接对照的实操指南，助力高效完成豆包模型在 LazyLLM 框架下的部署与验证。 LazyLLM 整体架构解析：三层联动的多 Agent 运行体系 LazyLLM 的架构分为三层级递进结构，各层级分工明确且联动协同，实现从应用开发到落地执行的全流程覆盖：上层（LazyPlatform AI 大模型应用开发平台）：核心含应用编排平台以可视化编排、发布、回流、调优的闭环完成应用构建迭代与平台管理模块通过租户、权限管理支撑多用户运维，是开发者的高效开发管理入口中层（