揭秘 ChatGPT 同款“打字机”特效：前端流式输出 (Streaming) 原理全解

前端 AI 实战：从 Buffer 原理到 LLM 流式输出

在当今的大模型（LLM）应用中，用户体验的核心往往体现在"响应速度"上。为了避免用户面对长久的空白等待，流式输出（Streaming） 成为了标准配置。它允许后端边生成边返回，前端则实时渲染，极大地优化了等待体验。

本文将结合 Vue 3 和原生 JS 的二进制处理能力，带你深入理解并实现一个 AI 流式对话功能。

1. 底层基石：二进制与 Buffer

在深入业务代码之前，我们需要理解数据传输的底层形式。计算机存储和网络通信本质上都是二进制。在 JavaScript 中，处理这些非文本数据（如流媒体、文件、网络包）需要用到缓冲区（Buffer）。

HTML5 提供了强大的编解码工具：TextEncoder 和 TextDecoder。

编码与解码演示

我们可以创建一个固定长度的 ArrayBuffer（例如 12 字节），并通过视图（Uint8Array）来操作它。以下代码展示了如何将字符串"编码"为二进制并存入 Buffer，再"解码"回字符串：

JavaScript 复制代码

// 1. 编码：将字符串转换为 Uint8Array
const encoder = new TextEncoder();
const myBuffer = encoder.encode("你好 HTML5"); 

// 2. 内存操作：创建 Buffer 和视图
const buffer = new ArrayBuffer(12);
const view = new Uint8Array(buffer);
// 将编码后的数据写入 Buffer
for (let i = 0; i < myBuffer.length; i++) {
    view[i] = myBuffer[i];
}

// 3. 解码：将 Buffer 还原为字符串
const decoder = new TextDecoder();
const originalText = decoder.decode(buffer);
console.log(originalText); // 输出: "你好 HTML5"

理解了这个过程，我们就能明白为什么在接收 AI 的流式响应时，需要不断地进行 decode 操作。

2. Vue 3 实现流式交互

在实际应用中（如 App.vue），我们通过 fetch API 请求大模型接口，并开启 stream: true 模式。

核心状态管理

使用 Vue 3 的 ref 来定义响应式数据，实现数据变化时模板自动更新：

question: 用户输入的问题。
content: AI 回复的内容（单向绑定，用于展示）。
stream: 控制是否开启流式模式。

JavaScript

csharp 复制代码

import { ref } from 'vue'
const question = ref('讲一个20字的故事')
const content = ref("") 
const stream = ref(true)

请求与流读取

当用户点击提交时，主要逻辑如下：

发起请求 ：向 DeepSeek API 发送 POST 请求，Header 中携带 API Key，Body 中开启 stream: true。
获取读取器 ：通过 response.body.getReader() 获取响应体的读取对象。
循环解码 ：使用 while 循环不断读取流中的二进制数据块（Chunk）。

关键代码解析：解决"粘包"与解析

在流式传输中，服务端返回的数据可能是不完整的 JSON 片段，直接解析会报错。我们需要一个缓冲机制来处理这些片段。

JavaScript 复制代码

// 初始化解码器
const decoder = new TextDecoder();
let buffer = ''; // 用于拼接不完整的 JSON 字符串

while(!done) {
    // 读取二进制流
    const { value, done: doneReading } = await reader?.read();
    done = doneReading;
    
    // 1. 解码二进制数据并拼接到 buffer
    const chunkValue = buffer + decoder.decode(value);
    
    // 2. 处理拼接后的字符串
    buffer = ''; // 清空 buffer，准备重新分配
    
    // 分割数据行（服务端通常以 data: 开头，换行符分割）
    const lines = chunkValue.split('\n').filter(line => line.startsWith('data: '));
    
    for (const line of lines) {
        const incoming = line.slice(6); // 去掉 'data: ' 前缀
        if (incoming === '[DONE]') {
            done = true; // 流结束标志
            break;
        }
        
        try {
            // 3. 尝试解析 JSON
            const data = JSON.parse(incoming);
            const delta = data.choices[0].delta.content;
            if (delta) {
                // 4. 成功解析，将增量内容追加到 UI
                content.value += delta; 
            }
        } catch(err) {
            // 5. 解析失败（说明 JSON 不完整），存回 buffer 等待下一块数据
            buffer += `data: ${incoming}`; 
        }
    }
}

代码逻辑亮点

Buffer 拼接 ：const chunkValue = buffer + decoder.decode(value)。这一步至关重要，因为它处理了网络分包导致的一个 JSON 被切成两半的情况。
容错处理 ：try...catch 块捕获 JSON.parse 的错误。如果解析失败，说明当前行数据不完整，将其存回 buffer，等待下一次循环拼接后再解析。
实时反馈 ：content.value += delta 实现了类似打字机的效果，让用户感觉到 AI 正在"思考"并逐字输出。

3. 总结

通过结合 HTML5 的 TextDecoder 和 Vue 3 的响应式系统，我们实现了一个高效的 AI 流式对话界面。

技术点 ：fetch 流式响应、ArrayBuffer 解码、JSON 增量解析。
用户体验 ：相比于传统的一次性等待（中的 else 分支），流式输出显著减少了用户的感知延迟，让交互更加自然流畅。