Vue3+SSE实现AI流式对话打字机效果，70行代码优化用户体验

1. 项目概述：从“卡顿劝退”到“丝滑对话”

最近在捣鼓一个AI对话类的Web应用，后端用的是DeepSeek的API，前端是Vue3。功能跑通后，发现一个巨影响体验的问题：AI回复大段文字时，前端要等接口完全返回，整个页面会“卡死”好几秒，用户看着一个空白的输入框，体验极差，分分钟想关掉网页。这其实就是典型的“非流式”接口调用带来的阻塞问题。为了解决这个问题，我决定实现流式输出，并配上那种一个字一个字“打”出来的打字机效果，让等待过程变得可感知、甚至有点趣味性。最终，我用Vue3配合Server-Sent Events（SSE）协议，核心代码不到70行，就搞定了从连接到渲染的完整流程。这篇文章，我就来拆解一下这个实战过程，把踩过的坑和总结的技巧都分享给你。

2. 核心思路与技术选型解析

2.1 为什么是SSE，而不是WebSocket？

当我们需要从服务器实时接收数据时，前端同学第一时间可能会想到WebSocket。它功能强大，全双工通信，能发能收。但对于我们这个“AI流式回复”的场景，SSE（Server-Sent Events）其实是更合适、也更简单的选择。

核心原因在于通信模式。我们的需求非常明确：前端发起一个问题，后端通过DeepSeek API获取流式响应，并持续不断地将文本片段推送给前端。这是一个典型的单向数据流（服务器 -> 客户端）。前端在整个过程中，除了最初发起请求和可能的中断操作，并不需要频繁地向服务器发送数据。

SSE就是为这种“服务器向客户端单向推送”的场景而生的。它基于普通的HTTP协议，因此无需像WebSocket那样建立独立的、复杂的持久化连接，省去了额外的握手和连接管理开销。对于前端开发者来说，使用SSE的API也极其简单，一个EventSource对象就能搞定监听，浏览器原生支持，兼容性也不错。

注意：虽然现代浏览器基本都支持SSE，但在一些特殊环境（如某些版本的IE）或需要双向通信的复杂场景下，WebSocket仍是首选。但就“接收AI流式文本”这个单一任务而言，SSE在实现复杂度和资源消耗上都有明显优势。

2.2 Vue3的响应式与Composition API如何助力？

Vue3的响应式系统和Composition API，让我们处理这种持续流入的数据流变得异常优雅。

在Options API时代，我们可能需要将返回的文本片段拼接后，赋值给一个data中的变量，然后依靠Vue的响应式更新视图。而在Composition API下，我们可以使用ref来创建一个响应式的字符串引用。

import { ref } from 'vue'; const aiResponseText = ref(''); // 响应式数据，用于存储累积的AI回复

每当从SSE连接收到一个新的文本片段（chunk），我们只需要执行aiResponseText.value += chunk。由于aiResponseText是ref，Vue会自动检测到其.value的变化，并触发与之相关的DOM更新。这意味着，我们只需要关心数据的拼接，视图的更新完全交给Vue的响应式系统，代码非常声明式和简洁。

此外，Composition API让我们能够将所有的流式逻辑（建立连接、监听事件、处理数据、错误处理、清理连接）封装在一个独立的、可复用的composable函数（例如useStreamingAI）中。这个函数返回响应式数据和方法，在任何Vue组件中都可以轻松引入和使用，实现了高度的关注点分离和代码复用。

2.3 “打字机效果”的本质是什么？

“打字机效果”听起来很炫酷，但其核心原理并不复杂。它并不是在服务器端一个字一个字地发送（那样网络请求次数太多），而是利用前端动画，模拟出逐字显现的视觉效果。

流程是这样的：

1. 服务器流式推送：后端通过SSE，以较快的频率（例如每收到AI模型返回的一个词或一小段句子）就推送一个数据块到前端。
2. 前端快速接收并缓存：前端几乎实时地收到这些数据块，并将它们快速拼接成一个完整的、但用户暂时看不到的“缓冲区”文本。
3. 动画渲染：前端同时启动一个动画函数（如setInterval或requestAnimationFrame），以一个人眼感觉舒适的固定速度（例如每秒30-60个字），从“缓冲区”中逐个取出字符，填充到最终显示给用户的UI元素中。

