前端流式渲染实战：用 SSE + Vue 3 打造 ChatGPT 式实时对话界面

1
interface SSEOptions {
2
  url: string
3
  body: Record<string, unknown>
4
  headers?: Record<string, string>
5
  onMessage: (chunk: string) => void
6
  onError?: (error: Error) => void
7
  onComplete?: () => void
8
}
9

10
export function createSSEClient() {
11
  let abortController: AbortController | null = null
12

13
  async function connect(options: SSEOptions) {
14
    abortController = new AbortController()
15

16
    try {
17
      const response = await fetch(options.url, {
18
        method: 'POST',
19
        headers: {
20
          'Content-Type': 'application/json',
21
          'Accept': 'text/event-stream',
22
          ...options.headers,
23
        },
24
        body: JSON.stringify(options.body),
25
        signal: abortController.signal,
26
      })
27

28
      if (!response.ok) {
29
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
30
      }
31

32
      const reader = response.body?.getReader()
33
      if (!reader) throw new Error('ReadableStream not supported')
34

35
      const decoder = new TextDecoder()
36
      let buffer = ''
37

38
      while (true) {
39
        const { done, value } = await reader.read()
40
        if (done) break
41

42
        buffer += decoder.decode(value, { stream: true })
43

44
        // SSE 协议：每条消息以 \n\n 分隔
45
        const lines = buffer.split('\n\n')
46
        buffer = lines.pop() || '' // 最后一段可能不完整，保留
47

48
        for (const line of lines) {
49
          const parsed = parseSSEMessage(line)
50
          if (parsed === '[DONE]') {
51
            options.onComplete?.()
52
            return
53
          }
54
          if (parsed) {
55
            options.onMessage(parsed)
56
          }
57
        }
58
      }
59

60
      options.onComplete?.()
61
    } catch (error) {
62
      if ((error as Error).name === 'AbortError') return
63
      options.onError?.(error as Error)
64
    }
65
  }
66

67
  function abort() {
68
    abortController?.abort()
69
    abortController = null
70
  }
71

72
  return { connect, abort }
73
}
74

75
function parseSSEMessage(raw: string): string | null {
76
  const lines = raw.split('\n')
77
  for (const line of lines) {
78
    if (line.startsWith('data: ')) {
79
      const data = line.slice(6)
80
      if (data === '[DONE]') return '[DONE]'
81
      try {
82
        const json = JSON.parse(data)
83
        // 兼容 OpenAI 和其他大模型 API 格式
84
        return json.choices?.[0]?.delta?.content
85
          || json.message?.content
86
          || json.text
87
          || null
88
      } catch {
89
        return data // 非 JSON 格式，直接返回原文
90
      }
91
    }
92
  }
93
  return null
94
}

1
import { ref, nextTick } from 'vue'
2
import { createSSEClient } from './useSSE'
3

4
interface Message {
5
  id: string
6
  role: 'user' | 'assistant'
7
  content: string
8
  status: 'pending' | 'streaming' | 'done' | 'error'
9
  timestamp: number
10
}
11

