vue3流式返回(SSE)

Vue 3 流式返回（Server-Sent Events，简称 SSE）是指一种服务器推送技术，允许服务器向客户端发送数据流。与传统的请求-响应模式不同，SSE 允许服务器单向地向客户端发送数据，通常用于实现实时数据更新的场景，如实时聊天、股票报价更新、新闻滚动条等。

在 Vue 3 中，可以使用 `EventSource` API 来接收服务器发送的事件流。下面是一个简单的示例，展示如何在 Vue 3 中使用 SSE：

1. 首先，你需要创建一个服务器端的端点来发送 SSE 事件。在 Node.js 中，可以使用 Express 框架结合 `http` 模块来实现：

const express = require('express');
const app = express();
const http = require('http');

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const sendEvent = setInterval(() => {
    const data = `data: ${new Date().toLocaleTimeString()}\n\n`;
    res.write(data);
  }, 1000);

  req.on('close', () => {
    clearInterval(sendEvent);
  });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

2. 然后在 Vue 3 组件中，使用 `EventSource` 监听服务器端点发送的事件：

<template>
  <div>
    <p>Server Time: {{ serverTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serverTime: '',
      eventSource: null
    };
  },
  mounted() {
    this.eventSource = new EventSource('/events');
    this.eventSource.onmessage = (event) => {
      this.serverTime = event.data;
    };
  },
  beforeDestroy() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  }
};
</script>

通过上述代码，每当服务器端点发送新的时间数据时，Vue 组件中的 `serverTime` 数据属性就会更新，页面上会实时显示服务器当前的时间。