这样，用户看到的就是一个字一个字“打”出来的效果。即使网络传输和后台AI生成是“一块一块”的，甚至中间有微小延迟，但通过前端的动画缓冲，呈现给用户的始终是平滑、连续的输入体验，有效消除了卡顿感，并将等待过程转化为一种积极的反馈。

3. 实战步骤：从零搭建流式对话前端

3.1 第一步：构建Vue3项目与基础环境

首先，确保你有一个Vue3的开发环境。如果你还没有项目，可以使用Vite快速创建一个：

npm create vue@latest my-ai-chat # 按照提示选择项目配置，这里我们不需要太多复杂选项。 cd my-ai-chat npm install

项目创建好后，我们主要会用到vue本身和axios（用于发送初始请求，如果需要的话）。但请注意，对于SSE连接，我们将使用浏览器原生的EventSourceAPI，因此不需要为SSE单独安装库。

3.2 第二步：封装核心的SSE流式请求Composable

这是最核心的一步。我们将在src/composables目录下创建一个useStreamingAI.js（或.ts）文件。

// src/composables/useStreamingAI.js import { ref, onUnmounted } from 'vue'; export function useStreamingAI() { // 响应式数据：最终显示的打字机效果文本 const displayedText = ref(''); // 响应式数据：内部缓冲区，用于快速累积接收到的所有数据 const buffer = ref(''); // 响应式数据：连接状态 const isConnected = ref(false); // 响应式数据：错误信息 const error = ref(null); // 打字机速度（字符/毫秒） const typingSpeed = 50; // 每秒约20个字符，可根据需要调整 let eventSource = null; let typingInterval = null; let currentIndex = 0; // 启动打字机动画 const startTypingAnimation = () => { if (typingInterval) clearInterval(typingInterval); currentIndex = 0; displayedText.value = ''; typingInterval = setInterval(() => { if (currentIndex < buffer.value.length) { displayedText.value += buffer.value.charAt(currentIndex); currentIndex++; // 可选的：自动滚动到文本底部，确保用户始终看到最新内容 const container = document.getElementById('response-container'); if (container) { container.scrollTop = container.scrollHeight; } } else { // 缓冲区内容已全部显示完毕，停止动画 clearInterval(typingInterval); typingInterval = null; } }, typingSpeed); }; // 连接到后端SSE端点 const connect = (question, apiEndpoint = '/api/chat/stream') => { // 重置状态 disconnect(); displayedText.value = ''; buffer.value = ''; error.value = null; isConnected.value = true; // 构建带查询参数的URL（例如传递用户问题） const url = new URL(apiEndpoint, window.location.origin); url.searchParams.append('message', question); eventSource = new EventSource(url); // 监听消息事件 eventSource.onmessage = (event) => { try { const data = JSON.parse(event.data); // 假设后端返回的数据结构为 { content: “文本片段”, done: false } if (data.content) { buffer.value += data.content; // 如果打字机动画还没启动，则启动它 if (!typingInterval) { startTypingAnimation(); } } // 如果后端标志流式结束，可以关闭连接 if (data.done) { disconnect(); isConnected.value = false; } } catch (e) { console.error('解析SSE数据失败:', e, event.data); } }; // 监听错误事件 eventSource.onerror = (err) => { console.error('SSE连接错误:', err); error.value = '连接发生错误或已关闭。'; disconnect(); isConnected.value = false; }; }; // 断开连接并清理资源 const disconnect = () => { if (typingInterval) { clearInterval(typingInterval); typingInterval = null; } if (eventSource) { eventSource.close(); eventSource = null; } isConnected.value = false; }; // 组件卸载时自动清理 onUnmounted(() => { disconnect(); }); // 返回给组件使用的数据和方法 return { displayedText, isConnected, error, connect, disconnect, }; }

