vue3接收SSE流数据进行实时渲染日志

后端使用的是 Spring Boot WebFlux （响应式编程框架），并且返回的是 Server-Sent Events (SSE) 流式数据，那么在 Vue3 中，需要使用 EventSource API 或 fetch + 流式读取 来正确获取响应内容。

方案 1：使用 EventSource（推荐，兼容 SSE 标准）

如果你的后端返回的是标准的 SSE 数据流（Content-Type: text/event-stream），可以直接用浏览器原生的 EventSource 监听数据：

前端代码（Vue3 Composition API）

<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const logContent = ref('') // 存储日志内容
const logContainer = ref(null)
const error = ref(null)
let eventSource = null

// 对后端返回的数据做换行
const formattedText = computed(() => {
  return logContent.value.replace(/#n/g, '\n')
})
// 封装连接 SSE 的逻辑
const connectToLogStream = () => {
  eventSource = new EventSource('/api/algWebflux/getLog')
  eventSource.onmessage = (event) => {
    // 新内容追加到已有内容下方，并转换 #n 为换行符
    logContent.value += event.data.replace(/#n/g, '\n') + '\n\n'
    // 自动滚动到底部
    scrollToBottom()
    eventSource.onerror = (err) => {
      console.error('SSE error:', err)
      // 5秒后自动重连
      setTimeout(connectSSE, 5000)
    }
  }

  eventSource.onerror = (err) => {
    error.value = '日志流连接失败'
    console.error('SSE Error:', err)
  }
}

const scrollToBottom = () => {
  nextTick(() => {
    if (logContainer.value) { // 确保元素存在
      logContainer.value.scrollTop = logContainer.value.scrollHeight
    }
  })
}

 // 组件挂载时调用
onMounted(() => {
  connectToLogStream()
});

// 组件卸载时关闭连接
onUnmounted(() => {
  if (eventSource) eventSource.close()
})
</script>

如果代码中调用接口写成这种方式报错跨域错误（如 No 'Access-Control-Allow-Origin' header）

  eventSource = new EventSource('http://192.168.14.231:5400/algWebflux/getLog')

那就需要在 vite.config.js 中配置

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://192.168.14.231:5400',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

然后前端请求 /api/algWebflux/getLog

最后在页面进行渲染就可以了

<div class="text-container">
            {{ formattedText }}
          </div>