（第五篇）Spring AI 核心技术攻坚：流式响应与前端集成实现【打字机】效果

摘要

        在 AI 对话应用中，传统同步响应模式会导致秒级阻塞，严重影响用户体验。本文聚焦 Spring AI 流式响应核心技术，基于 WebFlux+SSE 构建低延迟实时交互方案，从 Reactive 编程原理切入，深度解析 ChatClient.stream () API 设计逻辑，对比 EventSource 与 WebSocket 两种前端集成方案，并提供可直接落地的 Vue3/React 实战代码，完整实现「打字机」逐字渲染效果。方案具备高并发支撑能力，可广泛应用于 AI 对话、实时内容生成等场景，兼顾技术深度与工程实用性。

1. 引言：AI 交互的延迟痛点与流式响应的价值

        在生成式 AI 应用中，当用户发起长文本生成、复杂推理等请求时，传统「请求 - 等待 - 全量返回」的同步模式会导致 3-10 秒的阻塞等待。这种交互体验不仅违背了自然对话的即时性，还可能引发用户重复提交、连接超时等问题。

        流式响应技术的出现彻底改变了这一现状 —— 通过将 AI 模型生成的内容分批次、增量返回给客户端，首字符响应时间从秒级压缩至毫秒级，实现类似 ChatGPT 的「边思考边输出」效果。Spring AI 作为 Spring 生态的 AI 原生开发框架，基于 Project Reactor 响应式编程模型，提供了优雅的流式 API 支持；而 WebFlux 的非阻塞特性与 SSE（Server-Sent Events）的实时推送能力相结合，构成了高性能、低门槛的实时 AI 交互解决方案。

        本文将从原理到实战，完整拆解 Spring AI 流式响应的技术链路，帮助开发者快速掌握「后端流式输出 + 前端逐字渲染」的全栈实现方案。

2. 流式响应核心原理：Reactive 编程与 Flux 数据流

2.1 响应式编程核心特性

        响应式编程是一种基于异步数据流的编程范式，核心目标是构建即时响应、弹性伸缩、消息驱动的系统（响应式宣言核心思想）。与传统同步阻塞编程相比，其关键特性包括：

非阻塞 I/O：通过事件驱动架构，少量线程即可处理数千并发连接，避免线程等待开销函数式组合：通过 map、filter、flatMap 等高阶函数构建数据处理流水线故障隔离：通过独立的错误处理通道，避免单个流的异常影响整个系统背压控制：订阅者可动态调节数据接收速率，防止生产者过载导致内存溢出

        Spring WebFlux 作为 Spring 生态的响应式 Web 框架，原生集成 Reactor 3.x 库，为流式响应提供了底层技术支撑。

2.2 Flux 数据流处理机制

Reactor 框架通过Flux和Mono两种核心类型构建异步序列处理模型：

Flux：代表 0 到 N 个元素的异步序列，适用于多元素流式输出场景（如 AI 文本生成）Mono：代表 0 或 1 个元素的异步结果，适用于单个结果的异步返回（如用户信息查询）

Spring AI 的流式响应本质上是通过 Flux 数据流承载 AI 模型的增量输出，其处理流程如下：

        Flux 的核心优势在于将数据处理建模为「流转换」过程，而非传统的「状态变更」，每个操作符（如 map、filter）都会返回新的 Flux 实例，形成链式处理流水线，最终通过订阅（subscribe）触发数据流的流动。

2.3 背压控制：解决生产消费速率不匹配

        背压（Backpressure）是响应式编程区别于传统回调模式的核心特性，也是流式响应稳定运行的关键保障。当 AI 模型生成数据的速度超过前端渲染速度时，背压机制会让生产者（AI 模型）根据消费者（前端）的处理能力动态调整生成速率，避免内存溢出。

Reactor 实现背压的核心机制的是：

