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>