在vue中使用sse

在Vue.js中，Server-Sent Events (SSE) 或称为服务器推送事件，是一种实时通信的技术，允许从服务器向客户端推送数据而无需用户主动请求。要在Vue应用中使用SSE，你需要遵循以下几个步骤：

1. **安装依赖**:
首先，在项目中安装`vue-eventsource`库，它提供了一个易于使用的API处理SSE。可以使用npm或yarn安装：

   npm install vue-eventsource
   # 或者
   yarn add vue-eventsource

2. **引入并创建实例**:
在main.js或需要的地方导入并使用`EventSource`：

   import EventSource from 'vue-eventsource';

   Vue.prototype.$eventSource = new EventSource();

3. **监听事件**:
在组件内部，你可以使用`$eventSource`来监听服务器发送的数据。当新的事件到达时，会触发对应的回调函数：

   export default {
     data() {
       return {
         message: '',
       };
     },
     mounted() {
       this.$eventSource.on('message', (data) => {
         this.message = data;
       });
     },
     beforeDestroy() {
       // 当组件销毁时关闭连接
       this.$eventSource.close();
     },
   };

4. **在服务端发送事件**:
服务端（例如Node.js、Express等）使用适当的中间件库（如`express-sse`）来设置SSE响应。每有新数据可用时，通过`write()`方法推送给客户端。