基于Vue3+DeepSeek实现流式打字机效果

data: {"choices":[{"delta":{"content":"你"}}]}
data: {"choices":[{"delta":{"content":"好"}}]}
data: [DONE]

VITE_DEEPSEEK_API_KEY=你的DeepSeek密钥

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.deepseek.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

const response = await fetch(endpoint, {
  method: 'POST',
  headers,
  body: JSON.stringify({
    model: 'deepseek-v4-flash',
    messages: [{ role: 'user', content: question.value }],
    stream: stream.value
  })
})

const reader = response.body?.getReader() // 创建读取器
const decoder = new TextDecoder('utf-8') // 二进制→字符串解码器
let done = false // 流结束标记
let buffer = '' // 残缺数据缓存

while (!done) {
  const { value, done: doneReading } = await reader?.read()
  done = doneReading
  // ... 处理数据
}

// 1. 拼接：上一轮残留的buffer + 本轮新解码的内容
const chunkValue = buffer + decoder.decode(value)

// 2. 分割：按换行符切成一个个片段
const allChunks = chunkValue.split('\n')

// 3. 存残片：弹出最后一段，大概率是不完整的，存回buffer留给下一轮
buffer = allChunks.pop()

// 剩下的都是完整行，过滤出合法的 data: 消息
const lines = allChunks.filter(line => line.startsWith('data: '))

for (const line of lines) {
  const incoming = line.slice(6) // 切掉 "data: " 6个字符
  
  // 遇到结束标记，终止循环
  if (incoming === '[DONE]') {
    done = true
    break
  }

  try {
    const data = JSON.parse(incoming)
    // 防御：防止 choices 为空导致报错
    if (!data.choices?.length) continue

    // 只取回答正文，null/undefined 兜底为空字符串
    const text = data.choices[0].delta.content ?? ''
    if (text) {
      content.value += text
    }
  } catch (err) {
    // 极端情况解析失败，重新拼回 data: 前缀存入 buffer
    buffer = `data: ${incoming}`
  }
}

const delta = data.choices[0].delta
const reasoning = delta.reasoning_content ?? ''
const answer = delta.content ?? ''
content.value += reasoning + answer

} else {
  const data = await response.json()
  content.value = data.choices[0].message.content
}

<script setup>
import { ref } from 'vue'

const question = ref('讲一个中国龙的故事')
const content = ref('')
const stream = ref(true)

const update = async () => {
  if (!question.value) return
  content.value = '思考中....'

  const endpoint = '/api/chat/completions' // 走Vite代理，避免跨域
  const headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`
  }

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        model: 'deepseek-v4-flash',
        messages: [{ role: 'user', content: question.value }],
        stream: stream.value
      })
    })

    if (!response.ok) throw new Error('请求失败')

    if (stream.value) {
      content.value = ''
      const reader = response.body?.getReader()
      const decoder = new TextDecoder('utf-8')
      let done = false
      let buffer = ''

      while (!done) {
        const { value, done: doneReading } = await reader?.read()
        done = doneReading

        // 拼接上一轮残留数据
        const chunkValue = buffer + decoder.decode(value)
        const allChunks = chunkValue.split('\n')
        // 尾部残缺数据存回buffer
        buffer = allChunks.pop()
        // 过滤有效消息行
        const lines = allChunks.filter(line => line.startsWith('data: '))

        for (const line of lines) {
          const incoming = line.slice(6)
          if (incoming === '[DONE]') {
            done = true
            break
          }

          try {
            const data = JSON.parse(incoming)
            if (!data.choices?.length) continue

            const delta = data.choices[0].delta
            // 仅拼接回答正文，如需思考过程可加上 reasoning_content
            const text = delta.content ?? ''
            if (text) content.value += text
          } catch (e) {
            buffer = `data: ${incoming}`
          }
        }
      }
    } else {
      const data = await response.json()
      content.value = data.choices[0].message.content
    }
  } catch (err) {
    content.value = `出错了：${err.message}`
  }
}
</script>

<template>
  <div class="container">
    <div class="input-row">
      <label>输入：</label>
      <input v-model="question" class="input" />
      <button @click="update">提交</button>
    </div>
    <div class="output">
      <label class="stream-toggle">
        <input type="checkbox" v-model="stream" />
        开启流式输出
      </label>
      <div class="content">{{ content }}</div>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}
.input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
button {
  padding: 8px 16px;
  background: #165DFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.output {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  min-height: 300px;
  background: #fafafa;
}
.stream-toggle {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}
.content {
  line-height: 1.6;
  white-space: pre-wrap;
}
</style>