1. 订阅者通过request(n)方法向生产者请求 n 个数据
2. 生产者仅生成并推送 n 个数据，等待下一次请求
3. 支持缓冲（buffer）、丢弃（drop）等多种背压策略

        在 Spring AI 流式响应中，背压机制通过 Reactor 自动生效，开发者无需手动处理，仅需在特殊场景（如大数据量生成）下调整缓冲大小即可：

// 配置背压缓冲策略 chatClient.stream(prompt) .onBackpressureBuffer(1000) // 缓冲1000个数据块 .onBackpressureDrop(unused -> log.warn("丢弃超量数据块")) .subscribe(...); 

3. Spring AI 流式 API 深度解析：ChatClient.stream ()

3.1 API 设计理念与核心参数

        Spring AI 的 ChatClient 是对外提供流式交互的核心入口，其stream()方法基于 Project Reactor 实现，将 AI 模型的响应转换为 Flux 数据流，支持增量返回。与同步的call()方法相比，stream()方法更适合长文本生成、实时对话等场景。

核心设计理念：

统一 API 抽象：屏蔽不同 AI 模型（OpenAI、Anthropic、智谱等）的流式实现差异响应式原生支持：直接返回 Flux 类型，无缝集成 Spring WebFlux灵活配置扩展：通过 ChatOptions 支持温度、最大 token 等参数动态调整

API 方法签名：

// 核心流式方法，返回StreamResponseSpec用于指定响应粒度 StreamResponseSpec stream(Prompt prompt); // StreamResponseSpec提供三种响应粒度选择 Flux<ChatClientResponse> chatClientResponses(); // 完整响应对象（包含元数据） Flux<ChatResponse> chatResponses(); // 聊天响应对象（包含消息列表） Flux<String> content(); // 仅返回文本内容（最常用） 

3.2 三种流式响应粒度详解

Spring AI 提供三种不同粒度的流式响应，开发者可根据需求灵活选择：

实战示例：

// 1. 仅获取文本内容（最常用，适合打字机效果） Flux<String> contentFlux = chatClient.prompt("介绍Spring AI流式响应") .stream() .content(); // 2. 获取聊天响应对象（包含消息角色） Flux<ChatResponse> chatResponseFlux = chatClient.prompt("介绍Spring AI流式响应") .stream() .chatResponses(); // 3. 获取完整响应对象（包含元数据） Flux<ChatClientResponse> clientResponseFlux = chatClient.prompt("介绍Spring AI流式响应") .stream() .chatClientResponses(); 

3.3 高级特性：超时重试与性能优化

ChatClient.stream () 提供了丰富的高级特性，确保流式响应的稳定性和性能：

3.3.1 超时与重试配置

通过withTimeout()和retry()方法处理网络波动或模型响应缓慢问题：

Flux<String> contentFlux = chatClient.prompt("生成详细的技术文档") .options(ChatOptions.builder() .withTemperature(0.7) .withMaxTokens(2048) .build()) .stream() .content() .timeout(Duration.ofSeconds(30)) // 30秒超时 .retry(3) // 最多重试3次 .onErrorResume(e -> Flux.just("请求超时，请稍后重试")); // 错误兜底 

3.3.2 线程调度优化

AI 模型调用属于 I/O 密集型操作，通过publishOn()切换线程池，避免阻塞 Netty 事件循环线程：

Flux<String> contentFlux = chatClient.stream(prompt) .content() .publishOn(Schedulers.boundedElastic()) // 切换到弹性线程池 .doOnNext(content -> log.info("生成内容片段：{}", content)); 

3.3.3 性能监控

集成 Micrometer 监控流式响应性能，如响应时间、吞吐量等：

Flux<String> contentFlux = chatClient.stream(prompt) .content() .timed() // 记录每个数据块的处理时间 .doOnNext(timed -> meterRegistry.counter("spring.ai.stream.content", "model", modelName) .increment()) .map(Timed::get); 

4. 前端对接方案：EventSource vs WebSocket

        Spring AI 流式响应的前端集成主要有两种方案：EventSource（SSE）和 WebSocket。两者基于不同的通信模式，适用于不同的业务场景，下面详细解析其实现方式和技术选型。