12
export function useChat(apiUrl: string, apiKey: string) {
13
  const messages = ref<Message[]>([])
14
  const isStreaming = ref(false)
15
  const sseClient = createSSEClient()
16

17
  function generateId() {
18
    return `msg_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
19
  }
20

21
  async function sendMessage(content: string) {
22
    if (isStreaming.value || !content.trim()) return
23

24
    // 添加用户消息
25
    const userMsg: Message = {
26
      id: generateId(),
27
      role: 'user',
28
      content: content.trim(),
29
      status: 'done',
30
      timestamp: Date.now(),
31
    }
32
    messages.value.push(userMsg)
33

34
    // 添加空的助手消息（占位）
35
    const assistantMsg: Message = {
36
      id: generateId(),
37
      role: 'assistant',
38
      content: '',
39
      status: 'streaming',
40
      timestamp: Date.now(),
41
    }
42
    messages.value.push(assistantMsg)
43

44
    isStreaming.value = true
45

46
    await sseClient.connect({
47
      url: apiUrl,
48
      headers: { Authorization: `Bearer ${apiKey}` },
49
      body: {
50
        model: 'gpt-4o',
51
        stream: true,
52
        messages: messages.value
53
          .filter(m => m.status === 'done' || m === assistantMsg)
54
          .map(m => ({ role: m.role, content: m.content })),
55
      },
56
      onMessage(chunk) {
57
        assistantMsg.content += chunk
58
        // 滚动到底部（节流处理在组件层）
59
      },
60
      onError(error) {
61
        assistantMsg.status = 'error'
62
        assistantMsg.content = `生成失败：${error.message}`
63
        isStreaming.value = false
64
      },
65
      onComplete() {
66
        assistantMsg.status = 'done'
67
        isStreaming.value = false
68
      },
69
    })
70
  }
71

72
  function stopGeneration() {
73
    sseClient.abort()
74
    const lastMsg = messages.value[messages.value.length - 1]
75
    if (lastMsg?.status === 'streaming') {
76
      lastMsg.status = 'done'
77
      lastMsg.content += '\n\n*（已手动停止生成）*'
78
    }
79
    isStreaming.value = false
80
  }
81

82
  return { messages, isStreaming, sendMessage, stopGeneration }
83
}

1
import { ref, watch, onUnmounted } from 'vue'
2
import MarkdownIt from 'markdown-it'
3
import hljs from 'highlight.js'
4

5
const md = new MarkdownIt({
6
  highlight(str, lang) {
7
    if (lang && hljs.getLanguage(lang)) {
8
      try {
9
        return hljs.highlight(str, { language: lang }).value
10
      } catch { /* fallback */ }
11
    }
12
    return '' // 使用默认转义
13
  },
14
})
15

16
export function useStreamRenderer(content: () => string) {
17
  const renderedHtml = ref('')
18
  let rafId: number | null = null
19
  let lastRenderedLength = 0
20

21
  function scheduleRender() {
22
    if (rafId) return // 已经有一帧在排队了
23
    rafId = requestAnimationFrame(() => {
24
      rafId = null
25
      const raw = content()
26
      if (raw.length !== lastRenderedLength) {
27
        renderedHtml.value = md.render(raw)
28
        lastRenderedLength = raw.length
29
      }
30
    })
31
  }
32

33
  // 监听 content 变化，调度渲染
34
  const stopWatch = watch(content, scheduleRender, { flush: 'post' })
35

36
  onUnmounted(() => {
37
    stopWatch()
38
    if (rafId) cancelAnimationFrame(rafId)
39
  })
40

41
  return { renderedHtml }
42
}

1
<template>
2
  <div class="chat-container" ref="containerRef">
3
    <div class="message-list">
4
      <div
5
        v-for="msg in messages"
6
        :key="msg.id"
7
        :class="['message', `message--${msg.role}`]"
8
      >
9
        <div class="message__avatar">
10
          {{ msg.role === 'user' ? '👤' : '🤖' }}
11
        </div>
12
        <div class="message__body">
13
          <MessageContent
14
            :content="msg.content"
15
            :streaming="msg.status === 'streaming'"
16
          />
17
          <span
18
            v-if="msg.status === 'streaming'"
19
            class="cursor-blink"
20
          >▊</span>
21
        </div>
22
      </div>
23
    </div>
24

25
    <div class="input-area">
26
      <textarea
27
        v-model="input"
28
        @keydown.enter.exact.prevent="handleSend"
29
        :disabled="isStreaming"
30
        placeholder="输入消息... (Enter 发送)"
31
        rows="1"
32
      />
33
      <button
34
        v-if="isStreaming"
35
        @click="stopGeneration"
36
        class="btn-stop"
37
      >
38
        ⏹ 停止
39
      </button>
40
      <button
41
        v-else
42
        @click="handleSend"
43
        :disabled="!input.trim()"
44
        class="btn-send"
45
      >
46
        发送 ↑
47
      </button>
48
    </div>
49
  </div>
50
</template>
51

52
<script setup lang="ts">
53
import { ref, watch, nextTick } from 'vue'
54
import { useChat } from '@/composables/useChat'
55
import MessageContent from './MessageContent.vue'
56

57
const props = defineProps<{
58
  apiUrl: string
59
  apiKey: string
60
}>()
61

62
const input = ref('')
63
const containerRef = ref<HTMLElement>()
64
const { messages, isStreaming, sendMessage, stopGeneration } = useChat(
65
  props.apiUrl,
66
  props.apiKey,
67
)
68

69
function handleSend() {
70
  const text = input.value
71
  input.value = ''
72
  sendMessage(text)
73
}
74

75
// 自动滚动到底部（带节流）
76
let scrollRafId: number | null = null
77
watch(
78
  () => messages.value[messages.value.length - 1]?.content,
79
  () => {
80
    if (scrollRafId) return
81
    scrollRafId = requestAnimationFrame(() => {
82
      scrollRafId = null
83
      const el = containerRef.value
84
      if (el) {
85
        el.scrollTop = el.scrollHeight
86
      }
87
    })
88
  },
89
)
90
</script>
91

92
<style scoped>
93
.cursor-blink {
94
  animation: blink 1s step-end infinite;
95
  color: var(--primary-color, #10a37f);
96
  font-weight: bold;
97
}
98

99
@keyframes blink {
100
  50% { opacity: 0; }
101
}
102
</style>