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

在Spring Boot应用程序中，我们可以使用SSE（Server-Sent Events）方式向前端推送数据。SSE是一种基于HTTP协议的轻量级推送技术，它允许服务器向客户端推送数据，而无需客户端发起请求。在本文中，我们将详细讲解如何使用Spring Boot和SSE来实现向前端推送数据。

增加依赖

首先，我们需要在pom.xml文件中增加webflux和thymeleaf的依赖。下面是一个示例：

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

<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf-spring5</artifactId>
  <version>3.0.12.RELEASE</version>
</dependency>

在上面的代码中，我们使用Maven将webflux和thymeleaf的依添加到应用程序中。

创建控制器

接下来，我们需要创建一个控制器，用于处理SSE请求。下面是一个示例：

@RestController
public class SSEController {

  private final Flux<Long> intervalFlux = Flux.interval(Duration.ofSeconds(1));

  @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  public Flux<String> sse() {
    return intervalFlux.map(i -> "SSE message " + i);
  }
}

在上面的代码中，我们创建了一个名为SSEController的控制器，并使用@GetMapping注解来指定SSE请求的URL。我们使用produces属性来指定响应的MIME类型为"text/event-stream"。我们使用Flux.interval()方法来创建一个每秒钟发送一次的Flux。我们使用map()方法来将Flux中的每个元素转换为一个字符串，并返回一个新的Flux。

创建Thymeleaf模板

接下来，我们需要创建一个Thymeleaf模板，用于显示SSE消息。下面是一个示例：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <title>SSE Example</title>
</head>

<body>

  <h1>SSE Example</h1>

  <div id="sse"></div>

  <script th:inline="javascript">
    var sse = new EventSource('/sse');
    sse.onmessage = function(event) {
      var div = document.getElementById('sse');
      div.innerHTML += event.data + '<br>';
    };
  </script>

</body>

</html>

在上面的代码中，我们使用Thymeleaf模板来显示SSE消息。我们使用EventSource对象来创建一个SSE连接，并指定SSE请求的URL为"/sse"。我们使用onmessage事件来处理SSE消息，并将消息显示在页面上。

示例说明

下面是两个示例，演示如何使用Spring Boot和SSE来实现向前端推送数据。

示例1：向前端推送随机数

在应用程序中，我们可以使用Flux.generate()方法来生成一个随机数，并使用SSE将其推送到前端。下面是一个示例代码：

@RestController
public class SSEController {

  private final Flux<Integer> randomFlux = Flux.generate(() -> 0, (state, sink) -> {
    int random = ThreadLocalRandom.current().nextInt(100);
    sink.next(random);
    return random;
  });

  @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  public Flux<String> sse() {
    return randomFlux.map(i -> "Random number: " + i);
  }
}

在上面的代码中，我们使用Flux.generate()方法来生成一个随机数，并使用SSE将其推送到前端。我们使用ThreadLocalRandom.current().nextInt(100)方法来生成一个0到100之间的随机数。

示例2：向前端推送实时数据

在应用程序中，我们可以使用Flux.interval()方法来生成一个每秒钟发送一次的Flux，并使用SSE将其推送到前端。下面是一个示例代码：

@RestController
public class SSEController {

  private final Flux<Long> intervalFlux = Flux.interval(Duration.ofSeconds(1));

  @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  public Flux<String> sse() {
    return intervalFlux.map(i -> "SSE message " + i);
  }
}

在上面的代码中，我们使用Flux.interval()方法来生成一个每秒钟发送一次的Flux，并使用SSE将其推送到前端。我们使用Duration.ofSeconds(1)方法来指定每秒钟发送一次。

阅读剩余 61%

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