vue3 sse nuxt

在 Nuxt 3 中集成 Server-Sent Events (SSE) 可以通过服务端和客户端的配合实现服务器推送功能。Nuxt 3 基于 Vue 3 和 Nitro 构建，支持 SSR（服务端渲染）和 API 路由，因此可以通过创建自定义 API 端点来处理 SSE 请求，并在客户端使用 `EventSource` 监听事件流。 ### 创建 SSE 服务端接口 在 Nuxt 3 中，可以利用 Nitro 提供的 API 路由功能来创建一个 SSE 接口。Nitro 支持异步函数和流式响应，非常适合用于实现实时数据推送。 以下是一个简单的 SSE 服务端接口示例： ```ts // 文件路径: server/routes/sse.ts export default defineEventHandler((event) => { const headers = event.node.req.headers; const res = event.node.res; // 设置响应头为 text/event-stream res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); // 模拟持续发送消息 let count = 0; const interval = setInterval(() => { count++; res.write(`data: {"message": "Hello from server", "count": ${count}}\n\n`); }, 2000); // 处理客户端断开连接 event.node.req.on('close', () => { clearInterval(interval); res.end(); }); }); ``` 该接口会在 `/api/sse` 上提供 SSE 流，每隔两秒向客户端推送一次 JSON 格式的消息。 ### 在客户端监听 SSE 事件 在 Nuxt 3 的页面或组件中，可以使用浏览器原生的 `EventSource` 来监听服务端推送的事件流。 ```vue <template> <div> <h2>实时消息</h2> <ul> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const messages = ref([]); onMounted(() => { const eventSource = new EventSource('/api/sse'); eventSource.addEventListener('message', (event) => { try { const data = JSON.parse(event.data); messages.value.push(data.message + ' #' + data.count); } catch (e) { console.error('Failed to parse message:', e); } }); eventSource.onerror = () => { console.error('SSE connection error'); }; }); </script> ``` 上述代码在组件挂载后会建立到 `/api/sse` 的连接，并监听 `message` 事件，将接收到的数据更新到页面上。 ### 使用中间件增强 SSE 功能（可选） 如果需要对 SSE 进行身份验证、日志记录或其他中间件操作，可以在 `server/middleware` 中创建相应的逻辑。例如，可以添加一个中间件来检查请求头中的 token： ```ts // server/middleware/auth.sse.ts export default defineNitroPlugin((nitroApp) => { nitroApp.hooks.beforeHandle = (event) => { if (event.path.startsWith('/api/sse')) { const authHeader = event.node.req.headers.authorization; if (!authHeader || !authHeader.startsWith('Bearer ')) { event.node.res.statusCode = 401; event.node.res.end('Unauthorized'); return false; } } return true; }; }); ``` ### 性能与错误处理建议 - **超时与重连**：`EventSource` 默认会在连接中断后自动重连。可以通过设置 `eventSource.reconnectInterval = 5000;` 来控制重连间隔。 - **流式输出优化**：确保每次写入 `res.write()` 后都加上 `\n\n`，符合 SSE 协议格式要求。 - **资源释放**：务必在客户端关闭连接时清理定时器或数据库连接，避免内存泄漏。 ---