Axios监听SSE事件流方法详解

还在寻找Axios实现SSE事件流监听的完美方案吗？本文深入探讨了在Web浏览器环境中使用Axios处理Server-Sent Events (SSE) 的方法。由于EventSource不支持POST请求，本文将重点介绍如何利用Axios的`onDownloadProgress`事件接收和处理SSE数据流，并提供详细的代码示例，包括如何设置请求头、发送POST数据以及解析响应。此外，我们还提供了`fetch-event-source`库作为替代方案，以及Java Spring服务端实现SSE的示例代码，助你快速搭建实时数据推送服务。无论你遇到什么问题，本文都能为你提供有价值的参考，助力你的项目开发。

本文档旨在指导开发者如何使用 Axios 在 Web 浏览器环境中处理 Server-Sent Events (SSE)。由于 EventSource 不支持 POST 请求，我们将探讨使用 Axios 配合 onDownloadProgress 事件来接收和处理 SSE 数据流，并提供其他替代方案，例如 fetch-event-source 库以及服务端实现的示例。

使用 Axios 和 onDownloadProgress 处理 SSE

Server-Sent Events (SSE) 是一种服务器推送技术，允许服务器向客户端单向实时地发送数据。 通常，EventSource 是处理 SSE 的首选方法，但它仅支持 GET 请求。当需要使用 POST 请求与 SSE API 交互时，我们需要寻找替代方案。

Axios 提供了一个 onDownloadProgress 回调函数，可以在接收响应数据时触发。我们可以利用这个回调函数来逐块地读取 SSE 数据流。

示例代码：

axios({
  url: 'https://api', // 替换为你的 SSE API 地址
  data: {
    prompt: 'json data' // 替换为你的 POST 数据
  },
  headers: {
    'accept': '*', // 接受所有类型，确保能接收 text/event-stream
    'content-type': 'application/json' // 声明发送的数据类型为 JSON
  },
  method: 'POST',
  onDownloadProgress: progressEvent => {
     const xhr = progressEvent.event.target;
     const { responseText } = xhr;
     console.log("=====responseText======");
     console.log(responseText); // 处理接收到的 SSE 数据
  }
}).then(({ data }) => Promise.resolve(data));

代码解释：

• url: 指定 SSE API 的地址。
• data: 包含要发送到服务器的 POST 数据。
• headers:
  • accept: '*'：设置 Accept 头以接受任何内容类型。这确保服务器返回的 text/event-stream 可以被客户端接受。
  • content-type: 'application/json'：声明发送的数据类型为 JSON。
• method: 'POST'：指定使用 POST 方法。
• onDownloadProgress: 这是一个回调函数，在接收到响应数据时被调用。
  • progressEvent.event.target: 提供对 XMLHttpRequest 对象的访问。
  • xhr.responseText: 包含到目前为止接收到的所有响应文本。 每次接收到新的数据块，responseText 都会更新。

注意事项：

• responseText 包含到目前为止接收到的所有数据，你需要根据 SSE 协议解析这些数据。 SSE 协议通常使用换行符 (\n) 分隔不同的事件。
• 确保服务器正确设置了 Content-Type 响应头为 text/event-stream。
• 根据实际情况调整 accept 头，如果服务器只返回 text/event-stream，则可以将其设置为 'text/event-stream'。

其他替代方案

除了使用 Axios 和 onDownloadProgress 之外，还有其他一些方法可以处理 SSE：

• fetch-event-source 库： 这是一个专门用于处理 SSE 的 JavaScript 库，它提供了更高级的 API 和错误处理机制。 你可以通过 npm 安装： npm install fetch-event-source。 具体使用方法请参考其 GitHub 仓库：https://github.com/Azure/fetch-event-source

服务端实现示例 (Java Spring)

以下是使用 Spring Framework 在服务端实现 SSE 的示例代码：

import org.springframework.http.MediaType;
import org.springframework.http.codec.ServerSentEvent;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.reactive.function.client.WebClient;
import reactor.core.publisher.Flux;

import java.time.LocalTime;
import java.time.Duration;

@RestController
public class SSEController {

    @GetMapping(value = "/stream-sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux> streamEvents() {
        return Flux.interval(Duration.ofSeconds(1))
                .map(sequence -> ServerSentEvent.builder()
                        .id(String.valueOf(sequence))
                        .event("periodic-event")
                        .data("Server time: " + LocalTime.now())
                        .build());
    }
}

这段代码创建了一个 /stream-sse 端点，它每秒发送一个包含服务器时间的 SSE 事件。

客户端消费示例 (Java Spring WebClient):

import org.springframework.http.codec.ServerSentEvent;
import org.springframework.web.reactive.function.client.WebClient;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;

import java.time.LocalTime;
import java.time.Duration;

public class SSEClient {

    public static void main(String[] args) {
        WebClient client = WebClient.create("http://localhost:8080");

        Flux> eventStream = client.get()
                .uri("/stream-sse")
                .retrieve()
                .bodyToFlux(ServerSentEvent.class);

        eventStream.subscribe(
                content -> System.out.println("Time: " + LocalTime.now() + " - event: " + content.event() + ", id: " + content.id() + ", content: " + content.data()),
                error -> System.err.println("Error receiving SSE: " + error),
                () -> System.out.println("Completed!!!"));

        // Keep the program running for a while to receive events
        try {
            Thread.sleep(10000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

总结

虽然 EventSource 是处理 SSE 的标准方法，但在需要使用 POST 请求时，Axios 配合 onDownloadProgress 提供了一种可行的替代方案。 同时，也可以考虑使用 fetch-event-source 库以获得更高级的功能。 最后，服务端也需要正确配置 SSE 端点，并设置正确的 Content-Type 响应头。 通过结合客户端和服务端的正确实现，可以有效地使用 SSE 进行实时数据推送。

以上就是《Axios监听SSE事件流方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！