Axios实现SSE响应的完整方法

本文详细介绍了如何在Web浏览器环境中使用Axios处理Server-Sent Events (SSE) API响应。由于EventSource不支持POST请求，文章重点讲解了如何利用Axios的`onDownloadProgress`属性读取SSE数据流，并提供代码示例。同时，针对Axios处理SSE数据流的局限性，推荐了`fetch-event-source`库作为替代方案，该库提供更便捷的API来处理SSE。此外，本文还提供了服务端Java代码示例，展示了如何使用Spring WebClient处理SSE，帮助开发者构建完整的SSE解决方案。无论选择Axios还是`fetch-event-source`，亦或是后端Spring WebClient，都能有效处理SSE数据流，满足不同项目需求。

本文档旨在指导开发者如何使用 Axios 在 Web 浏览器环境中处理 Server-Sent Events (SSE) 类型的 API 响应。由于 EventSource 不支持 POST 请求，我们将探讨如何利用 Axios 的 onDownloadProgress 属性来读取 SSE 数据流，并介绍 fetch-event-source 库的替代方案。此外，还将提供服务端 Java 代码示例，展示如何使用 Spring WebClient 处理 SSE。

前端：使用 Axios 读取 SSE 数据流

当需要通过 POST 请求与 SSE API 进行交互时，传统的 EventSource 接口不再适用。我们可以利用 Axios 提供的 onDownloadProgress 回调函数来逐段读取服务器推送的数据。

以下是一个使用 Axios 处理 SSE 响应的示例：

axios({
  url: '/my-service/chat', // 你的 API 地址
  method: 'POST',
  data: {
    model: "gpt-3.5-turbo",
    prompt: "Say this is a test",
    max_tokens: 7,
    steam: true,
    temperature: 0
  },
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'text/event-stream', // 声明接受 SSE 数据流
    'SESSION_ID': 'Header-Value'
  },
  onDownloadProgress: progressEvent => {
    const xhr = progressEvent.event.target;
    const { responseText } = xhr;
    console.log("=====responseText======");
    console.log(responseText);
    // 在这里处理接收到的数据，例如解析 SSE 格式的数据
  }
}).then(({ data }) => {
  // 请求成功完成后的处理，注意，这里可能不会接收到完整的数据，而是接收到 Axios 自身的响应数据结构。
  console.log("请求完成", data);
}).catch(error => {
    console.error("请求出错", error);
});

代码解释：

1. url: 指定 SSE API 的地址。
2. method: 设置为 'POST'，以发送 POST 请求。
3. data: 包含要发送到服务器的数据。
4. headers:
   • Content-Type: 设置为 'application/json'，表明发送的数据是 JSON 格式。
   • Accept: 设置为 'text/event-stream'，告知服务器客户端期望接收 SSE 数据流。
   • SESSION_ID: 示例的自定义 Header。
5. onDownloadProgress: 这个回调函数会在接收到服务器推送的数据时被触发。progressEvent.event.target.responseText 包含了当前接收到的所有数据。你需要在此处解析 SSE 格式的数据，并进行相应的处理。

注意事项：

• responseText 包含了从连接建立开始到当前时刻的所有数据。这意味着你需要自己处理数据的分割和解析，以提取出单个 SSE 事件。
• responseType: 'stream' 属性在浏览器环境中通常不直接支持，因此省略。
• 服务器端需要正确设置 Content-Type 为 text/event-stream，并按照 SSE 协议推送数据。

替代方案：使用 fetch-event-source

fetch-event-source 是一个专门用于处理 SSE 的 JavaScript 库，它提供了更方便的 API 来处理 SSE 数据流。

你可以通过 npm 安装它：

npm install fetch-event-source

然后，你可以使用以下代码来处理 SSE 响应：

import { fetchEventSource } from '@microsoft/fetch-event-source';

const url = '/my-service/chat';
const data = {
  model: "gpt-3.5-turbo",
  prompt: "Say this is a test",
  max_tokens: 7,
  steam: true,
  temperature: 0
};

fetchEventSource(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'text/event-stream',
    'SESSION_ID': 'Header-Value'
  },
  body: JSON.stringify(data),
  onmessage(event) {
    console.log("Received SSE message:", event.data);
    // 处理接收到的 SSE 事件
  },
  onerror(error) {
    console.error("SSE error:", error);
    // 处理错误
  },
  onclose() {
    console.log("SSE connection closed");
    // 连接关闭后的处理
  }
});

代码解释：

• fetchEventSource 函数接收 URL 和一个配置对象作为参数。
• method、headers 和 body 属性与 Axios 的配置类似。
• onmessage 回调函数会在接收到 SSE 事件时被触发，event.data 包含事件的数据。
• onerror 回调函数会在发生错误时被触发。
• onclose 回调函数会在连接关闭时被触发。

后端：Spring WebClient 处理 SSE

以下是一个使用 Spring WebClient 处理 SSE 的 Java 代码示例：

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

public class SseClient {

    public void consumeServerSentEvent() {
        WebClient client = WebClient.create("http://localhost:8080"); // 你的服务器地址

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

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

代码解释：

1. WebClient.create(): 创建一个 WebClient 实例，指定服务器的地址。
2. uri("/stream-sse"): 指定 SSE endpoint 的 URI。
3. accept(MediaType.TEXT_EVENT_STREAM): 设置 Accept header 为 text/event-stream。
4. retrieve().bodyToFlux(ServerSentEvent.class): 将响应体转换为 Flux>，以便异步处理 SSE 事件。
5. subscribe(): 订阅 Flux，并提供三个回调函数：
   • onNext: 在接收到新的 SSE 事件时被调用。
   • onError: 在发生错误时被调用。
   • onComplete: 在连接关闭时被调用。

总结：

本文介绍了使用 Axios 和 fetch-event-source 在前端处理 SSE 响应的方法，以及使用 Spring WebClient 在后端处理 SSE 的方法。选择哪种方法取决于你的具体需求和项目环境。使用 Axios 时需要手动解析数据流，而 fetch-event-source 提供了更方便的 API。在后端，Spring WebClient 提供了强大的异步处理能力，可以轻松地处理 SSE 数据流。

到这里，我们也就讲完了《Axios实现SSE响应的完整方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！