nodejs + vue3 模拟 fetchEventSouce进行sse流式请求

在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组件中正确引入并使用这段代码。