App.vue 实现 Server-Sent Events (SSE)

### 实现 Server-Sent Events (SSE) 在 App.vue 中 为了在 `App.vue` 组件中实现 SSE，需先确保已安装必要的依赖包，并按照特定方式编写客户端代码来处理来自服务器的消息。 #### 安装依赖 对于 Vue 项目而言，推荐使用专门用于简化 SSE 的库如 `vue-sse`。通过命令行工具执行以下操作完成安装： ```bash npm install vue-sse ``` #### 修改入口文件 main.ts 或者 main.js 根据所使用的构建工具不同，可能需要调整导入路径。以下是基于 TypeScript 和 JavaScript 的两种情况下的配置实例[^2]： ##### 对于 TypeScript 用户 (`main.ts`) ```typescript import { createApp } from 'vue'; import VueSSE from 'vue-sse'; const app = createApp(App); app.use(VueSSE, { polyfill: true, }); ``` ##### 对于 JavaScript 用户 (`main.js`) [^1] ```javascript import Vue from 'vue'; import VueSSE from 'vue-sse'; Vue.use(VueSSE); new Vue({ render: h => h(App), }).$mount('#app'); ``` #### 编辑 App.vue 文件 接下来，在 `App.vue` 中创建一个新的 `<script>` 块以初始化 SSE 连接并监听消息事件。这里提供了一个简单的例子说明如何接收并展示从服务器推送过来的数据: ```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 lang="ts"> export default { data() { return { messages: [] as string[], }; }, mounted() { this.initiateSSE(); }, methods: { initiateSSE(): void { const eventSource = new EventSource('/stream'); // 替换成实际的API endpoint eventSource.onmessage = ({data}) => { console.log(`Received message: ${data}`); this.messages.push(data); // 将新消息添加到列表 if(this.messages.length >= 5){ this.messages.shift(); // 如果超过五个条目，则移除最早的一条 } }; eventSource.onerror = () => { console.error('EventSource failed.'); eventSource.close(); }; } } }; </script> ``` 此段代码展示了如何建立与服务器之间的持续连接以及当有新的数据传入时更新界面的方法。需要注意的是 `/stream` 是假设的服务端点位置，请替换为真实的 API 地址。