Spring Boot + Vue3 Post SSE + WebFlux 实现流式 AI 对话

1. 引言

在 AI 对话系统中，流式输出不仅能提升响应速度，还能让用户即时看到 AI 生成的内容，极大优化交互体验。本文介绍基于 Spring Boot WebFlux + SSE 及 Vue3 前端 SSE 插件，实现高效、实时的 AI 对话方案。

2. 方案分析

2.1 SSE（Server-Sent Events）

核心优势：

流式数据推送：适用于 AI 聊天、实时日志等场景，数据一旦生成，立即传输给客户端。
轻量级实现：基于 HTTP 传输，无需 WebSocket 复杂握手过程，浏览器原生支持，兼容性强。
减少服务器负担：相比轮询请求，SSE 仅建立一个持久连接，降低系统开销。

限制：

单向通信：只能由服务器推送数据，无法实现客户端主动发送消息（需结合其他方案）。
连接数限制：受 HTTP/1.1 限制，部分浏览器对单域名的 SSE 连接数有限制。

2.2 WebFlux + WebClient

核心优势：

高并发 & 非阻塞：基于 Reactor 响应式编程模型，适合处理高并发流式数据。
配合 SSE：完美结合 SSE，实现高效数据推送，避免阻塞线程，提高吞吐量。

限制：

学习成本：与传统 Spring MVC 不同，需要掌握响应式编程范式。

3. 后端实现（Spring Boot + WebFlux）

less 复制代码

@RestController
@RequestMapping("/ai")
public class AIChatController {

    @PostMapping(value = "/chat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<ServerSentEvent<String>> chat(@RequestBody ChatRequest request) {
        return Flux.create(sink -> {
            CompletableFuture.runAsync(() -> streamChatResponse(sink, request));
        });
    }

    private void streamChatResponse(FluxSink<ServerSentEvent<String>> sink, ChatRequest request) {
        WebClient webClient = WebClient.create();
        webClient.post()
                .uri("https://api.openai.com/v1/chat/completions")
                .header("Authorization", "Bearer YOUR_API_KEY")
                .bodyValue(request)
                .retrieve()
                .bodyToFlux(String.class)
                .doOnNext(data -> sink.next(ServerSentEvent.builder(data).build()))
                .doOnError(sink::error)
                .doOnComplete(sink::complete)
                .subscribe();
    }
}

4. 前端实现（Vue3 + SSE）

使用 @microsoft/fetch-event-source 插件来发送 POST 请求并处理 SSE 响应。

javascript 复制代码

import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source';

fetchEventSource(url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(data),
    openWhenHidden: true,
    signal: container.ctrl.signal,
    async onopen(response) {
        if (response.ok && response.headers.get('content-type').includes(EventStreamContentType)) {
            console.log('SSE 连接成功');
        } else {
            throw new Error(response.statusText);
        }
    },
    onmessage(ev) {
        if (ev.data === '[DONE]') {
            console.log('SSE 数据接收完成');
        } else {
            const jsonData = JSON.parse(ev.data);
            if (jsonData.choices[0].delta.content) {
                container.content += jsonData.choices[0].delta.content;
            }
        }
    },
    onclose() {
        console.log('SSE 连接关闭');
    },
    onerror(err) {
        console.error('SSE 错误:', err);
    }
});

4.1 前端方案优势

支持 POST 请求的 SSE：适用于携带复杂参数的 AI 对话请求。
自动重连 ：fetch-event-source 具备自动重试机制，提升连接稳定性。
优化流式数据处理：减少 DOM 频繁更新，显著提升渲染性能。
前端无感刷新：即使页面在后台运行，也能稳定接收推送数据。

5. 安全性考虑

5.1 鉴权

JWT 令牌 ：前端请求需携带 Authorization 头部，后端校验用户身份。
IP 限流：防止恶意刷接口，保护服务稳定性。

5.2 防止恶意攻击

请求参数校验：防止 SQL 注入、XSS 攻击。
日志监控 & 告警：异常请求实时检测，确保安全性。

6. 总结

借助 Spring Boot WebFlux + SSE ，结合 Vue3 前端 fetch-event-source 插件，我们可以轻松实现高效、流畅的 AI 对话系统。此方案不仅减少服务器压力，还显著提升用户体验，使 AI 交互更加丝滑自然。同时，搭配安全策略，可有效防范风险，为用户提供更稳定、可靠的服务体验。🚀