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

ComfyUI保姆级安装指南：从零配置Python环境到共享WebUI模型库（避坑大全）

ComfyUI终极安装指南：复用WebUI资源与高效配置实战 第一次接触ComfyUI时，我被它那类似Blender的节点式界面震撼到了——这完全颠覆了我对AI绘画工具的认知。但随之而来的安装过程却让我这个有三年Stable Diffusion使用经验的老用户也踩了不少坑。最头疼的问题莫过于：如何在保留现有WebUI模型库的同时，让ComfyUI也能共享这些资源？毕竟谁也不想在已经塞满3TB硬盘的模型库里再复制一份几十GB的数据。 1. 环境预检与准备工作 在开始安装前，我们需要确保系统满足ComfyUI的基本运行要求。与WebUI不同，ComfyUI对环境的纯净度要求更高，特别是Python版本的管理。 1.1 硬件配置核查 最低配置： * 显卡：NVIDIA GTX 1060（4GB显存） * 内存：16GB DDR4 * 存储：SSD剩余空间≥50GB（仅系统+程序） 推荐配置： * 显卡：RTX 3060（12GB显存）及以上 * 内存：32GB DDR4 * 存储：NVMe SSD（模型库单独存放） 提示：显存不足8GB的用户建议关闭--hig
2026实测｜DeepSeek-R1-Distill-Qwen-1.5B部署全攻略（vLLM+Open WebUI，0.8GB显存就能跑，告别服务器瓶颈）

2026实测｜DeepSeek-R1-Distill-Qwen-1.5B部署全攻略（vLLM+Open WebUI，0.8GB显存就能跑，告别服务器瓶颈）

前言：2026年，轻量级大模型部署已成为开发者核心需求——专业GPU服务器成本高昂、边缘设备算力有限，多数1.5B级模型仍需3GB以上显存，让个人开发者与中小企业望而却步。而DeepSeek-R1-Distill-Qwen-1.5B（下称“DQ-1.5B”）的出现打破僵局，通过知识蒸馏技术在1.5B参数体量下实现接近7B级模型的推理能力，配合vLLM推理加速与Open WebUI可视化交互，实测0.8GB显存即可稳定运行，无需高端服务器，个人PC、边缘设备均可轻松落地。本文结合2026年最新实测数据，从核心原理、分步实操、实测验证、应用场景、落地案例到问题排查，打造零冗余、高可用的部署全攻略，兼顾专业性与实用性，助力开发者快速上手，轻松实现轻量级大模型本地化部署。 一、核心技术解析 部署前先理清三大核心组件的核心逻辑，无需深入底层源码，聚焦“为什么能用、为什么高效”，贴合开发者落地需求。 1.1 模型核心：DeepSeek-R1-Distill-Qwen-1.5B 优势解析 DQ-1.5B是DeepSeek团队基于Qwen-1.

SpringBoot+Vue+Netty+WebSocket+WebRTC 视频聊天实现

一、关于WebRTC（Web Real-Time Communication） WebRTC 是什么:是浏览器内置的实时通信技术，能让网页直接实现音视频通话、数据传输，无需安装插件。 ICE 是什么：ICE（Interactive Connectivity Establishment）是 WebRTC 中用于解决 NAT 穿透（简单说就是让不同网络下的设备能找到彼此）的框架，而 iceServers 就是给 ICE 提供 “辅助服务器” 的配置。 STUN 服务器：STUN（Session Traversal Utilities for NAT），直译是 “NAT 会话穿透工具”，它是一种轻量级的网络服务器，核心作用是：帮助处于 NAT（网络地址转换）后的设备（比如你的电脑 / 手机）