在Node.js中使用Vue 3模拟fetchEventSource进行SSE（Server-Sent Events）流式请求，可以通过创建一个简单的Node.js服务器，使用http.ServerResponse实现SSE协议。
以下是一个简单的例子：
Node.js 服务器代码 (server.js):
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url === '/sse') {
// 设置Content-Type头部和启动SSE响应
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
// 模拟数据发送
setInterval(() => {
const data = { message: 'Hello, SSE!' };
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
// 处理客户端关闭连接
req.on('close', () => {
console.log('SSE connection closed');
});
} else {
res.writeHead(404);
res.end();
}
});
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000/sse');
});
确保你已经安装了Node.js环境，然后在终端中运行上述服务器代码。
Vue 3 客户端代码 (EventSource.vue):
<template>
<div>
<h1>SSE Event Stream</h1>
<div v-for="event in events" :key="event.id">
{{ event.message }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
events: [],
source: null,
};
},
methods: {
startEventSource() {
this.source = new EventSource('http://localhost:3000/sse');
this.source.onmessage = (event) => {
const data = JSON.parse(event.data);
this.events.push(data);
};
},
stopEventSource() {
if (this.source) {
this.source.close();
}
},
},
mounted() {
this.startEventSource();
},
beforeUnmount() {
this.stopEventSource();
},
};
</script>
在Vue组件中，我们使用原生的EventSourceAPI来建立SSE连接，并监听服务器发送的消息。当组件被挂载时，我们开始监听事件，在组件销毁之前，我们关闭连接。
确保你的Vue 3项目配置正确，并且在你的Vue组件中正确引入并使用这段代码。