代码关键点解析：

1. 双缓冲区设计：buffer用于快速接收并存储所有流式数据；displayedText是实际动画显示的内容。这确保了网络接收（可能很快）和视觉呈现（匀速）的解耦。
2. 动画控制：使用setInterval控制打字速度。startTypingAnimation函数会检查动画是否已在运行，避免重复启动。
3. 连接管理：connect函数负责创建EventSource，disconnect函数负责清理EventSource和打字机动画定时器。onUnmounted生命周期钩子确保组件销毁时资源被释放，防止内存泄漏。
4. 错误处理：监听了EventSource的onerror事件，并将错误信息存储在响应式的error变量中，方便UI展示。

3.3 第三步：在Vue组件中集成与使用

接下来，我们在一个组件（例如ChatView.vue）中使用这个封装的composable。

<template> <div class="chat-container"> <div class="input-area"> <textarea v-model="userInput" placeholder="输入你的问题..." :disabled="isConnecting"></textarea> <button @click="sendMessage" :disabled="!userInput.trim() || isConnecting"> {{ isConnecting ? '思考中...' : '发送' }} </button> <button @click="stopStreaming" :disabled="!isConnecting">停止</button> </div> <div v-if="error" class="error-message">{{ error }}</div> <div class="response-area"> <h3>AI回复：</h3> <!-- 这里是显示打字机效果的区域 --> <div id="response-container" class="response-text"> {{ displayedText }} <!-- 当正在连接且尚无文字时，显示一个加载光标 --> <span v-if="isConnecting && !displayedText" class="cursor">▌</span> </div> </div> </div> </template> <script setup> import { ref } from 'vue'; import { useStreamingAI } from '@/composables/useStreamingAI'; const userInput = ref(''); // 使用我们的composable const { displayedText, isConnected, error, connect, disconnect } = useStreamingAI(); // 计算属性，方便模板使用 const isConnecting = isConnected; const sendMessage = () => { if (!userInput.value.trim()) return; // 调用connect函数，传入用户问题。后端地址根据实际部署修改。 connect(userInput.value, 'http://your-backend.com/api/chat/stream'); // 可选：清空输入框 // userInput.value = ''; }; const stopStreaming = () => { disconnect(); }; </script> <style scoped> .chat-container { max-width: 800px; margin: 0 auto; padding: 20px; } .input-area { display: flex; gap: 10px; margin-bottom: 20px; } .input-area textarea { flex: 1; min-height: 60px; padding: 10px; } .response-text { min-height: 200px; border: 1px solid #eee; padding: 15px; border-radius: 8px; white-space: pre-wrap; /* 保留换行符 */ font-family: 'Courier New', monospace; /* 使用等宽字体更像打字机 */ background-color: #f9f9f9; overflow-y: auto; } .cursor { animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .error-message { color: #f56c6c; padding: 10px; background-color: #fef0f0; border-radius: 4px; margin-bottom: 15px; } </style>

3.4 第四步：关键样式与交互优化

上面的组件已经实现了基本功能。为了让体验更好，我们还需要一些细节优化：

1. 自动滚动：已在startTypingAnimation函数中实现，确保在打字过程中，对话容器会自动滚动到底部，让用户始终看到最新的内容。
2. 光标动画：通过CSS的@keyframes为等待状态或输入完成后的光标添加了一个闪烁动画，增强“正在输入”的提示。
3. 禁用状态：在AI思考（isConnecting为true）时，禁用发送按钮和输入框，防止用户重复提交。
4. 停止按钮：提供了stopStreaming功能，允许用户在任何时候中断流式请求，这在生成长文本时非常有用。
5. 等宽字体：为回复区域使用font-family: 'Courier New', monospace;，模拟打字机或终端的视觉效果，提升氛围感。

4. 后端接口（Node.js + Express）示例

前端准备好了，还需要一个能发出SSE流的后端。这里给出一个简单的Node.js + Express示例，它代理请求到DeepSeek API（假设你已获得API Key）。

