SSE（Server-Sent Events）Vue3实现chatgpt的流式输出

SSE (Server-Sent Events) 是一种Web API技术，允许服务器向客户端推送实时数据，而不需要客户端频繁地发送请求。在 Vue 3 中，我们可以利用它的响应式系统以及 WebSocket 或者 EventSource 对象实现类似 ChatGPT 的流式输出。

首先，在 Vue 项目中设置一个事件源（EventSource），它会持续连接到服务器：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$http = axios.create({
  // 如果需要，配置axios用于与服务器通信
})

// 使用EventSource
app.mount('#app')
async function start SSE() {
  const eventSource = new EventSource('/sse') // 替换为实际的推流URL
  eventSource.onmessage = function (event) {
    // 解析接收到的数据
    const data = JSON.parse(event.data)
    console.log('Received message:', data)
    // 更新视图，例如显示聊天内容
    updateChatDisplay(data)
  }
  try {
    await eventSource.open()
    console.log('Connected to SSE server.')
  } catch (error) {
    console.error('Error connecting to SSE:', error)
  }
}

startSSE()

在这个例子中，`updateChatDisplay`函数是一个假设的方法，用于更新用户界面展示的聊天信息。当服务器通过 SSE 发送新消息时，这个函数会被调用，动态地添加新的聊天记录。