如何实现前端接收Spring Boot ResponseBodyEmitter流式数据？

Question

在使用 Spring Boot 的 `ResponseBodyEmitter` 实现后端流式数据推送时，前端如何实时接收并处理这些数据是一个常见问题。许多开发者遇到前端无法逐步接收数据、响应被缓存或连接过早关闭的情况，导致用户体验不佳或功能失效。这个问题通常涉及 HTTP 协议的流式传输机制、前端请求方式（如 `fetch` 或 `EventSource`）的选择以及服务器端配置（如超时时间、响应头设置）是否合理。如何正确配置前后端以实现稳定、高效的流式数据传输，是开发实时数据推送功能时需要解决的关键问题。

Answer 1

一、引言：流式数据推送的背景与挑战

随着 Web 应用对实时性的要求不断提高，流式数据传输（Streaming）成为一种常见的技术手段。Spring Boot 提供了 ResponseBodyEmitter 类来支持服务端向客户端的流式响应。

然而，在实际开发中，很多开发者发现前端无法逐步接收数据，或者响应被缓存、连接提前关闭等问题，这通常与 HTTP 协议的流式机制、前端请求方式选择以及服务端配置密切相关。

二、基础概念：HTTP 流式传输机制

HTTP 协议支持流式传输的方式主要有以下几种：

• 长轮询（Long Polling）：客户端不断发起请求，服务器保持连接直到有数据。
• Server-Sent Events（SSE）：服务器单向向客户端推送数据，适用于事件流。
• HTTP 流（HTTP Streaming）：客户端发起一次请求，服务器保持连接打开，持续发送数据。

其中，ResponseBodyEmitter 主要用于实现 HTTP Streaming。

三、Spring Boot 中使用 ResponseBodyEmitter 实现流式响应

在 Spring Boot 控制器中，可以使用 ResponseBodyEmitter 来逐步发送数据给客户端：

@GetMapping("/stream")
public ResponseBodyEmitter streamData() {
    ResponseBodyEmitter emitter = new ResponseBodyEmitter(60_000L); // 超时时间
    new Thread(() -> {
        try {
            for (int i = 1; i <= 10; i++) {
                emitter.send("data chunk " + i + "\n");
                Thread.sleep(1000);
            }
            emitter.complete();
        } catch (Exception e) {
            emitter.completeWithError(e);
        }
    }).start();
    return emitter;
}

关键点包括：

• 设置合理的超时时间（默认为 5 秒）。
• 异步发送数据，避免阻塞主线程。
• 调用 complete() 或 completeWithError() 结束响应。

四、前端请求方式选择：Fetch vs EventSource

方式	适用场景	是否支持流式	是否自动重连
Fetch	通用请求，适合一次性数据获取	支持流式（通过 response.body）	不支持
EventSource	服务器事件推送	支持（SSE 协议）	支持

使用 Fetch 获取流式响应的示例：

fetch('/stream')
  .then(response => {
    const reader = response.body.getReader();
    function read() {
      reader.read().then(({ done, value }) => {
        if (done) return;
        const text = new TextDecoder().decode(value);
        console.log('Received:', text);
        read();
      });
    }
    read();
  });

五、常见问题与解决方案

在使用流式数据传输时，常见的问题包括：

1. 前端无法逐步接收数据：可能是服务器端未正确刷新输出流，或前端未使用流式读取方式。
2. 响应被缓存：需要设置响应头 Cache-Control: no-cache。
3. 连接过早关闭：需调整超时时间或避免服务器端提前关闭连接。

建议的服务器端响应头设置如下：

HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.TEXT_EVENT_STREAM);
headers.setCacheControl(CacheControl.noCache());
return ResponseEntity.ok()
    .headers(headers)
    .body(emitter);

六、系统架构图与流程分析

下面是一个典型的流式数据推送流程图：

graph TD
      A[前端发起请求] --> B[Spring Boot 接收请求]
      B --> C[创建 ResponseBodyEmitter]
      C --> D[启动异步线程发送数据]
      D --> E[逐步发送数据到客户端]
      E --> F[前端逐步接收并处理数据]
      F --> G{是否完成?}
      G -->|是| H[关闭连接]
      G -->|否| E

通过上述流程，可以看到整个流式传输的生命周期及关键控制点。