Vue3实战：如何优雅实现ChatGPT流式输出（附完整代码）

6次阅读

没有评论

共计 3150 个字符，预计需要花费 8 分钟才能阅读完成。

在传统的前后端交互中，很多开发者会采用轮询（Polling）的方式获取最新数据。这种方式虽然实现简单，但存在几个明显缺陷：

频繁的 HTTP 请求会增加服务器压力
数据更新存在延迟，无法实现真正的实时性
在移动网络环境下会显著增加耗电量

SSE 是一种服务器向浏览器推送更新的技术，特别适合文本数据流场景：

基于 HTTP 协议，不需要额外的协议升级
自动重连机制，连接中断后会尝试重新连接
浏览器原生支持 EventSource API
单向通信（服务器→客户端）

WebSocket 提供了全双工通信能力：

需要专门的 WebSocket 服务器
适合需要频繁双向通信的场景
协议握手过程稍复杂

对于 ChatGPT 这类以接收服务器消息为主的场景，SSE 通常是更轻量级的选择。

// 创建自定义 axios 实例
const streamClient = axios.create({
  baseURL: 'https://api.openai.com',
  responseType: 'stream' // 关键配置
})

// 添加响应拦截器
streamClient.interceptors.response.use(response => {
  const stream = response.data
  return new Promise((resolve) => {
    let fullResponse = ''stream.on('data', chunk => {const chunkStr = chunk.toString()
      fullResponse += chunkStr
      // 这里可以 emit 自定义事件或调用回调
    })

    stream.on('end', () => {resolve(fullResponse)
    })
  })
})

// types.ts
type Message = {
  id: string
  content: string
  role: 'user' | 'assistant'
}

// useChatStream.ts
export function useChatStream() {const messages = ref<Message[]>([])
  const isLoading = ref(false)
  const error = ref<Error | null>(null)

  const sendMessage = async (prompt: string) => {
    try {
      isLoading.value = true
      const messageId = Date.now().toString()

      // 添加用户消息
      messages.value.push({
        id: messageId,
        content: prompt,
        role: 'user'
      })

      // 添加占位回复
      messages.value.push({id: `temp-${messageId}`,
        content: '',
        role: 'assistant'
      })

      const response = await streamClient.post('/v1/chat/completions', {
        model: 'gpt-3.5-turbo',
        messages: [{role: 'user', content: prompt}
        ],
        stream: true
      })

      // 流式更新消息内容
      response.on('data', (chunk) => {
        const assistantMessageIndex = messages.value.findIndex(m => m.id === `temp-${messageId}`
        )
        if (assistantMessageIndex !== -1) {messages.value[assistantMessageIndex].content += chunk
        }
      })

      response.on('end', () => {
        // 更新为最终消息 ID
        messages.value[assistantMessageIndex].id = `msg-${Date.now()}`
      })

    } catch (err) {error.value = err} finally {isLoading.value = false}
  }

  return {messages, isLoading, error, sendMessage}
}

<template>
  <div class="chat-container">
    <div 
      v-for="message in messages" 
      :key="message.id"
      :class="['message', message.role]"
    >
      <div class="content">
        {{message.content}}
      </div>
    </div>

    <div v-if="isLoading" class="loading-indicator">
      AI 正在思考...
    </div>
  </div>
</template>

<style scoped>
.message {
  margin: 10px 0;
  padding: 12px;
  border-radius: 8px;
}

.message.user {
  background: #e3f2fd;
  align-self: flex-end;
}

.message.assistant {
  background: #f5f5f5;
  align-self: flex-start;
}

.loading-indicator {
  color: #666;
  padding: 8px;
  font-style: italic;
}
</style>

当处理大型文本流时，建议：

设置合理的 chunk 大小（如 1024 字节）
使用 TextDecoder 处理二进制流
实现缓冲区管理，避免内存堆积

长时间运行的流式连接可能导致内存增长：

定期检查 window.performance.memory
考虑实现自动垃圾回收机制
对于超长对话，建议分页或存档历史消息

const MAX_RETRIES = 3
let retryCount = 0

function connectWithRetry() {const eventSource = new EventSource('/api/stream')

  eventSource.onerror = () => {if (retryCount < MAX_RETRIES) {setTimeout(() => {
        retryCount++
        connectWithRetry()}, 1000 * retryCount)
    }
  }

  return eventSource
}