Spring AI实战：Vue3+SSE构建实时问答系统的前端流式渲染优化（打字机效果）

1. 为什么需要流式问答系统现在很多AI应用都采用一问一答的完整响应模式但这种模式有个明显痛点当AI需要生成较长内容时用户得盯着转圈圈的加载动画干等。我做过测试当响应时间超过3秒用户就会明显感到焦躁。而流式传输就像挤牙膏一样让内容一点一点实时呈现出来这种即时反馈能让等待变得可以接受。在技术选型上WebSocket和SSE都能实现流式传输。但WebSocket是双向通道对于只需要接收AI响应的场景来说太重了。SSE基于HTTP协议天然支持断线重连特别适合这种单向数据推送场景。去年我在一个客服系统项目中实测SSE的连接稳定性比WebSocket高出23%特别是在移动网络环境下。2. SSE连接的核心实现2.1 后端Spring AI的流式接口Spring AI的ChatClient其实内置了流式支持但需要正确配置。关键是要在Controller方法上使用produces MediaType.TEXT_EVENT_STREAM_VALUEGetMapping(path /generateStream, produces MediaType.TEXT_EVENT_STREAM_VALUE) public FluxString streamChat( RequestParam String message, RequestParam(required false) String sessionId) { Prompt prompt new Prompt(message); return chatClient.stream(prompt) .map(chatResponse - { String json {\text\:\ chatResponse.getResult().getOutput().getContent() \}; return data: json \n\n; }); }这里有个坑要注意SSE事件格式要求每个消息必须以data:开头以两个换行符结尾。有次我漏了换行符前端死活收不到分片数据调试了整整一下午。2.2 前端EventSource的正确用法Vue3中创建SSE连接不能直接写在setup里否则组件卸载时会导致内存泄漏。推荐用Composition API封装const useSSE (url) { const eventSource ref(null); const data ref(); const error ref(null); const start () { eventSource.value new EventSource(url); eventSource.value.onmessage (event) { data.value event.data; }; eventSource.value.onerror (err) { error.value err; close(); }; }; const close () { if (eventSource.value) { eventSource.value.close(); } }; onUnmounted(close); return { data, error, start, close }; };实测发现iOS Safari对SSE有特殊限制页面隐藏时会自动断开连接。我的解决方案是在visibilitychange事件里自动重连document.addEventListener(visibilitychange, () { if (!document.hidden) { reconnectSSE(); } });3. 打字机效果的实现艺术3.1 基础实现方案最简单的打字机效果就是用setInterval逐字追加const typewriter (text, target) { let index 0; const timer setInterval(() { if (index text.length) { target.value text.charAt(index); index; } else { clearInterval(timer); } }, 50); };但这种方法在长文本时性能很差。后来我改用requestAnimationFrame优化const typewriter (text, target) { const chunkSize 3; // 每次渲染3个字符 let position 0; const animate () { if (position text.length) { target.value text.substr(position, chunkSize); position chunkSize; requestAnimationFrame(animate); } }; requestAnimationFrame(animate); };3.2 动画曲线优化直接线性输出会显得机械我参考了VS Code的终端渲染策略加入了指数缓动函数const easeOutExpo (t) { return t 1 ? 1 : 1 - Math.pow(2, -10 * t); }; const getDynamicSpeed (progress) { const baseSpeed 30; // 基础间隔(ms) return baseSpeed * (1 - easeOutExpo(progress)); };这样开头打字快接近结尾时逐渐放慢更接近真人输入节奏。用户测试表明这种动态速度能让感知等待时间减少40%。4. 性能优化实战4.1 虚拟滚动优化当聊天记录超过50条时渲染性能会急剧下降。我的解决方案是使用vue-virtual-scrollerRecycleScroller classmessages :itemsmessages :item-size80 key-fieldid template v-slot{ item } div classmessage div v-htmlitem.content/div /div /template /RecycleScroller配合动态加载策略先渲染可视区域内容滚动时再加载历史消息。在万条消息的测试场景下内存占用从1.2GB降到80MB。4.2 流式Markdown的渐进渲染直接渲染完整Markdown会导致布局抖动。我的解决方案是分步处理const renderMarkdown (raw) { // 先渲染纯文本 const textOnly raw.replace(/[#*[\]]/g, ); // 分阶段添加Markdown元素 setTimeout(() addHeaders(textOnly), 100); setTimeout(() addLists(textOnly), 200); setTimeout(() addCodeBlocks(textOnly), 300); };这种渐进式渲染虽然增加了总处理时间但显著提升了感知性能。用户反馈说感觉响应更流畅了。5. 异常处理经验谈5.1 网络中断处理移动端网络不稳定是常态。我的重连策略包含三级回退立即重试等待500ms指数退避最多等待8秒切换到长轮询备用方案const reconnect (attempt 1) { const delay Math.min(500 * Math.pow(2, attempt), 8000); setTimeout(startSSE, delay); };5.2 大文本分块处理遇到过LLM返回3万字小说导致内存溢出的情况。现在我的处理流程后端分块每500字符一个chunk前端缓冲区最大缓存5个chunk超过阈值时提醒用户暂停const MAX_BUFFER_SIZE 5; const chunks []; eventSource.onmessage (event) { chunks.push(event.data); if (chunks.length MAX_BUFFER_SIZE) { showFlowControlUI(); } };6. 用户体验增强技巧6.1 输入状态反馈在AI思考时显示动态指示器很有必要。我用SVG实现了一个类ChatGPT的脉冲动画div v-ifisThinking classthinking-indicator svg viewBox0 0 100 20 circle cx10 cy10 r5 fill#ccc animate attributeNameopacity values0.3;1;0.3 dur1s repeatCountindefinite/ /circle !-- 更多圆点 -- /svg /div6.2 智能滚动策略不是所有场景都应该自动滚动到底部。我的规则用户未手动上滚时自动跟随新内容用户手动上滚后保持位置直到距底部100px遇到代码块时暂停滚动2秒方便阅读let isUserScrolled false; container.addEventListener(scroll, () { const threshold 100; isUserScrolled container.scrollTop container.clientHeight container.scrollHeight - threshold; });7. 移动端适配要点7.1 触摸键盘处理iOS虚拟键盘会遮挡输入框。我的解决方案const adjustForKeyboard () { if (visualViewport in window) { const viewport window.visualViewport; const height viewport.height; document.documentElement.style.setProperty(--vh, ${height}px); } };配合CSS使用.input-area { position: fixed; bottom: calc(var(--vh) * 0.01); }7.2 省电模式优化发现有些安卓设备在省电模式下会限制EventSource活动。我的应对方案检测到异常延迟时切换心跳检测使用Web Worker维持后台连接降级到轮询模式const checkLatency () { const start Date.now(); pingServer().then(() { const latency Date.now() - start; if (latency 5000) enableFallback(); }); };