// server.js (后端示例) import express from 'express'; import fetch from 'node-fetch'; // 需要安装 node-fetch@2 const app = express(); app.use(express.json()); app.get('/api/chat/stream', async (req, res) => { const userMessage = req.query.message; if (!userMessage) { return res.status(400).json({ error: 'No message provided' }); } // 1. 设置SSE相关的响应头 res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*', // 根据实际情况调整CORS }); // 2. 调用DeepSeek的流式API // 注意：DeepSeek API的准确端点、请求体和响应格式请查阅其最新官方文档 const deepSeekResponse = await fetch('https://api.deepseek.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.DEEPSEEK_API_KEY}`, }, body: JSON.stringify({ model: 'deepseek-chat', // 根据可用模型调整 messages: [{ role: 'user', content: userMessage }], stream: true, // 关键：开启流式输出 }), }); if (!deepSeekResponse.ok) { res.write(`data: ${JSON.stringify({ error: 'Failed to call AI API' })}\n\n`); res.end(); return; } const reader = deepSeekResponse.body.getReader(); const decoder = new TextDecoder('utf-8'); try { while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); // 3. 处理流式数据块 const lines = chunk.split('\n').filter(line => line.trim() !== ''); for (const line of lines) { if (line.startsWith('data: ')) { const data = line.slice(6); // 去掉'data: '前缀 if (data === '[DONE]') { // 流式结束标志 res.write(`data: ${JSON.stringify({ done: true })}\n\n`); } else { try { const parsed = JSON.parse(data); // 提取AI返回的文本内容，具体字段名需参考DeepSeek API文档 const content = parsed.choices?.[0]?.delta?.content || ''; if (content) { // 4. 将每个内容片段以SSE格式发送给前端 res.write(`data: ${JSON.stringify({ content })}\n\n`); } } catch (e) { console.error('解析API流数据失败:', e, data); } } } } } } catch (error) { console.error('流式读取错误:', error); res.write(`data: ${JSON.stringify({ error: 'Stream reading error' })}\n\n`); } finally { res.end(); } }); const PORT = process.env.PORT || 3001; app.listen(PORT, () => { console.log(`SSE server listening on port ${PORT}`); });

后端关键点：

1. 响应头：必须设置Content-Type: text/event-stream，这是SSE协议的核心。
2. 流式转发：后端接收到DeepSeek的流式响应后，不应等待其全部完成，而应边读边转发。这里使用ReadableStream的getReader()来逐块读取。
3. 数据格式：SSE要求每条消息以data:开头，以两个换行符\n\n结尾。我们通常将数据JSON序列化后发送。
4. 错误处理与结束标志：妥善处理上游API错误和流结束（[DONE]）的情况，并向前端发送相应的事件。

5. 常见问题、排查技巧与优化实录

5.1 连接建立失败或立即关闭

• 症状：前端EventSource的onerror事件立即触发，状态变为closed。
• 排查：
  1. 检查CORS：这是最常见的问题。确保后端SSE接口的响应头包含了正确的Access-Control-Allow-Origin，允许你的前端域名访问。在开发环境下，Express可以使用cors中间件。
  2. 检查响应头：后端必须设置Content-Type: text/event-stream。其他如Cache-Control: no-cache也很重要。
  3. 检查网络：打开浏览器开发者工具的“网络”(Network)选项卡，查看对SSE端点的请求。请求类型应为EventStream，状态码应为200。如果看到跨域错误（CORS）或非200状态码，就需要根据错误信息调整后端。
  4. 验证URL：确保前端connect函数中传入的URL完全正确，并且后端服务正在运行。

5.2 能连接但收不到数据，或数据格式错误