4.1 单向通信优选：EventSource（SSE）实现

        SSE（Server-Sent Events）是基于 HTTP 协议的单向通信技术，专门用于服务器向客户端实时推送数据。其核心优势是无需额外协议支持、兼容性好、自动重连，非常适合 AI 对话这种「客户端发一次请求，服务器持续返回结果」的场景。

4.1.1 SSE 核心特性

基于 HTTP 协议，无需额外端口或协议单向通信：仅服务器→客户端推送数据自动重连：连接断开后客户端自动重试轻量级：协议头部小，数据传输效率高支持事件类型：可按事件分类处理数据

4.1.2 前端 EventSource 基础实现

// 创建SSE连接，指定后端流式接口 const eventSource = new EventSource('/api/ai/stream?prompt=介绍Spring AI'); // 监听数据接收事件 eventSource.onmessage = (event) => { const content = event.data; // 逐字渲染到页面（打字机效果核心） renderTypingEffect(content); }; // 监听连接打开事件 eventSource.onopen = () => { console.log('SSE连接已建立'); }; // 监听错误事件 eventSource.onerror = (error) => { console.error('SSE连接错误：', error); if (eventSource.readyState === EventSource.CLOSED) { console.log('SSE连接已关闭'); } }; // 手动关闭连接（如页面卸载时） window.addEventListener('beforeunload', () => { eventSource.close(); }); 

4.2 双向交互必备：WebSocket 方案

        WebSocket 是一种全双工通信协议，通过一次 TCP 握手建立持久连接，支持服务器和客户端双向实时通信。适用于需要客户端持续发送消息（如多轮对话中实时打断 AI 生成）的场景。

4.2.1 WebSocket 核心特性

全双工通信：服务器和客户端可同时发送数据持久连接：一次握手后保持连接，避免重复建连开销低延迟：无 HTTP 头部开销，数据实时传输跨域支持：可通过配置支持跨域通信

4.2.2 前端 WebSocket 基础实现

// 创建WebSocket连接 const socket = new WebSocket(`ws://localhost:8080/api/ai/websocket`); // 监听连接打开事件 socket.onopen = () => { console.log('WebSocket连接已建立'); // 发送用户请求 socket.send(JSON.stringify({ prompt: '介绍Spring AI' })); }; // 监听数据接收事件 socket.onmessage = (event) => { const data = JSON.parse(event.data); // 逐字渲染AI响应 renderTypingEffect(data.content); }; // 监听错误事件 socket.onerror = (error) => { console.error('WebSocket连接错误：', error); }; // 监听连接关闭事件 socket.onclose = (event) => { console.log('WebSocket连接已关闭：', event.code, event.reason); }; // 发送新消息（多轮对话） const sendMessage = (prompt) => { if (socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ prompt })); } }; 

4.3 两种方案技术选型对比

选型建议：

若仅需实现 AI「打字机」效果，无双向交互需求，优先选择 EventSource（实现简单、稳定性高）若需要多轮对话中实时打断 AI 生成、客户端持续发送指令等双向交互，选择 WebSocket考虑兼容性和开发效率，大多数 AI 对话场景推荐 EventSource 方案

5. 实战：前后端分离的实时对话界面

        本节将实现一个完整的前后端分离实时对话系统，后端基于 Spring Boot+Spring AI+WebFlux 构建流式接口，前端分别提供 Vue3（EventSource）和 React（WebSocket）两种实现，完整实现「打字机」逐字渲染效果。

5.1 后端实现：Spring Boot+WebFlux+Spring AI

5.1.1 依赖配置（pom.xml）

<!-- Spring Boot WebFlux依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <!-- Spring AI核心依赖 --> <dependency> <groupId>org.springframework.ai</groupId> <artifactId>spring-ai-spring-boot-starter</artifactId> </dependency> <!-- 选择对应的AI模型依赖（以智谱为例） --> <dependency> <groupId>org.springframework.ai</groupId> <artifactId>spring-ai-zhipuai-spring-boot-starter</artifactId> </dependency> <!-- 跨域支持 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> 

