Spring Boot 使用 SSE 方式向前端推送数据详解

概述

Server-Sent Events (SSE) 是一种基于 HTTP 协议的服务器推送技术，可以将服务器端的实时数据流推送给客户端，常用于构建实时通讯、监控等场景。Spring Boot 提供了很好的支持，可以方便地将 SSE 技术应用于开发中。

步骤

1. 添加依赖

在 pom.xml 文件中添加如下依赖：

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

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

第一个依赖是 Spring Boot Web 的基础依赖，第二个依赖是 Spring Boot WebFlux 支持 SSE 的依赖。

2. 建立 Controller

在 Spring Boot 项目的 Controller 层中添加 SSE 支持，示例如下：

@RestController
@RequestMapping("/sse")
public class SseController {
    @GetMapping(value = "/event")
    public Flux<ServerSentEvent<String>> getEvent(){
        return Flux.interval(Duration.ofSeconds(1))
                .map(e-> ServerSentEvent.builder(e.toString()).build());
    }
}

在 Controller 中，使用 @GetMapping 注解进行请求映射，并使用 Flux 和 ServerSentEvent 类型进行数据流的定义。在上述示例中，每隔 1 秒钟就会向前端推送一个 ServerSentEvent 事件，其中的数据为 0, 1, 2 ... 以此类推。

3. 前端接收 SSE 数据

在前端，我们可以使用 EventSource 进行 SSE 数据的监听和接收，示例如下：

var eventSource = new EventSource("/sse/event");

eventSource.onmessage = function(event) {
    console.log("接收到数据：" + event.data);
}

在前端中，我们创建了一个 EventSource 对象，并将请求地址设置为 "/sse/event"，这和上文 Controller 层中 @GetMapping 中的请求映射相匹配。之后，在 EventSource 对象的 onmessage 回调函数中，我们可以获取到推送过来的数据，这里只是简单地将数据打印在控制台中。实际情况中，我们可以根据需要对数据做进一步处理，如实时更新界面等。

示例

以下是一个完整的 Spring Boot SSE 技术的例子：

@RestController
@RequestMapping("/sse")
public class SseController {
    @GetMapping(value = "/event")
    public Flux<ServerSentEvent<String>> getEvent(){
        Random random = new Random();
        return Flux.interval(Duration.ofSeconds(1))
                .map(e-> ServerSentEvent.builder("随机数据：" + random.nextInt(100)).build());
    }
}

上述示例中，我们在数据流中每隔 1 秒钟推送一个 ServerSentEvent 对象，其中包含一个 0-100 之间的随机数。前端代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spring Boot SSE 示例</title>
</head>
<body>
<div>
    <button onclick="start()">开始接收数据</button>
    <button onclick="close()">停止接收数据</button>
    <p id="data"></p>
</div>

<script type="text/javascript">
    var eventSource = null;

    function start() {
        eventSource = new EventSource("/sse/event");

        eventSource.onmessage = function (event) {
            document.getElementById("data").innerHTML = event.data;
        }
    }

    function close() {
        eventSource.close();
    }
</script>
</body>
</html>

在浏览器中打开该页面后，点击“开始接收数据”按钮，就可以开始接收从后端推送过来的随机数据了。在点击“停止接收数据”按钮后，EventSource 对象会被销毁，停止接收数据。

总结

本文主要介绍了 Spring Boot 中使用 Server-Sent Events (SSE) 技术向前端推送数据的详细步骤，包括添加依赖、建立 Controller 和前端接收 SSE 数据的示例。为了更好地理解 SSE 技术，我们 also 补充了一个完整的 Spring Boot 示例。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Spring Boot 使用 SSE 方式向前端推送数据详解 - Python技术站

Spring Boot 使用 SSE 方式向前端推送数据详解

Spring Boot 使用 SSE 方式向前端推送数据详解

概述

步骤

1. 添加依赖

2. 建立 Controller

3. 前端接收 SSE 数据

示例

总结

相关文章