Spring Boot 中基于 WebClient 的 SSE 流式接口实战

—— 从 Feign 到 WebClient 的一次真实踩坑记录

一、背景:为什么我要做 SSE?

在最近的一个项目中,我负责接入一个 AI 问答服务
一开始的接口形态非常常规:

@PostMapping("/health_manager") public RespBean<HealthManagerQueryDataVO> sendQuery(...) 

客户端发请求,服务端等 AI 全部生成完内容,再一次性返回。

问题很快就暴露了:

  • AI 返回慢(10 秒甚至更久)
  • 用户页面“卡死”,体验极差
  • 其实 AI 是“边生成边返回”的,但我们完全浪费了这个能力

于是,目标就很明确了:

把原有同步接口,改造成支持 SSE(Server-Sent Events)的流式接口

二、什么是 SSE?为什么适合 AI 问答?

1️⃣ SSE 是什么?

SSE(Server-Sent Events)是一种 服务器主动推送 的 HTTP 通信方式:

  • 基于 HTTP
  • 单向(服务端 → 客户端)
  • 长连接
  • 文本流(text/event-stream

返回的数据长这样:

data: 你好 data: 我是 data: AI 

客户端可以一边接收,一边渲染


2️⃣ 为什么 SSE 特别适合 AI 场景?

技术适配度
HTTP 普通接口❌ 等全部生成
WebSocket❌ 太重
SSE✅ 天生流式

AI 的输出特征是:

  • token 级 / 句子级生成
  • 可边生成边消费
  • 用户随时可能中断

👉 SSE 几乎是最优解


三、第一个坑:Feign 不支持 SSE

项目里原本调用 AI 服务用的是 Feign

@FeignClient("mb-ai") RespBean sendQuery(...) 

一开始我尝试“硬改”,但很快发现:

Feign 本质是一次性 HTTP 调用,它不支持流式消费响应体

哪怕 AI 服务是 SSE,Feign 也会:

  • 等完整响应
  • 再反序列化
  • 流式直接失效

结论很明确:

❌ Feign 不能用于 SSE
✅ SSE 必须用 WebClient / HttpClient

四、正确姿势:WebClient + SseEmitter

1️⃣ Controller 层:返回 SseEmitter

SSE 接口和普通接口最大的不同是:
返回值不再是业务对象,而是一个“连接本身”

@PostMapping( value = "/health_manager/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE ) public SseEmitter healthManagerStream( @RequestBody HealthManagerQueryDTO request) { SseEmitter emitter = new SseEmitter(0L); // 不超时 aiService.streamQuery(request, emitter); return emitter; } 

关键点:

  • produces = text/event-stream
  • 返回 SseEmitter
  • 业务逻辑交给 Service

2️⃣ Service 层:WebClient 真正消费 AI 流

webClient.post() .uri("/health_manager") .contentType(MediaType.APPLICATION_JSON) .accept(MediaType.TEXT_EVENT_STREAM) .bodyValue(request) .retrieve() .bodyToFlux(String.class) .subscribe( data -> emitter.send(data), error -> emitter.completeWithError(error), emitter::complete ); 

这段代码的含义是:

  • AI 每吐一段数据
  • 我就 emitter.send()
  • 前端立刻收到

真正实现了“边生成、边返回、边渲染”


五、第二个大坑:UnknownHostException: mb-ai

代码写完,一跑,直接报错:

java.net.UnknownHostException: mb-ai 

第一反应:

“不对啊,Feign 一直是能调用 mb-ai 的”

原因分析

  • Feign:自动走注册中心(Nacos / Eureka)
  • WebClient:只认 DNS
.baseUrl("http://mb-ai") 

在 WebClient 看来:

mb-ai 就是一个普通域名
但 DNS 根本不认识它

六、正确解法:WebClient 接入服务发现

1️⃣ 引入 LoadBalancer

<dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-loadbalancer</artifactId> </dependency> 

2️⃣ 给 WebClient.Builder 加 @LoadBalanced

@Configuration public class WebClientConfig { @Bean @LoadBalanced public WebClient.Builder webClientBuilder() { return WebClient.builder(); } } 

3️⃣ baseUrl 继续用服务名

.baseUrl("http://mb-ai") 

此时调用链变成:

WebClient → LoadBalancer → Nacos → 真实 IP:PORT 

UnknownHostException 到此彻底解决


七、最终依赖组合(最小可用)

<!-- WebClient / SSE --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <!-- 服务发现 --> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-loadbalancer</artifactId> </dependency> <!-- Nacos(项目里一般已有) --> spring-cloud-starter-alibaba-nacos-discovery 
⚠️ 不会把项目变成 WebFlux
只是“在 MVC 项目里用 WebClient”

八、架构上的最终形态(我现在的做法)

Feign └── 普通同步接口(兼容老系统) WebClient └── SSE 流式接口(AI 问答) 

接口层设计成:

POST /health_manager // 非流式 POST /health_manager/stream // SSE 

前端可以按需选择。


九、一些实战踩坑总结

❌ Feign 强行做 SSE

→ 行不通

❌ WebClient 不加 LoadBalanced

→ 必炸 UnknownHostException

❌ 忘了 produces

→ 前端收不到流

❌ AI 实际没返回 text/event-stream

→ 你这边再对也没用


十、写在最后

这次改造最大的收获不是“把 SSE 跑通了”,而是更清楚地理解了:

  • Feign 和 WebClient 的边界
  • 同步接口和流式接口在架构层面的本质差异
  • AI 场景对交互模型的倒逼

如果你现在也在做:

  • AI 问答
  • 长文本生成
  • 实时推送

那么,SSE 几乎是绕不开的一步

Read more

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果 你不需要配置环境、不用写一行推理代码、甚至不用打开终端——只要把一张截图拖进浏览器窗口,几秒钟后,它就能告诉你图里写了什么、画了什么、哪里有问题。这不是未来预告,而是你现在就能在本地跑起来的真实体验。 GLM-4.6V-Flash-WEB 是智谱AI最新开源的轻量级视觉语言模型,专为Web端实时交互而生。它不像某些“实验室模型”那样只存在于论文和Benchmark表格里,而是真正做到了:部署快、启动快、响应快、上手更快。一块RTX 3090,一个浏览器,一次拖拽,结果即刻呈现。 本文不讲训练原理,不列参数表格,不堆技术术语。我们只聚焦一件事:怎么用好它的Web界面?从零开始,到稳定产出,每一步都清晰可操作。 1. 为什么说“拖图就出结果”不是宣传话术? 很多多模态模型标榜“支持图文理解”,但实际用起来才发现:要装依赖、改路径、调精度、修CUDA版本、

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.