java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > Spring Boot SseEmitter流式传输和数据接收

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

作者:小张学Ai

SseEmitter 是 Spring Web 提供的一个用于服务器推送事件(SSE, Server-Sent Events)的工具,它可以让服务器端不断向客户端推送数据,而不需要客户端不断轮询,本文将介绍如何使用 SseEmitter 创建流式传输,并实现后端与前端的高效交互,感兴趣的朋友一起看看吧

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

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

1. 什么是 SseEmitter?

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

相比于 WebSocket,SSE 具有以下优点:

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?

到此这篇关于使用 SseEmitter 实现 Spring Boot 后端的流式传输和前端的数据接收的文章就介绍到这了,更多相关Spring Boot SseEmitter流式传输和数据接收内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文