5.1.2 配置文件（application.yml）

spring: ai: zhipuai: api-key: 你的智谱API密钥 # 替换为实际API密钥 model: glm-4 # 模型名称 chat: options: temperature: 0.7 # 随机性 max-tokens: 2048 # 最大生成token数 # 跨域配置 server: port: 8080 cors: allowed-origins: "*" allowed-methods: GET,POST,OPTIONS allowed-headers: "*" 

5.1.3 后端核心代码

跨域配置类

import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.reactive.CorsWebFilter; import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource; @Configuration public class CorsConfig { @Bean public CorsWebFilter corsWebFilter() { CorsConfiguration config = new CorsConfiguration(); config.addAllowedOrigin("*"); config.addAllowedMethod("*"); config.addAllowedHeader("*"); config.setMaxAge(3600L); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); } } 

流式控制器（支持 SSE 和 WebSocket）

import org.springframework.ai.chat.client.ChatClient; import org.springframework.ai.chat.model.ChatResponse; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.*; import org.springframework.web.reactive.socket.WebSocketHandler; import org.springframework.web.reactive.socket.WebSocketSession; import org.springframework.web.reactive.socket.server.support.WebSocketHandlerAdapter; import reactor.core.publisher.Flux; import reactor.core.publisher.Mono; import java.time.Duration; @RestController @RequestMapping("/api/ai") public class AiStreamController { private final ChatClient chatClient; // 注入ChatClient（Spring AI自动配置） public AiStreamController(ChatClient chatClient) { this.chatClient = chatClient; } /** * SSE流式接口（EventSource对接） */ @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<String> streamChat(@RequestParam String prompt) { // 调用ChatClient.stream()获取Flux数据流 return chatClient.prompt(prompt) .stream() .content() .delayElements(Duration.ofMillis(50)) // 控制输出速度，优化打字机效果 .onErrorResume(e -> Flux.just("生成出错：" + e.getMessage())); } /** * WebSocket流式接口 */ @Bean public WebSocketHandler webSocketHandler() { return new WebSocketHandler() { @Override public Mono<Void> handle(WebSocketSession session) { // 接收客户端消息 Flux<String> clientMessages = session.receive() .map(msg -> new String(msg.getPayloadAsByteArray())) .map(payload -> { // 解析客户端发送的prompt（简化处理，实际可解析JSON） return payload; }); // 发送AI响应 Flux<String> aiResponses = clientMessages .flatMap(prompt -> chatClient.prompt(prompt) .stream() .content() .delayElements(Duration.ofMillis(50))); // 向客户端发送数据 return session.send(aiResponses .map(session::textMessage) .onErrorResume(e -> Mono.just(session.textMessage("生成出错：" + e.getMessage())))); } }; } /** * 注册WebSocket适配器 */ @Bean public WebSocketHandlerAdapter webSocketHandlerAdapter() { return new WebSocketHandlerAdapter(); } } 

5.2 Vue3 前端实现（EventSource 版）

5.2.1 组件完整代码（Vue3 + Setup 语法）

<template> <div> <h2>Spring AI 流式对话（Vue3+EventSource）</h2> <!-- 对话消息列表 --> <div ref="messageList"> <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]"> <div>{{ msg.role === 'user' ? '我' : 'AI' }}</div> <div>{{ msg.content }}</div> </div> </div> <!-- 输入区域 --> <div> <textarea v-model="prompt" placeholder="输入你的问题..." @keydown.enter.prevent="sendMessage" ></textarea> <button @click="sendMessage" :disabled="!prompt.trim()">发送</button> </div> </div> </template> <script setup> import { ref, onUnmounted, nextTick } from 'vue'; // 对话消息列表 const messages = ref([ { role: 'ai', content: '你好！我是基于Spring AI的流式对话助手，有什么可以帮你？' } ]); // 用户输入 const prompt = ref(''); // 消息列表DOM引用（用于滚动到底部） const messageList = ref(null); // EventSource实例 const eventSourceRef = ref(null); /** * 发送消息并建立SSE连接 */ const sendMessage = () => { const input = prompt.value.trim(); if (!input) return; // 添加用户消息到列表 messages.value.push({ role: 'user', content: input }); prompt.value = ''; // 滚动到底部 scrollToBottom(); // 关闭之前的SSE连接 if (eventSourceRef.value) { eventSourceRef.value.close(); } // 添加AI正在输入的占位消息 const aiMessageIndex = messages.value.length; messages.value.push({ role: 'ai', content: '' }); // 建立新的SSE连接 const eventSource = new EventSource(`http://localhost:8080/api/ai/stream?prompt=${encodeURIComponent(input)}`); eventSourceRef.value = eventSource; // 接收AI响应 eventSource.onmessage = (event) => { // 逐字拼接内容（打字机效果核心） const currentContent = messages.value[aiMessageIndex - 1].content; messages.value[aiMessageIndex - 1].content = currentContent + event.data; scrollToBottom(); }; // 连接错误处理 eventSource.onerror = (error) => { console.error('SSE连接错误：', error); if (eventSource.readyState === EventSource.CLOSED) { const currentContent = messages.value[aiMessageIndex - 1].content; messages.value[aiMessageIndex - 1].content = currentContent + '\n\n（连接已断开）'; } }; }; /** * 滚动到消息列表底部 */ const scrollToBottom = () => { nextTick(() => { if (messageList.value) { messageList.value.scrollTop = messageList.value.scrollHeight; } }); }; /** * 组件卸载时关闭SSE连接 */ onUnmounted(() => { if (eventSourceRef.value) { eventSourceRef.value.close(); } }); </script> <style scoped> .chat-container { max-width: 800px; margin: 0 auto; padding: 20px; } .message-list { height: 500px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; overflow-y: auto; margin-bottom: 16px; background-color: #f9fafb; } .message { display: flex; margin-bottom: 12px; max-width: 80%; } .message.user { flex-direction: row-reverse; margin-left: auto; } .avatar { width: 36px; height: 36px; border-radius: 50%; background-color: #4299e1; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; margin-right: 8px; } .message.user .avatar { background-color: #38b2ac; margin-right: 0; margin-left: 8px; } .content { padding: 10px 16px; border-radius: 16px; background-color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-size: 14px; line-height: 1.5; white-space: pre-wrap; } .message.user .content { background-color: #e6f7ff; } .input-area { display: flex; gap: 8px; } textarea { flex: 1; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; resize: none; min-height: 80px; } button { padding: 0 16px; background-color: #4299e1; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } button:disabled { background-color: #94a3b8; cursor: not-allowed; } button:hover:not(:disabled) { background-color: #3182ce; } </style> 

