使用 Spring Boot + SSE 实现实时消息推送功能

wenyan2024

于 2024-07-17 14:24:16 发布

阅读量262

点赞数 3

分类专栏： JAVA 文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/u011938913/article/details/140494114

版权

JAVA 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、引言

在当今的互联网应用中，实时消息推送成为了提升用户体验和增强系统交互性的关键技术。本文将深入探讨如何使用 Spring Boot 结合 Server-Sent Events（SSE）来实现实时消息推送功能，包括 SSE 的实现原理、特点、应用场景，并通过详细的前后端代码示例进行展示。

二、SSE 实现原理

SSE 基于 HTTP 协议，客户端向服务器发起一个请求，服务器保持该连接打开。当有新的消息产生时，服务器通过这个连接将消息以特定的格式推送给客户端。SSE 利用了 HTTP 协议的流特性，通过设置特定的响应头，如Content-Type: text/event-stream，来标识这是一个 SSE 连接。服务器推送的消息以特定的格式组织，每行以data:开头表示数据内容。

三、SSE 特点

单向通信：SSE 是服务器向客户端的单向推送，客户端无法主动向服务器发送数据。
轻量级：相较于 WebSocket 等技术，SSE 的实现相对简单，开销较小。
基于 HTTP：利用现有的 HTTP 基础设施，易于部署和集成。
跨平台支持：大多数现代浏览器都支持 SSE，具有较好的兼容性。

四、SSE 应用场景

实时通知：如邮件到达通知、系统告警等。
数据实时更新：股票行情、天气预报等数据的实时推送。
日志实时监控：将服务器端的日志实时推送到前端展示。

五、后端代码实现（Spring Boot）

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.util.concurrent.atomic.AtomicInteger;

@RestController
public class SseController {

    private AtomicInteger counter = new AtomicInteger(0);

    @GetMapping(value = ”/stream“, produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter streamMessages() {
        SseEmitter emitter = new SseEmitter();

        new Thread(() -> {
            try {
                while (true) {
                    String message = ”消息 “ + counter.incrementAndGet();
                    // send(SseEvent event) 示例
                    SseEvent event = new SseEventBuilder()
                      .data(message)
                      .name(”customEvent“)
                      .build();
                    emitter.send(event);
                    // send(Object data) 示例
                    emitter.send(message);
                    Thread.sleep(5000);
                }
            } catch (Exception e) {
                emitter.completeWithError(e);
            }
        }).start();

        // complete() 示例
        emitter.onCompletion(() -> {
            System.out.println(”连接正常完成“);
        });

        // timeout(long timeoutMillis) 示例
        emitter.timeout(10000);

        // onTimeout(Runnable callback) 示例
        emitter.onTimeout(() -> {
            System.out.println(”连接超时“);
        });

        // onError(ErrorCallback callback) 示例
        emitter.onError((Throwable t) -> {
            System.out.println(”发生错误: “ + t.getMessage());
        });

        return emitter;
    }
}

在上述后端代码中，定义了一个/stream的接口。创建了SseEmitter对象，并在新的线程中每隔 5 秒发送一条消息。

六、前端代码实现（HTML + JavaScript）

<!DOCTYPE html>
<html lang=”en“>

<head>
  <meta charset=”UTF-8“>
  <meta http-equiv=”X-UA-Compatible“ content=”IE=edge“>
  <meta name=”viewport“ content=”width=device-width, initial-scale=1.0“>
  <title>SSE 实时消息推送示例</title>
</head>

<body>

  <script>
    // 创建 EventSource 对象连接后端
    var source = new EventSource(’/stream‘);

    // 处理接收到的消息
    source.onmessage = function (event) {
      console.log(event.data);
      var div = document.createElement(’div‘);
      div.innerHTML = event.data;
      document.body.appendChild(div);
    };

    // 处理连接错误
    source.onerror = function (error) {
      console.error(’SSE 连接错误:‘, error);
    };
  </script>

</body>

</html>

前端通过创建EventSource对象与后端的/stream接口建立连接，并处理接收到的消息和连接错误。