• 症状：连接状态正常，但前端onmessage事件从未触发，或者触发后解析event.data出错。
• 排查：
  1. 后端日志：首先在后端控制台打印从DeepSeek API收到的原始数据块(chunk)，确认数据流是否正常到达你的服务器。
  2. SSE格式验证：检查后端发送的数据是否严格遵循data: <content>\n\n格式。多一个空格、少一个换行都可能导致前端EventSource无法正确解析。一个常见的错误是忘记在每段数据后发送两个换行符\n\n。
  3. 前端日志：在前端的onmessage事件中，先不解析JSON，直接console.log(event)和console.log(event.data)，查看原始接收到的数据是什么。很可能后端发送的不是合法的JSON字符串。
  4. API响应结构：确认你解析DeepSeek API响应的逻辑是否正确。不同模型、不同版本的API，其流式返回的数据结构可能有细微差别。一定要以官方最新文档为准。例如，可能是choices[0].delta.content，也可能是其他路径。

5.3 打字机动画卡顿、跳字或速度不稳定

• 症状：文字不是平滑出现，而是突然跳出一大段，或者动画明显卡顿。
• 排查与优化：
  1. 缓冲区与动画解耦：这正是我们设计buffer和displayedText两个变量的原因。确保你的startTypingAnimation函数只从buffer中取字，而onmessage回调只向buffer追加内容。两者通过setInterval的固定周期连接，与网络接收速度无关。
  2. 调整打字速度：typingSpeed变量控制动画速度。50毫秒/字符（约20字/秒）是一个比较舒适的速度。可以根据产品风格调整，更快（如30ms）显得更敏捷，更慢（如80ms）则更有“思考”感。
  3. 使用requestAnimationFrame：对于追求极致平滑的动画，可以将setInterval替换为requestAnimationFrame。但在这个场景下，setInterval的简单可控性通常已足够。
  4. 避免频繁DOM操作：虽然Vue的响应式更新是高效的，但极端情况下，如果打字速度极快（比如1ms），频繁的displayedText.value += char操作也可能带来压力。我们的设计（每秒最多更新20次DOM）完全在浏览器承受范围内。

5.4 内存泄漏与资源清理

• 症状：在单页应用（SPA）中，离开聊天页面后，SSE连接没有关闭，或者定时器没有清除，可能导致内存泄漏和意外的网络活动。
• 解决方案：
  1. 务必在composable中使用onUnmounted：如示例所示，在useStreamingAI函数中，使用onUnmounted生命周期钩子来调用disconnect函数。这样，无论组件以何种方式销毁，资源都会被自动清理。
  2. 提供手动断开方法：暴露disconnect方法，允许用户在切换话题、手动停止时主动断开连接。
  3. 在onBeforeUnmount中处理：如果你没有使用composable，而是在组件内直接写逻辑，记得在onBeforeUnmount钩子中执行清理。

5.5 如何适配不同的后端API或AI服务？

我们的前端设计是通用的，关键在于后端如何适配不同的AI服务。

• OpenAI / GPT系列：其流式接口与示例中的DeepSeek非常相似，通常也是返回choices[0].delta.content。只需修改后端的请求URL、API Key和模型参数即可。
• 国内大模型（如文心一言、通义千问、智谱GLM等）：这些厂商也大多提供了流式API，但数据格式（尤其是流式chunk的格式）可能有所不同。有些可能是data:前缀的JSON，有些可能是自定义的协议（如data: [ID] [JSON]）。后端需要根据其官方文档，编写对应的解析逻辑，但最终向前端发送的SSE格式应保持一致（即data: {“content”: “...”}\n\n）。
• 自研模型或中间件：如果你有自己的模型或通过LangChain等框架封装，确保你的服务端能产生类似的数据流。核心是按片段（chunk）生成，按片段发送，而不是等全部生成完再一次性返回。

实现流式输出和打字机效果，技术上并不高深，但细节决定体验。从“卡顿劝退”到“丝滑对话”，关键的跨越就在于将等待的空白期，转化为了有明确进展反馈的过程。这70行代码的核心价值，不仅仅是功能的实现，更是对用户体验的深度思考。在实际项目中，你还可以在此基础上增加回答中途的“停止生成”按钮、支持Markdown的实时渲染、甚至根据文本内容模拟思考中的“正在输入”动画，让整个交互更加生动和人性化。