使用Flux、Mono案例

原创于 2025-09-08 00:07:31 发布 · 748 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#分布式

分布式专栏收录该内容

11 篇文章

订阅专栏

生产环境中前后端使用Flux的典型案例及技术实现方案：

‌1. 实时监控大屏（后端Flux推送 + 前端SSE消费）‌

‌场景‌：金融交易监控、IoT设备状态追踪
‌技术栈‌：

后端：Spring WebFlux + Reactor Netty
前端：EventSource API + React/Vue
‌实现逻辑‌：

javaCopy Code

// 后端示例 @GetMapping(value = "/sensor/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<SensorData> streamSensorData() { return sensorService .getRealtimeUpdates() // 返回Flux<SensorData> .delayElements(Duration.ofMillis(500)); // 控制推送频率 }

‌前端消费‌：

javascriptCopy Code

const eventSource = new EventSource('/sensor/stream'); eventSource.onmessage = (e) => { const data = JSON.parse(e.data); updateDashboard(data); // 实时更新UI };

‌优势‌：

背压控制避免客户端过载
长连接复用降低TCP握手开销

‌2. 批量文件处理（分块流式响应）‌

‌场景‌：CSV导出、日志文件下载
‌技术栈‌：

后端：Spring WebFlux + Reactive MongoDB
前端：Fetch API流式处理
‌实现‌：

javaCopy Code

@GetMapping("/export/large-data") public Flux<DataChunk> exportLargeData() { return reactiveMongoTemplate .streamQuery(query, DataEntity.class) .map(this::convertToChunk) // 分块转换 .take(1000); // 限制总量 }

‌前端处理‌：

javascriptCopy Code

fetch('/export/large-data') .then(response => { const reader = response.body.getReader(); const processChunk = ({done, value}) => { if (!done) { appendToFile(value); // 流式写入文件 return reader.read().then(processChunk); } }; return reader.read().then(processChunk); });

‌3. 聊天应用（WebSocket双向流）‌

‌技术栈‌：

后端：Spring Boot WebFlux + RSocket
前端：SockJS + Stomp.js
‌核心代码‌：

javaCopy Code

@MessageMapping("chat.{roomId}") public Flux<Message> joinRoom(@DestinationVariable String roomId) { return chatService .subscribe(roomId) // 返回Flux<Message> .onBackpressureBuffer(100); // 缓冲溢出保护 }

‌前端连接‌：

javascriptCopy Code

const stompClient = new Stomp.Client(...); stompClient.subscribe('/topic/chat.123', (msg) => { showMessage(JSON.parse(msg.body)); });

‌关键设计原则‌

‌背压策略‌：
- 服务端：.limitRate(100) 限制推送速率
- 客户端：取消订阅或滑动窗口控制
‌错误恢复‌：
- 自动重试逻辑：.retryWhen(Retry.backoff(3, Duration.ofSeconds(1)))
‌生产级增强‌：
- 服务端指标：Micrometer监控Flux的订阅/完成率
- 客户端：添加心跳检测（如每30秒ping/pong）

实际案例参考：

阿里双11大屏使用类似方案处理每秒百万级事件
特斯拉车辆状态同步采用WebFlux+RSocket实现低延迟更新

生产环境中前后端使用Mono的典型场景及技术实现方案：

‌1. 用户身份认证（JWT令牌签发）‌

‌场景‌：登录接口返回单条令牌
‌技术栈‌：

后端：Spring Security + WebFlux
前端：React/Axios
‌实现逻辑‌：

javaCopy Code

@PostMapping("/auth/login") public Mono<AuthResponse> login(@RequestBody LoginRequest request) { return authService .authenticate(request.getUsername(), request.getPassword()) .flatMap(user -> Mono.just(jwtUtil.generateToken(user))); // 明确返回单个结果 }

‌前端调用‌：

javascriptCopy Code

axios.post('/auth/login', credentials) .then(response => { localStorage.setItem('token', response.data.token); });

‌优势‌：

明确语义：操作结果唯一且确定
自动HTTP 404处理（当Mono为空时）

‌2. 电商订单支付状态查询‌

‌场景‌：获取单笔订单的实时支付结果
‌技术栈‌：

后端：Spring WebFlux + Redis
前端：Vue/Composition API
‌服务端代码‌：

javaCopy Code

@GetMapping("/orders/{id}/payment-status") public Mono<PaymentStatus> getPaymentStatus(@PathVariable String id) { return redisTemplate .opsForValue() .get("payment:" + id) // 返回Mono<PaymentStatus> .switchIfEmpty(Mono.error(new OrderNotFoundException())); }

‌前端消费‌：

typescriptCopy Code

const fetchStatus = async (orderId: string) => { const { data } = await api.get(`/orders/${orderId}/payment-status`); updateUI(data); // 更新支付状态组件 };

‌3. 分布式锁申请（Redis实现）‌

‌场景‌：全局资源互斥访问控制
‌技术栈‌：

后端：Lettuce + Reactor
前端：无直接交互（后台服务间调用）
‌核心代码‌：

javaCopy Code

public Mono<Boolean> tryLock(String lockKey, String clientId, Duration ttl) { return redisTemplate.execute(connection -> Mono.from(connection .stringCommands() .set( lockKey.getBytes(), clientId.getBytes(), SetArgs.nx().px(ttl.toMillis()) ) ).map("OK"::equalsIgnoreCase) ); }

‌调用示例‌：

javaCopy Code

lockService.tryLock("inventory:1", "node-1", Duration.ofSeconds(30)) .subscribe(locked -> { if (locked) processInventory(); });