实时数据推送:Spring Boot 中两种 SSE 实战方案

ops/2024/10/19 6:22:51/

在 Web 开发中,实时数据交互变得越来越普遍。无论是股票价格的波动、比赛比分的更新,还是聊天消息的传递,都需要服务器能够及时地将数据推送给客户端。传统的 HTTP 请求-响应模式在处理这类需求时显得力不从心,而服务器推送事件(Server-Sent Events,SSE)为我们提供了一种轻量级且高效的解决方案。

本文将介绍两种基于 Spring Boot 实现 SSE 的方案,并结合代码示例,帮助你快速掌握实时数据推送的技巧。

SSE:轻量级实时数据传输方案

SSE 是一种基于 HTTP 的服务器推送技术,它允许服务器在事件发生时主动将数据推送给客户端,无需客户端不断发起请求。SSE 使用简单的文本格式传输数据,并利用浏览器原生的 EventSource 对象进行处理。

SSE 的优势:

  • 简单易用: 基于 HTTP 协议,无需额外学习成本。
  • 轻量级: 数据格式简单,传输效率高。
  • 浏览器兼容性好: 大多数现代浏览器都支持 SSE。

方案一:Spring WebFlux(或 Reactor ) + SSE,打造响应式实时数据流

Spring WebFlux 是 Spring Framework 5.0 推出的响应式 Web 框架,它基于 Reactor 库,支持异步非阻塞的编程模型,能够高效处理大量并发连接和数据流。

  1. 异步调用 API: 使用 WebClient 或其他异步 HTTP 客户端库异步调用外部 API。
  2. 使用 Flux 或 Mono 处理响应: 使用 Reactor 的 Flux 或 Mono 类型处理异步 API 的响应数据流。
  3. 整合到 SSE 流中: 将 API 响应数据整合到已有的 SSE 流中,或者创建一个新的 SSE 流并将数据推送给前端

1. 添加依赖:

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

2. 创建 Controller:

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;
import org.springframework.http.codec.ServerSentEvent;
import org.springframework.web.reactive.function.client.WebClient;import java.time.Duration;@RestController
public class ChatController {private final WebClient webClient; // 用于调用外部 APIpublic ChatController(WebClient.Builder webClientBuilder) {this.webClient = webClientBuilder.baseUrl("http://api.example.com").build(); }@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public Flux<ServerSentEvent<String>> streamChatGPTReply(@RequestParam String message) {// 使用 WebClient 异步调用外部 APIreturn webClient.post().uri("/api/external") .bodyValue(message).retrieve().bodyToFlux(String.class).map(data -> ServerSentEvent.<String>builder().data(data).build()).delayElements(Duration.ofMillis(100)); // 模拟延迟}
}

3. 前端代码示例:

<!DOCTYPE html>
<html>
<head><title>SSE Chat Demo</title>
</head>
<body><h1>SSE Chat</h1><div id="messages"></div><input type="text" id="message" placeholder="Enter message"><button onclick="sendMessage()">Send</button><script>const eventSource = new EventSource('/stream?message=Hello'); // 连接到 SSE 接口eventSource.onmessage = (event) => {document.getElementById('messages').innerHTML += event.data + '<br>'; // 显示接收到的消息};eventSource.onerror = (error) => {console.error('SSE 连接错误:', error);eventSource.close();};function sendMessage() {const message = document.getElementById('message').value;// 发送消息到服务器,这里仅作示例,实际应用中可能需要调用其他 API}</script>
</body>
</html>

方案二:Spring MVC + DeferredResult/Callable,实现异步结果返回

在 Spring MVC 中,我们可以使用 DeferredResult 或 Callable 实现异步结果返回,从而实现服务器推送。

  1. 创建一个 DeferredResult 或 Callable 对象: 这两个对象都允许异步返回结果。
  2. 启动一个新线程调用 API: 在新线程中调用外部 API,避免阻塞主线程。
  3. 设置 DeferredResult 的结果或返回 Callable 的值: 在 API 调用完成后,设置 DeferredResult 的结果或返回 Callable 的值,Spring 会自动将结果发送给前端

