前端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

7个用于运行LLM的最佳开源WebUI

7个用于运行LLM的最佳开源WebUI

无论是希望将AI大模型集成到业务流程中，还是寻求企业客户服务自动化，亦或者是希望创建一个强大的个人学习工具。可能都需要考虑数据安全、灵活度以及更具有可控性的使用和开发基础。值得考虑的一个方案是：将大模型（LLM）私有化并且创建一个好用的LLM WebUI系统。 下面，我们推荐7个出色的开源LLM WebUI 系统。 01.Open WebUI（Ollama WebUI） https://github.com/open-webui/open-webui Star：45.7K 开发语言：Python、TypeScript\Svelte Open WebUI是一个可扩展、功能丰富且用户友好的WebUI，旨在完全离线操作。它支持包括Ollama和OpenAI在内的各种LLM运行容器或者API。 产品特点： * 直观的界面：受ChatGPT启发的用户友好型聊天 * 响应式设计：在桌面和移动的上实现流畅的性能 * 轻松安装：使用Docker/Kubernetes轻松安装 * 主题定制：个性化与多个主题 * 高亮：增强代码的可读性 * Markdown LaTeX支持：
微信小程序webview postmessage通信指南

微信小程序webview postmessage通信指南

需求概述 在微信小程序中使用 web-view 组件与内嵌网页进行双向通信，主要通过 postMessage 实现。以下是完整的配置和使用方法： 通信指南 微信小程序webview官方文档 1. 基础配置 小程序端配置 // app.json 或 page.json { "usingComponents": {}, "permission": { "scope.webView": { "desc": "用于网页和小程序通信" } } } 网页端配置 <!-- 内嵌网页需引入微信JS-SDK --> <script src="https://res.wx.qq.com/open/
【前端】win11操作系统安装完最新版本的NodeJs运行npm install报错，提示在此系统上禁止运行脚本

【前端】win11操作系统安装完最新版本的NodeJs运行npm install报错，提示在此系统上禁止运行脚本

🌹欢迎来到《小5讲堂》🌹 🌹这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹 目录 * 前言 * 解决方案 * 方法1：以管理员身份运行 PowerShell 并更改执行策略 * 方法2：只为当前会话临时允许 * 方法3：使用命令提示符 (CMD) * 方法4：绕过策略执行单个脚本 * 推荐解决方案 * Node.js 详细介绍 * 什么是 Node.js？ * 核心特点 * 1. **非阻塞 I/O 和事件驱动** * 2. **单线程但高并发** * 架构组成 * 1. **V8 JavaScript 引擎** * 2. **LibUV 库** * 3. **核心模块** * 安装与使用

前端文件上传处理：别再让用户等待了！

前端文件上传处理：别再让用户等待了！ 毒舌时刻 文件上传？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便加个input[type=file]就能实现文件上传？别做梦了！到时候你会发现，大文件上传会导致页面崩溃，用户体验极差。 你以为FormData就能解决所有问题？别天真了！FormData在处理大文件时会导致内存溢出，而且无法显示上传进度。还有那些所谓的文件上传库，看起来高大上，用起来却各种问题。 为什么你需要这个 1. 用户体验：良好的文件上传处理可以提高用户体验，减少用户等待时间。 2. 性能优化：合理的文件上传策略可以减少服务器负担，提高上传速度。 3. 错误处理：完善的错误处理可以避免上传失败时的用户困惑。 4. 安全保障：安全的文件上传处理可以防止恶意文件上传，保障系统安全。 5. 功能丰富：支持多文件上传、拖拽上传、进度显示等功能，满足不同场景的需求。 反面教材 // 1. 简单文件上传 <input type="file&