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

最新推荐文章于 2025-09-29 16:52:15 发布

原创最新推荐文章于 2025-09-29 16:52:15 发布 · 657 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #流式 #大模型 #sseemitter #eventsource

Vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

JavaScript/TypeScript

7 篇文章

订阅专栏

文章目录

前置
前端 js 代码
扩展

前置

解释：
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>