前端 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分支），流式输出显著减少了用户的感知延迟，让交互更加自然流畅。