前端js+vue承接后端SSE流式输出结果

前置

解释：
Server-Sent Events：服务器发送事件，是一种基于 HTTP 的轻量级协议，允许服务器主动向客户端推送文本数据（如 JSON、纯文本等）
特点：

• 单向通信：仅服务器 → 客户端方向
• 基于 HTTP/HTTPS：无需特殊协议
• 自动重连：浏览器内置支持断线重连
• 简单易用：前端直接使用 EventSource API

注意：

• 前端 SSE 格式解析：会自动忽略 data: 前缀和 \n\n 分隔符
• 服务器返回 5xx 错误会触发 error 事件
• 网络中断会自动重连（默认 3 秒重试）

流程：

前端 (Vue)       → 发起SSE请求 →   Spring Boot (Controller)
  ↓                                   ↓
(EventSource)    ← 流式数据 ←   WebClient → 大模型API (流式HTTP)

前端 js 代码

<template>
  <div>
    <button @click="startStream">开始接收流</button>
    <button @click="closeStream">停止</button>
    <div>{{ streamData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      streamData: "",
      eventSource: null
    };
  },
  methods: {
    startStream() {
      // 1. 创建EventSource连接
      this.eventSource = new EventSource("http://your-spring-api/sse-stream");

      // 2. 监听消息事件
      this.eventSource.addEventListener("message", (event) => {
        // 实际数据在 event.data 中
        this.streamData += event.data; // 追加到页面
      });

      // 3. 监听错误事件
      this.eventSource.addEventListener("error", (err) => {
        console.error("SSE error:", err);
        this.closeStream(); // 出错时关闭连接
      });
    },
    closeStream() {
      if (this.eventSource) {
        this.eventSource.close(); // 主动关闭连接
        this.eventSource = null;
      }
    }
  },
  beforeDestroy() {
    this.closeStream(); // 组件销毁时清理
  }
};
</script>

扩展

自定义事件类型：

后端发送：event: update\ndata: {…}\n\n

前端监听：.addEventListener(“update”, handler)