使用 SseEmitter 實現(xiàn) Spring Boot 后端的流式傳輸和前端的數(shù)據(jù)接收

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

1. 什么是 SseEmitter？

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

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

• 基于 HTTP 連接，無需額外的協(xié)議支持，前端可以直接使用 EventSource 進(jìn)行接收。
• 支持自動重連，如果連接斷開，瀏覽器會自動嘗試重新建立連接。
• 更適合單向推送數(shù)據(jù)的場景，如 AI 生成流式文本、服務(wù)器消息推送等。

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. 前端如何接收流式數(shù)據(jù)

?? 使用 fetch 處理 SSE（流式數(shù)據(jù)），fetch 默認(rèn)不會處理流式數(shù)據(jù)，因此我們需要手動解析 ReadableStream 以逐步接收數(shù)據(jù)。

? 前端代碼（基于 fetch/infetch）

async function fetchStreamData() {
    const response = await fetch("/api/chat/stream");
    // 確保服務(wù)器支持流式數(shù)據(jù)
    if (!response.ok) {
        throw new Error(`HTTP 錯誤！狀態(tài)碼: ${response.status}`);
    }
    const reader = response.body.getReader();
    const decoder = new TextDecoder("utf-8");
    // 讀取流式數(shù)據(jù)
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        // 解碼并輸出數(shù)據(jù)
        const text = decoder.decode(value, { stream: true });
        console.log("收到數(shù)據(jù):", text);
    }
    console.log("流式傳輸完成");
}
// 調(diào)用流式請求
fetchStreamData().catch(console.error);

?? 為什么使用 fetch + ReadableStream？

• 兼容性更好：fetch API 是現(xiàn)代瀏覽器的標(biāo)準(zhǔn)方法，相比 EventSource 可處理更多類型的流式數(shù)據(jù)（如 JSON、HTML、二進(jìn)制）。
• 更靈活：可以手動控制數(shù)據(jù)讀取，支持自定義解析方式。
• 適用于 AI 大模型返回：如果你的后端是 ChatGPT/DeepSeek API 這樣的 AI 接口，fetch + stream 是最佳方式。

到此這篇關(guān)于使用 SseEmitter 實現(xiàn) Spring Boot 后端的流式傳輸和前端的數(shù)據(jù)接收的文章就介紹到這了,更多相關(guān)Spring Boot SseEmitter流式傳輸和數(shù)據(jù)接收內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論