前端SSE（Server-Sent Events）实现详解：从原理到前端AI对话应用

优质文章学习记录

— 7 min read

一、什么是SSE？

SSE（Server-Sent Events）是一种服务器向客户端推送数据的技术，它允许服务器主动向客户端发送数据，而不需要客户端频繁轮询。SSE特别适合实时通信场景，比如AI聊天的流式输出、实时通知、股票行情更新等。

SSE的核心特点：

  • 单向通信 ：服务器向客户端单向推送数据
  • 基于HTTP ：使用标准的HTTP协议，不需要特殊的服务器支持
  • 自动重连 ：连接断开时会自动尝试重连
  • 文本格式 ：使用简单的文本格式传输数据
  • 轻量级 ：实现简单，开销小

二、SSE的工作原理

1. 连接建立

客户端通过向服务器发送一个HTTP请求来建立SSE连接。服务器返回一个特殊的响应，设置 Content-Type: text/event-stream 头，告诉客户端这是一个SSE流。

2. 数据传输

服务器以流的形式持续发送数据，每个数据块都是一个SSE格式的消息。SSE消息格式如下：

data: 消息内容\n\n

其中：

  • data: 是固定前缀
  • 消息内容可以是任意文本，通常使用JSON格式
  • \n\n 是消息结束标志

3. 客户端处理

客户端接收并解析流式数据，根据消息内容进行相应处理。在浏览器中，可以使用 EventSource API 或 fetch + ReadableStream 来处理SSE。

三、前端实现SSE的两种方式

方式一：使用原生 EventSource API

EventSource 是浏览器内置的SSE客户端API，使用非常简单：

const sse =newEventSource('/api/ stream'); sse.addEventListener('message',(event)=>{const data =JSON.parse(event. data); console.log('收到数据:', data);}); sse.addEventListener('error',(event)=>{ console.error('SSE错误:', event);});

注意 ： EventSource 只支持GET请求，无法发送POST数据。

方式二：使用 fetch + ReadableStream（适用于需要POST数据的场景）

当需要向服务器发送POST数据时（比如发送用户输入到AI模型），可以使用 fetch + ReadableStream 来模拟SSE：

