vue sse

### 实现 Vue.js 中的 SSE 集成 #### 使用 `VueSSE` 插件集成 SSE 为了简化在 Vue.js 应用中集成 Server-Sent Events (SSE)，可以利用专门为此设计的插件——`VueSSE`。这个插件支持 Vue 2 和 Vue 3 版本的应用程序开发[^1]。 安装该插件之后，在应用初始化阶段引入并注册它： ```javascript import Vue from 'vue'; import VueSSE from '@johmun/vue-sse'; // 注册插件 Vue.use(VueSSE); ``` 接着可以在组件内部定义一个响应式属性来存储来自服务器的消息列表，并设置监听器以接收新的更新： ```html <template> <div id="app"> <ul v-if="messages.length > 0"> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> </div> </template> <script> export default { data() { return { messages: [] }; }, created() { this.$sse.create({ url: '/stream', format: 'json' }).then((client) => { client.addEventListener('message', ({ detail }) => { this.messages.push(detail.data.text || JSON.stringify(detail)); }); // 断开连接逻辑 this.$once('hook:beforeDestroy', () => { client.disconnect(); }); }); } }; </script> ``` 上述代码展示了如何创建一个新的 SSE 客户端实例并与特定 URL 建立连接；每当接收到新消息时，会将其添加到本地状态中的 `messages` 数组内显示出来。同时考虑到了当组件销毁之前断开与服务端之间的链接，防止资源泄露问题的发生[^3]。 #### 手动实现 SSE 而不依赖第三方库 如果不希望通过额外加载外部依赖的方式完成这项工作，则可以直接基于原生 JavaScript API 来构建相同的功能模块。下面是一个简单的例子说明怎样做到这一点： ```html <template> <div id="app"> <h1>Messages:</h1> <ul> <li v-for="item in items" :key="item.id">{{ item.content }}</li> </ul> </div> </template> <script> let eventSource; export default { name: "App", data() { return { items: [], }; }, mounted() { eventSource = new EventSource('/api/events'); eventSource.onmessage = function(event) { let newItem = {id: Date.now(), content:event.data}; this.items.unshift(newItem); }.bind(this); eventSource.onerror = function(error){ console.error(`EventSource failed (${error})`); if (eventSource.readyState === EventSource.CLOSED) { console.warn("Reconnecting..."); setTimeout(() => { eventSource.close(); // Close the old one first. eventSource = null; this.mounted(); // Reconnect by calling mounted again. }, 5000); // Wait for a while before reconnecting. } }.bind(this); }, unmounted(){ if(eventSource && eventSource.readyState !== EventSource.CLOSED){ eventSource.close(); } } } </script> ``` 这段代码实现了基本的 SSE 功能，包括建立连接、处理传入的数据以及错误恢复机制。值得注意的是这里也包含了重新尝试连接的服务端异常情况下的自动重连策略。