1、在 Vue 组件中连接外部 SSE 接口
HTML:
<template><div class="ceshi-wrap"><h3 style="color:red;">来自本地文件的 SSE 流数据:</h3>-----<ul><li v-for="item in messages" :key="item.id"><span v-for="item1 in item" :key="item1.delta.timestamp" v-html="item1.delta.content" style="white-space: pre;"></span></li></ul>+++++</div>
</template>
JS:
mounted() {// http://localhost:3001/sse-stream 为返回EventStream数据的地址const eventSource = new EventSource('http://localhost:3001/sse-stream');// 监听消息事件eventSource.onmessage = (event) => {const data = JSON.parse(event.data);this.messages.push(data.choices);};// 监听错误并关闭连接eventSource.onerror = (error) => {console.error('SSE Error:', error);eventSource.close();};// 组件销毁时关闭连接(避免内存泄漏)this.$once('hook:beforeDestroy', () => {eventSource.close();});
}
2、验证:启动vue项目
npm run serve
说明:
1)自动重连
EventSource 默认会在断开后尝试重连,可通过 eventSource.close() 手动关闭。
2)在使用v-html最后展示时,会把空格去掉,想要让空格正常显示的话,可以添加css:
white-space: pre;