const response =awaitfetch('/api/ stream-chat',{method:'POST',headers:{'Content-Type': 'application/ json',},body:JSON.stringify({userInput: inputText })});if(!response.ok)thrownewError(`HTTP 错误：${response.status}`);if(!response.body)thrownewError("响应体不可用");const reader = response.body.getReader();const decoder =newTextDecoder();let buffer ='';while(true){const{ done, value }=await reader.read();if(done)break; buffer += decoder.decode(value,{stream:true});const lines = buffer.split('\n\n'); buffer = lines.pop()||'';for(const line of lines){if(!line.startsWith('data: '))continue;const dataStr = line.slice(6);const data =JSON.parse(dataStr);// 处理数据...}}

四、实战：AI聊天的流式输出实现

1. 后端实现（Express + LangChain）

app.post('/api/stream-chat',async(req, res)=>{try{const{ userInput }= req.body;if(!userInput)return res.status(400).json({error: "用户 输入不能为空" });// 设置 SSE 响应头 res.setHeader('Content-Type','text/event-stream'); res.setHeader('Cache-Control','no-cache'); res.setHeader('Connection','keep-alive');// 立即发送响应头 res.flushHeaders();// 调用 AI 模型生成回复const stream =await model.stream(`用户提问：${userInput}， 请用简洁的语言回复`);// 逐块发送 AI 输出forawait(const chunk of stream){ res.write(`data: ${JSON.stringify({content: chunk?. content || chunk })}\n\n`);}// 发送结束标识 res.write(`data: ${JSON.stringify({done:true})} \n\n`); res.end();}catch(err){ console.error('Error in stream-chat:', err); res.write(`data: ${JSON.stringify({error: err?. message ||'服务器内部错误'})} \n\n`); res.end();}});

2. 前端实现（fetch + ReadableStream）

// 发送请求const response =awaitfetch('http://localhost:8000/api/ stream-chat',{method:'POST',headers:{'Content-Type': 'application/ json',},body:JSON.stringify({userInput: inputText })});// 检查响应if(!response.ok)thrownewError(`HTTP 错误：${response.status}`);if(!response.body)thrownewError("响应体不可用");// 创建读取器和解码器const reader = response.body.getReader();const decoder =newTextDecoder();let buffer ='';// 处理流式数据while(isStreaming){const{ done, value }=await reader.read();if(done)break;// 解码并处理 SSE 格式数据 buffer += decoder.decode(value,{stream:true});const lines = buffer.split('\n\n'); buffer = lines.pop()||'';// 处理每一条消息for(const line of lines){if(!line.startsWith('data: '))continue;const dataStr = line.slice(6);const data =JSON.parse(dataStr);// 处理错误信息if(data.error){ aiMsgElement.textContent =` 错误：${data.error}`; isStreaming =false;break;}// 处理结束标识if(data.done){ isStreaming =false;break;}// 逐字显示 AI 回复 aiMsgElement.textContent += data.content;}}

五、SSE实现的关键技术点

1. 数据格式处理

SSE使用简单的文本格式，每个消息以 data: 开头，以 \n\n 结束。前端需要：

  • 正确解析这种格式
  • 处理可能分块到达的数据（使用缓冲区）
  • 处理不完整的消息（保留到缓冲区）

2. 流式数据读取

使用 ReadableStream API 读取流式数据：

  • getReader() ：创建读取器
  • read() ：异步读取数据块
  • done ：标识流是否结束
  • value ：当前数据块（二进制）

3. 文本解码

使用 TextDecoder API 将二进制数据转换为字符串：

  • decode(value, { stream: true }) ：流式解码，支持分块处理

4. 错误处理

需要处理多种错误情况：

  • HTTP 错误（响应状态码非200）
  • 响应体不可用
  • JSON 解析错误
  • 网络中断

5. 状态管理

需要管理流式处理的状态：

  • isStreaming ：控制是否继续处理数据
  • 停止按钮：允许用户手动中断流式传输
  • 状态重置：流式结束后恢复UI状态

六、SSE vs WebSocket

特性 SSE WebSocket 通信方向 单向（服务器→客户端） 双向 协议 HTTP WebSocket 实现复杂度 低 高 自动重连 支持 需手动实现 数据格式 文本（通常JSON） 二进制或文本 跨域支持 支持（CORS） 需特殊配置 适用场景 实时通知、流式输出 实时聊天、游戏

七、SSE的优缺点

优点：

  1. 实现简单 ：基于HTTP，不需要特殊的服务器支持
  2. 自动重连 ：浏览器会自动处理重连
  3. 轻量级 ：开销小，适合简单的实时场景
  4. 兼容性好 ：支持所有现代浏览器
  5. 易于调试 ：使用标准HTTP工具即可调试

缺点：

  1. 单向通信 ：只能服务器向客户端推送
  2. 数据格式限制 ：只能传输文本数据
  3. 连接数限制 ：浏览器对同一域名的连接数有限制
  4. 不支持二进制数据 ：需要转换为文本格式

八、适用场景

SSE特别适合以下场景：

  1. AI聊天的流式输出 ：实时显示AI生成的回复
  2. 实时通知 ：系统通知、消息提醒
  3. 实时数据更新 ：股票行情、天气数据
  4. 日志流 ：实时查看服务器日志
  5. 监控数据 ：系统状态、性能指标

九、代码优化建议

1. 错误处理增强

try{// 现有代码...}catch(error){// 显示错误信息 aiMsgElement.textContent +=`\n （出错：${error.message}）`;// 在控制台输出错误 console.error("流式接收错误：", error);// 重置状态 isStreaming =false; sendBtn.disabled =false; stopBtn.style.display ='none';}

2. 性能优化

// 对于大型消息，使用DocumentFragment 减少DOM操作 const fragment = document.createDocumentFragment();const tempElement = document.createElement('div');// 处理数据时先更新临时元素 tempElement.textContent += data. content;// 定期更新DOM（比如每100ms）if(Date.now()- lastUpdateTime >100){ aiMsgElement.textContent = tempElement.textContent; lastUpdateTime = Date.now();}

3. 用户体验优化

// 添加加载动画 aiMsgElement.innerHTML = '<div class="loading">生成中...</div>';// 流式结束后移除加载动画if(data.done){ aiMsgElement.innerHTML = aiMsgElement.textContent; isStreaming =false;break;}

十、总结

SSE是一种简单高效的服务器向客户端推送数据的技术，特别适合实时流式输出场景。通过本文的介绍，你应该已经了解了：

  1. SSE的基本概念和工作原理
  2. 前端实现SSE的两种方式
  3. 如何实现AI聊天的流式输出
  4. SSE的优缺点和适用场景
  5. 代码优化的建议
    SSE虽然简单，但功能强大，是实时Web应用的重要工具之一。在实际开发中，根据具体需求选择合适的实时通信方案，才能达到最佳效果。

希望本文对你理解和实现SSE有所帮助！

Read more

PyTorch实战——基于文本引导的图像生成技术与Stable Diffusion实践

PyTorch实战——基于文本引导的图像生成技术与Stable Diffusion实践

PyTorch实战——基于文本引导的图像生成技术与Stable Diffusion实践 * 0. 前言 * 1. 基于扩散模型的文本生成图像 * 2. 将文本输入编码为嵌入向量 * 3. 条件 UNet 模型中的文本数据融合机制 * 4. 使用 Stable Diffusion 模型生成图像 * 相关链接 0. 前言 在本节中，我们将为扩散模型添加文本控制能力。学习如何通过文字描述来引导图像生成过程，实现从"纯噪声+文本"生成图像，而不仅是从纯噪声生成。 1. 基于扩散模型的文本生成图像 在扩散模型的 UNet 模型训练流程中，我们仅训练模型从含噪图像中预测噪声。为实现文生图功能，需使用以下架构，将文本作为额外输入注入 UNet 模型： 这样的 UNet 模型称为条件 UNet 模型 ，或者更精确地说，是文本条件 UNet
Llama-2-7b在昇腾NPU上的六大核心场景性能基准报告

Llama-2-7b在昇腾NPU上的六大核心场景性能基准报告

引言 随着大语言模型（LLM）技术的飞速发展，其底层算力支撑硬件的重要性日益凸显。传统的GPU方案之外，以华为昇腾（Ascend）为代表的NPU（神经网络处理单元）正成为业界关注的焦点。为了全面、深入地评估昇腾NPU在实际LLM应用中的性能表现，我们进行了一项针对性的深度测评。本次测评选用业界广泛应用的开源模型Llama-2-7b，在 Atlas 800T A2 训练卡 平台上进行部署、测试与分析，旨在为开发者和决策者提供一份详实的核心性能数据、深度的场景性能剖析、以及可靠的硬件选型与部署策略参考。 模型资源链接：本项目测评使用的模型权重及相关资源可在 GitCode 社区获取：https://gitcode.com/NousResearch/Llama-2-7b-hf 一、 测评环境搭建与准备 扎实的前期准备是确保测评数据准确可靠的基石。本章节将详细记录从激活昇腾NPU计算环境到完成所有依赖库安装的全过程，确保测试流程的透明与可复现性。 1.1 激活NPU Notebook实例 我们通过GitCode平台进行本次操作。首先，需要进入项目环境并激活一个Notebook实例，这

一文读懂UGC、PGC、PUGC、OGC、MGC、BGC与AIGC

一文读懂UGC、PGC、PUGC、OGC、MGC、BGC与AIGC 在当今这个信息爆炸的数字时代，我们无时无刻不被各种形式的内容所包围——从短视频、直播到图文资讯、专业评测。你或许经常听到UGC、PGC、AIGC这些听起来很“高级”的缩写，但它们究竟代表什么？彼此之间又有什么区别和联系？今天，就让我们一次性说清楚内容创作领域的各种“GC”（Generated Content）。 文章目录 * 一文读懂UGC、PGC、PUGC、OGC、MGC、BGC与AIGC * 1 核心区别：是“谁”在创作内容？ * 2 UGC (User Generated Content) - 用户生成内容 * 3 PGC (Professionally Generated Content) - 专业生成内容 * 4
GitHub Copilot AI 编程超全使用教程，从入门到精通

GitHub Copilot AI 编程超全使用教程，从入门到精通

前言 作为 GitHub 推出的 AI 编程助手，GitHub Copilot 凭借强大的代码补全、自然语言交互、自动化开发等能力，成为了开发者提升编码效率的 “神器”。它能支持主流 IDE（VS Code、IntelliJ IDEA、Eclipse 等）、终端等多环境，还可自定义配置、切换 AI 模型，适配个人和团队的不同开发需求。本文结合 GitHub 官方文档和实际使用经验，用通俗易懂的方式讲解 Copilot 的完整使用方法，从环境搭建到高级技巧，再到故障排除，一站式搞定 Copilot AI 编程！ 一、GitHub Copilot 核心能力一览 在开始使用前，先快速了解 Copilot 的核心功能，清楚它能帮我们解决哪些开发问题： 1. 智能代码补全：