如何使用 SseEmitter 實現 Spring Boot 后端的流式傳輸和前端的數據接收

更新時間：2025年05月08日 09:47:06 作者：小張學Ai

SseEmitter 是 Spring Web 提供的一個用于服務器推送事件（SSE, Server-Sent Events）的工具,它可以讓服務器端不斷向客戶端推送數據,而不需要客戶端不斷輪詢,本文將介紹如何使用 SseEmitter 創(chuàng)建流式傳輸,并實現后端與前端的高效交互,感興趣的朋友一起看看吧

使用 SseEmitter 實現 Spring Boot 后端的流式傳輸和前端的數據接收

在構建現代 Web 應用時，實時數據推送是一個非常重要的需求，比如 AI 對話流式響應、實時通知推送等。而在 Spring Boot 中，SseEmitter 是一個非常方便的工具，它可以讓后端向前端進行流式數據傳輸（Server-Sent Events，簡稱 SSE）。本文將介紹如何使用 SseEmitter 創(chuàng)建流式傳輸，并實現后端與前端的高效交互。

1. 什么是 SseEmitter？

SseEmitter 是 Spring Web 提供的一個用于服務器推送事件（SSE, Server-Sent Events）的工具。它可以讓服務器端不斷向客戶端推送數據，而不需要客戶端不斷輪詢。

相比于 WebSocket，SSE 具有以下優(yōu)點：

基于 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 創(chuàng)建后端流式接口

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 錯誤！狀態(tài)碼: ${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？