1. 使用 DeferredResult:

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.context.request.async.DeferredResult;@RestController
public class DeferredResultController {@GetMapping(value = "/deferred", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public DeferredResult<String> handleRequest(@RequestParam String message) {DeferredResult<String> result = new DeferredResult<>();new Thread(() -> {// 模拟耗时操作,例如调用外部 APIString apiResponse = callExternalAPI(message);// 设置 DeferredResult 的结果result.setResult(apiResponse);}).start();return result;}private String callExternalAPI(String message) {// 模拟调用外部 API 并返回结果return "External API response for: " + message;}
}

2. 使用 Callable:

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.util.concurrent.Callable;@RestController
public class CallableController {@GetMapping(value = "/callable", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public Callable<String> handleRequest(@RequestParam String message) {return () -> {// 模拟耗时操作,例如调用外部 APIString apiResponse = callExternalAPI(message);return apiResponse;};}private String callExternalAPI(String message) {// 模拟调用外部 API 并返回结果return "External API response for: " + message;}
}

前端代码同上

总结

本文介绍了两种基于 Spring Boot 实现 SSE 的方案:

  • Spring WebFlux + SSE: 更适合处理大量并发连接和数据流的场景,代码简洁优雅,更符合响应式编程的思想。
  • Spring MVC + DeferredResult/Callable: 更适合处理单个请求的异步结果返回,代码相对简单,但可扩展性有限。

你可以根据具体的业务需求选择合适的方案来实现实时数据推送功能。无论选择哪种方案,SSE 都为我们提供了一种轻量级、高效、易于实现的实时数据传输方案,可以帮助我们构建更加优秀的用户体验.


http://www.ppmy.cn/ops/94299.html

相关文章

OceanBase V4.2特性解析:简化分区表重命名功能

1. 背景 OceanBase数据库兼容hash、range、list等多种分区表类型&#xff0c;并支持二级分区&#xff0c;这些特性赋予了OceanBase数据库卓越的可扩展性。分区表的分区名称可由用户根据需求自行设定&#xff0c;或依据相应的命名规则由系统自动化生成。在实际的用户业务场景中…

51单片机-LCD1602显示屏

简介 是一个液晶显示屏&#xff0c;通过电压对显示区域进行控制&#xff0c;有电就显示。 能够同时显示32个字符&#xff0c;分为两行&#xff0c;一行显示16个字符。可以显示的内容只能是字母、数字或者一些特殊符号。 使用ASCII码来让LCD1602来显示对应的字符。 电路图 …

【OpenCV C++20 学习笔记】直方图计算-split, calcHist, normalize

直方图计算-split, calcHist, normalize 广义直方图示例目标分离通道计算直方图绘制计算结果归一化绘制 最终结果 广义直方图 直方图的横坐标除了可以是图片中的强度值&#xff0c;也可以是任何其他我们想要观察的特征。例如&#xff0c;下面的图片矩阵中包含了0-255的强度值&…

Jmeter接口测试+压力测试

接口测试 Jmeter-http接口脚本 一般分五个步骤:&#xff08;1&#xff09;添加线程组 &#xff08;2&#xff09;添加http请求 &#xff08;3&#xff09;在http请求中写入接入url、路径、请求方式和参数 &#xff08;4&#xff09;添加查看结果树 &#xff08;5&#xff09;…

Highcharts 条形图:数据可视化的利器

Highcharts 条形图:数据可视化的利器 引言 在数据分析和可视化领域,Highcharts 是一个广受欢迎的 JavaScript 图表库。它以其易用性、灵活性和丰富的图表类型而著称。其中,条形图作为一种基础但功能强大的图表类型,被广泛应用于各种场景,以直观地展示数据分布和比较。本…

dockerfile

dockerfile 自定义镜像--------通过dockerfile创建镜像 创建镜像的方式 1、dockerfile最基本的方式&#xff0c;也是最常用的方式 2、docker pull 拉取的是最基础的镜像&#xff0c;只有基础功能&#xff0c;没有定制化的功能。 3、基于基础镜像&#xff0c;创建好了容器之…

vue 3d echarts scatter3D元素塌陷,图标塌陷进地图完美解决方案

当我们手机用 scatter3D 类型时&#xff0c;最小值因为渲染问题会塌陷进模型里面&#xff0c;所以只要让value固定&#xff0c;再将label formatter 配合 boxHeight属性即可解决&#xff0c;&#xff08;代码附带自定义label图标解决办法&#xff09; 解决&#xff1a; <…

Docker日志管理

一、知识点介绍 1.ELK(Elasticserach、Logstash、Kibana) 前面笔记有 2.什么是 Filebeat Filebeat 是 ELK 组件的新成员&#xff0c; 也是 Beat 成员之一。基于 Go 语言开发&#xff0c;无任何依赖并且比 Logstash 更加轻量&#xff0c;不会带来过高的资源占用&#xff0c; …