Nuxt3前端接收后端SSE的实现方案求助

基础客户端实现 #

直接在Vue组件中使用浏览器原生EventSource即可完成SSE连接与消息监听：

<template>
  <div>
    <h3>SSE消息推送</h3>
    <ul>
      <li v-for="msg in messages" :key="msg.id">{{ msg.content }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const messages = ref([])
let eventSource = null

onMounted(() => {
  // 连接SSE服务端端点
  eventSource = new EventSource('/api/sse')

  // 接收常规消息
  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data)
    messages.value.push({ id: Date.now(), content: data.message })
  }

  // 监听连接错误
  eventSource.onerror = (error) => {
    console.error('SSE连接异常:', error)
    eventSource.close()
  }
})

onUnmounted(() => {
  // 组件销毁时关闭连接，避免内存泄漏
  eventSource?.close()
})
</script>

封装Nuxt3插件实现复用 #

如果多个组件需要使用SSE，可封装为Nuxt客户端插件统一管理连接逻辑：

// plugins/sse.client.js
export default defineNuxtPlugin(() => {
  function createSSEConnection(url, onMessage, onError) {
    const eventSource = new EventSource(url)
    
    eventSource.onmessage = (event) => {
      onMessage(JSON.parse(event.data))
    }
    
    eventSource.onerror = (error) => {
      console.error('SSE连接出错:', error)
      onError?.(error)
      eventSource.close()
    }
    
    return {
      close: () => eventSource.close()
    }
  }

  return {
    provide: {
      sse: { createConnection: createSSEConnection }
    }
  }
})

在组件中调用插件：

<template>
  <div>{{ latestMessage }}</div>
</template>

<script setup>
const latestMessage = ref('')
const { $sse } = useNuxtApp()
let sseConn = null

onMounted(() => {
  sseConn = $sse.createConnection(
    '/api/sse',
    (data) => latestMessage.value = data.message,
    (error) => console.error('连接失败:', error)
  )
})

onUnmounted(() => {
  sseConn?.close()
})
</script>

Nuxt3服务端SSE端点示例 #

若需自行搭建SSE服务端，在Nuxt3的server目录下创建端点：

// server/api/sse.get.js
export default defineEventHandler(async (event) => {
  // 设置SSE规范响应头
  event.node.res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })

  // 模拟定时推送消息
  const interval = setInterval(() => {
    event.node.res.write(`data: ${JSON.stringify({ message: `实时更新: ${new Date().toLocaleString()}` })}\n\n`)
  }, 2000)

  // 客户端断开连接时清理资源
  event.node.req.on('close', () => {
    clearInterval(interval)
    event.node.res.end()
  })

  // 阻止Nuxt自动结束响应
  return new Promise(() => {})
})

关键注意事项 #

• SSE仅支持GET请求，跨域场景需服务端配置CORS允许相关请求头
• 无需额外安装第三方模块，浏览器原生EventSource即可满足需求
• 生产环境需确保服务端支持长连接，避免超时断开
• 若需要双向通信，可考虑WebSocket，但SSE更适合单向推送场景

内容的提问来源于stack exchange，提问作者Faissal El OSMAN