vue3使用SSE使用

### 实现服务器发送事件(SSE)在Vue 3中的方法

为了实现在Vue 3项目里利用服务器发送事件(Server-Sent Events)，可以创建一个新的`EventSource`实例来监听来自服务端的消息。一旦连接建立成功，便可以通过监听消息事件获取更新并处理这些数据。

当组件初始化时，在`setup()`函数内启动SSE连接，并确保在组件卸载前关闭此链接以防止内存泄漏[^1]：

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('');

    let eventSource;

    function startEventSource() {
      eventSource = new EventSource('/stream'); // 假设这是提供流式传输的服务地址
      eventSource.onmessage = ({ data }) => {
        console.log(`Received Data: ${data}`);
        message.value = `New Message: ${data}`;
      };

      eventSource.onerror = () => {
        console.error('Error occurred while connecting to the stream');
        eventSource.close();
      };
    }

    onMounted(() => {
      startEventSource();
    });

    onUnmounted(() => {
      if (eventSource && eventSource.readyState === 1 /* OPEN */) {
        eventSource.close();
      }
    });

    return {
      message,
    };
  },
};

上述代码展示了如何通过组合API的方式集成SSE到Vue 3应用中。这里定义了一个响应式的`message`变量用于存储接收到的信息；并通过生命周期钩子管理`EventSource`对象的创建与销毁过程。