5.3 React 前端实现（WebSocket 版）

5.3.1 组件完整代码（React 18 + Hooks）

import { useState, useRef, useEffect } from 'react'; import './AiChat.css'; const AiChat = () => { // 对话消息列表 const [messages, setMessages] = useState([ { role: 'ai', content: '你好！我是基于Spring AI的WebSocket流式助手～' } ]); // 用户输入 const [inputValue, setInputValue] = useState(''); // WebSocket实例引用 const socketRef = useRef(null); // 消息列表底部引用（滚动用） const messagesEndRef = useRef(null); /** * 初始化WebSocket连接 */ useEffect(() => { // 创建WebSocket连接 const socket = new WebSocket('ws://localhost:8080/api/ai/websocket'); socketRef.current = socket; // 连接打开事件 socket.onopen = () => { console.log('WebSocket连接已建立'); }; // 接收消息事件（AI响应） socket.onmessage = (event) => { const content = event.data; // 更新最后一条AI消息（逐字拼接） setMessages(prev => { const lastMsg = prev[prev.length - 1]; if (lastMsg.role === 'ai') { return [...prev.slice(0, -1), { ...lastMsg, content: lastMsg.content + content }]; } else { return [...prev, { role: 'ai', content }]; } }); }; // 错误事件 socket.onerror = (error) => { console.error('WebSocket错误：', error); setMessages(prev => [...prev, { role: 'system', content: '连接出错，请刷新页面重试' }]); }; // 关闭事件 socket.onclose = (event) => { console.log('WebSocket连接关闭：', event.code); if (event.code !== 1000) { // 非正常关闭 setMessages(prev => [...prev, { role: 'system', content: '连接已断开，正在尝试重连...' }]); // 重连逻辑（简单实现） setTimeout(initWebSocket, 3000); } }; // 组件卸载时关闭连接 return () => { socketRef.current.close(); }; }, []); /** * 滚动到消息列表底部 */ useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); /** * 发送消息 */ const handleSendMessage = () => { const prompt = inputValue.trim(); if (!prompt || !socketRef.current || socketRef.current.readyState !== WebSocket.OPEN) { return; } // 添加用户消息 setMessages(prev => [...prev, { role: 'user', content: prompt }]); // 发送到WebSocket服务器 socketRef.current.send(prompt); // 清空输入框 setInputValue(''); }; /** * 处理回车发送（Shift+Enter换行） */ const handleKeyDown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }; return ( <div className="chat-container"> <h2>Spring AI 流式对话（React+WebSocket）</h2> <div className="message-list"> {messages.map((msg, index) => ( <div key={index} className={`message-item ${msg.role}`}> <div className="message-avatar"> {msg.role === 'user' ? '我' : msg.role === 'ai' ? 'AI' : '系统'} </div> <div className="message-content">{msg.content}</div> </div> ))} <div ref={messagesEndRef} /> </div> <div className="input-container"> <textarea value={inputValue} onChange={(e) => setInputValue(e.target.value)} onKeyDown={handleKeyDown} placeholder="输入消息，按Enter发送，Shift+Enter换行..." className="input-textarea" /> <button onClick={handleSendMessage} disabled={!inputValue.trim()}> 发送 </button> </div> </div> ); }; export default AiChat; 

5.3.2 配套 CSS 样式（AiChat.css）

.chat-container { max-width: 850px; margin: 20px auto; padding: 0 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .chat-container h2 { text-align: center; color: #2d3748; margin-bottom: 24px; } .message-list { height: 520px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; overflow-y: auto; background-color: #f8fafc; margin-bottom: 16px; } .message-item { display: flex; margin-bottom: 12px; max-width: 85%; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message-item.user { flex-direction: row-reverse; margin-left: auto; } .message-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: white; margin-right: 8px; flex-shrink: 0; } .message-item.user .message-avatar { background-color: #6366f1; margin-right: 0; margin-left: 8px; } .message-item.ai .message-avatar { background-color: #10b981; } .message-item.system .message-avatar { background-color: #94a3b8; } .message-content { padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; } .message-item.user .message-content { background-color: #ede9fe; color: #4f46e5; border-top-right-radius: 4px; } .message-item.ai .message-content { background-color: #ecfdf5; color: #065f46; border-top-left-radius: 4px; } .message-item.system .message-content { background-color: #f1f5f9; color: #64748b; font-size: 12px; border-radius: 8px; } .input-container { display: flex; gap: 10px; align-items: flex-end; } .input-textarea { flex: 1; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; resize: none; min-height: 70px; max-height: 180px; transition: border-color 0.2s; } .input-textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1); } .input-container button { padding: 12px 24px; background-color: #6366f1; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; height: 48px; } .input-container button:disabled { background-color: #cbd5e1; cursor: not-allowed; } .input-container button:hover:not(:disabled) { background-color: #4f46e5; } 

5.4 「打字机」效果核心逻辑拆解

无论是 Vue3 还是 React 实现，打字机效果的核心逻辑一致，主要包含三个关键步骤：

1. 数据流接收：通过 EventSource 或 WebSocket 的onmessage事件，实时接收后端推送的文本片段（单个字符或词语）。
2. 逐字拼接：维护一条 AI 响应消息，每次接收新片段时，将其追加到该消息的 content 字段中，实现文本逐步增长。
3. 视图更新：通过响应式状态（Vue 的 ref/reactive、React 的 useState）更新拼接后的文本，触发视图重新渲染，形成「打字」视觉效果。

优化技巧：

后端通过delayElements(Duration.ofMillis(50))控制数据推送速度，避免文本生成过快。前端添加消息列表自动滚动到底部逻辑，确保用户能看到最新生成的内容。处理连接异常和错误兜底，提升用户体验（如显示错误提示、自动重连）。

6. 生产环境优化与问题排查

6.1 性能优化建议

1. 连接管理：前端实现 SSE 连接池或 WebSocket 重连机制，避免频繁建连开销。

流量控制：后端通过limitRate()限制数据流速率，避免前端过载：

return chatClient.stream(prompt) .content() .limitRate(10) // 每秒最多推送10个数据块 .delayElements(Duration.ofMillis(50)); 

数据压缩：开启 Gzip 压缩，减少流式传输的数据量：

server: compression: enabled: true mime-types: text/event-stream,application/json 

线程池配置：调整 WebFlux 的 Netty 线程池大小，适应高并发场景：

server: netty: threads: worker: 16 # 工作线程数，建议为CPU核心数的2倍 

6.2 常见问题排查

1. 跨域问题：确保后端 CorsConfig 正确配置，允许text/event-stream类型和 WebSocket 连接。
2. 内存泄漏：前端组件卸载时，务必关闭 EventSource 或 WebSocket 连接，避免残留订阅。

打字机效果卡顿：可能是前端渲染频率过高，可通过requestAnimationFrame优化：

const renderTyping = (content) => { requestAnimationFrame(() => { currentText.value += content; }); }; 

SSE 连接断开：检查是否有防火墙拦截长连接，或前端未处理onerror事件，可实现重连逻辑：

const createEventSource = (prompt) => { const es = new EventSource(`/api/ai/stream?prompt=${prompt}`); es.onerror = () => { setTimeout(() => createEventSource(prompt), 3000); // 3秒后重连 }; return es; }; 

7. 总结与扩展方向

        本文基于 Spring AI+WebFlux+SSE/WebSocket 实现了 AI 流式响应与前端集成，核心价值在于通过响应式编程模型解决了传统同步响应的延迟痛点，实现了低延迟、高体验的「打字机」效果。关键技术点包括：

Reactive 编程与 Flux 数据流的异步非阻塞处理Spring AI ChatClient.stream () 的多粒度流式 API 使用EventSource 与 WebSocket 的前端对接方案选型Vue3/React 的逐字渲染逻辑实现

扩展方向：

1. 多模型支持：基于 Spring AI 的统一接口，扩展支持 OpenAI、Anthropic 等多种模型的流式响应。
2. 知识库增强：结合 RAG 技术，将流式响应与本地知识库结合，实现更精准的行业问答。
3. 前端优化：添加消息编辑、撤回、加载状态指示等功能，提升产品化体验。
4. 监控告警：集成 Prometheus+Grafana，监控流式响应的吞吐量、延迟、错误率等指标。

        流式响应是 AI 应用提升用户体验的关键技术，而 Spring AI 与 WebFlux 的深度集成，为 Java 开发者提供了低门槛、高性能的实现方案。希望本文的技术解析和实战代码能帮助你快速落地实时 AI 交互功能。

8. 参考文献

1. Spring AI 官方文档：https://spring.io/projects/spring-ai
2. Spring WebFlux 响应式编程指南：https://docs.spring.io/spring-framework/docs/current/reference/html/web-reactive.html
3. MDN EventSource 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource
4. MDN WebSocket 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
5. Project Reactor 官方文档：https://projectreactor.io/docs/core/release/reference/