使用 SseEmitter 实现 Spring Boot 后端的流式传输和前端的数据接收

技术文档

使用 SseEmitter 实现 Spring Boot 后端的流式传输和前端的数据接收

在构建现代 Web 应用时，实时数据推送是一个非常重要的需求，比如 AI 对话流式响应、实时通知推送等。而在 Spring Boot 中，SseEmitter 是一个非常方便的工具，它可以让后端向前端进行流式数据传输（Server-Sent Events，简称 SSE）。本文将介绍如何使用 SseEmitter 创建流式传输，并实现后端与前端的高效交互。

1. 什么是 SseEmitter？

SseEmitter 是 Spring Web 提供的一个用于服务器推送事件（SSE, Server-Sent Events）的工具。它可以让服务器端不断向客户端推送数据，而不需要客户端不断轮询。

相比于 WebSocket，SSE 具有以下优点：

基于 HTTP 连接，无需额外的协议支持，前端可以直接使用 EventSource 进行接收。
支持自动重连，如果连接断开，浏览器会自动尝试重新建立连接。
更适合单向推送数据的场景，如 AI 生成流式文本、服务器消息推送等。

2. 在 Spring Boot 中使用 SseEmitter

2.1 添加依赖

如果你的项目使用的是 Spring MVC，无需额外的依赖。但如果你使用的是 Spring WebFlux，请确保你的 pom.xml 中包含以下依赖（仅 WebFlux 需要）：

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId></dependency>

2.2 创建后端流式接口

java的代码示例如下：

@RestController@RequestMapping(\"/api/chat\")public class ChatController { @GetMapping(\"/stream\") public SseEmitter streamResponse() { SseEmitter emitter = new SseEmitter(0L); // 0L 表示永不超时 Executors.newSingleThreadExecutor().execute(() -> { try { for (int i = 1; i <= 5; i++) {  emitter.send(\"消息 \" + i);  Thread.sleep(1000); // 模拟延迟 } emitter.complete(); } catch (Exception e) { emitter.completeWithError(e); } }); return emitter; }}

3. 前端如何接收流式数据

📌 使用 fetch 处理 SSE（流式数据），fetch 默认不会处理流式数据，因此我们需要手动解析 ReadableStream 以逐步接收数据。

✅ 前端代码（基于 fetch/infetch）

async function fetchStreamData() { const response = await fetch(\"/api/chat/stream\"); // 确保服务器支持流式数据 if (!response.ok) { throw new Error(`HTTP 错误！状态码: ${response.status}`); } const reader = response.body.getReader(); const decoder = new TextDecoder(\"utf-8\"); // 读取流式数据 while (true) { const { done, value } = await reader.read(); if (done) break; // 解码并输出数据 const text = decoder.decode(value, { stream: true }); console.log(\"收到数据:\", text); } console.log(\"流式传输完成\");}// 调用流式请求fetchStreamData().catch(console.error);

📌 为什么使用 fetch + ReadableStream？

兼容性更好：fetch API 是现代浏览器的标准方法，相比 EventSource 可处理更多类型的流式数据（如 JSON、HTML、二进制）。
更灵活：可以手动控制数据读取，支持自定义解析方式。
适用于 AI 大模型返回：如果你的后端是 ChatGPT/DeepSeek API 这样的 AI 接口，fetch + stream 是最佳方式。

使用 SseEmitter 实现 Spring Boot 后端的流式传输和前端的数据接收