实现实时数据推送:SpringBoot中SSE接口的两种方法

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

在这里插入图片描述

实现实时数据推送:SpringBoot中SSE接口的两种方法

一、什么是SSE?

SSE(Server-Sent Events) 是一种基于HTTP的服务器向客户端单向实时推送数据的技术。与WebSocket不同,SSE天然支持断线重连,且协议简单,适用于股票行情、实时日志、消息通知等场景。


二、项目环境准备

1. 基础依赖

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

<!-- 若使用WebFlux方式 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

三、两种实现方式对比

特性传统Servlet方式WebFlux响应式方式
线程模型阻塞IO(线程池)非阻塞IO(事件循环)
资源消耗较高较低
代码复杂度需手动管理线程声明式编程
适用场景简单低频场景高并发实时场景

四、传统Servlet实现(基于SseEmitter)

1. 控制器实现

@RestController
public class SseController {

    @GetMapping("/sse")
    public SseEmitter handleSse() {
        SseEmitter emitter = new SseEmitter();
        ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();

        Runnable task = () -> {
            try {
                String data = "Time: " + LocalDateTime.now();
                emitter.send(
                    SseEmitter.event()
                        .data(data)
                        .id(String.valueOf(System.currentTimeMillis()))
                );
            } catch (IOException e) {
                emitter.completeWithError(e);
                executor.shutdown();
            }
        };

        // 定时发送(立即执行,每秒一次)
        executor.scheduleAtFixedRate(task, 0, 1, TimeUnit.SECONDS);

        // 客户端断开处理
        emitter.onCompletion(executor::shutdown);
        emitter.onTimeout(executor::shutdown);

        return emitter;
    }
}

2. 关键点解析

  • SseEmitter:核心类,保持长连接
  • ScheduledExecutorService:定时任务线程池
  • 事件结构:支持设置id/event/data等字段
  • 资源释放:通过onCompletion/onTimeout确保线程池关闭

五、响应式实现(基于WebFlux)

1. 控制器实现

@RestController
public class SseWebFluxController {

    @GetMapping(value = "/sse-stream", 
               produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<ServerSentEvent<String>> streamEvents() {
        return Flux.interval(Duration.ofSeconds(1))
            .map(sequence -> ServerSentEvent.<String>builder()
                .id(String.valueOf(sequence))
                .event("time-update")
                .data("SSE from WebFlux - " + LocalDateTime.now())
                .build());
    }
}

2. 核心优势

  • 非阻塞IO:基于Reactor库实现响应式流
  • 自动背压:处理客户端消费速度差异
  • 简洁API:使用Flux流式编程

六、接口测试方法

1. 使用curl测试

curl http://localhost:8080/sse
curl http://localhost:8080/sse-stream

2. 前端示例

<script>
const eventSource = new EventSource('/sse');

eventSource.onmessage = (e) => {
    console.log('Received:', e.data);
};

eventSource.addEventListener('time-update', (e) => {
    console.log('Custom event:', e.data);
});
</script>

七、生产环境注意事项

  1. 连接管理:设置合理的超时时间(默认30秒)

  2. 错误处理:添加onError回调记录异常

  3. 跨域配置:需要配置CORS

    @Configuration
    public class WebConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/sse*")
                    .allowedOrigins("*");
        }
    }
    
  4. 性能监控:跟踪活跃连接数


八、扩展应用场景

  1. 实时股票报价推送
  2. 系统运行状态监控
  3. 聊天应用消息通知
  4. 长耗时任务进度更新

九、总结

两种实现方式各有优势:

  • 传统Servlet方式 适合简单场景,快速实现
  • WebFlux方式 更适合高并发、低延迟需求

建议根据实际场景选择,对于新项目推荐使用WebFlux实现,能更好地利用系统资源。希望本文能帮助您快速上手SpringBoot中的SSE开发!


源码地址https://gitee.com/bestwishes0203

如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀

### 实现Spring Boot服务器推送消息到前端并触发浮窗弹出 #### 使用Server-Sent Events (SSE) 为了实现实时消息推送,可以采用Server-Sent Events (SSE),这是一种允许服务器向浏览器推送更新的技术。下面是一个完整的例子来说明如何配置和使用SSE。 #### 后端代码设置 首先,在`pom.xml`文件中添加必要的依赖项: ```xml <dependencies> <!-- Other dependencies --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies> ``` 接着定义一个控制器类用于处理SSE连接请求以及发送数据给客户端: ```java import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import java.io.IOException; import java.util.concurrent.CopyOnWriteArrayList; @RequestMapping("/api/sse") public class SseController { private final CopyOnWriteArrayList<SseEmitter> emitters = new CopyOnWriteArrayList<>(); @GetMapping(value = "/connect", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public SseEmitter connect() { var emitter = new SseEmitter(); emitters.add(emitter); // Remove the emitter when it's closed or timed out. emitter.onCompletion(() -> emitters.remove(emitter)); emitter.onError((e) -> emitters.remove(emitter)); return emitter; } /** * Send a message to all connected clients. */ public void sendMessage(String message) throws IOException { for (var emitter : emitters) { try { emitter.send(SseEmitter.event().data(message)); } catch (IOException e) { emitters.remove(emitter); } } } } ``` 这段代码实现了两个主要功能:一是建立与客户端之间的持久化HTTP连接;二是提供了一个方法用来广播消息给所有已连接的客户端[^1]。 #### 前端JavaScript逻辑 在HTML页面上加入如下脚本来监听来自服务器的消息,并根据接收到的信息显示浮动通知框: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SSE Example</title> <script type="text/javascript"> if(typeof(EventSource)!=="undefined"){ let source=new EventSource('/api/sse/connect'); source.addEventListener('message', function(event){ alert(`New Message: ${event.data}`); // 这里可以用更复杂的UI组件代替alert() // 或者构建自定义的通知窗口 const notification=document.createElement('div'); notification.className='notification'; notification.innerText=event.data; document.body.appendChild(notification); setTimeout(()=>{ document.body.removeChild(notification); }, 5000); // 自动关闭通知 }); }else{ console.log("Your browser does not support server-sent events."); } </script> <style> .notification { position: fixed; bottom: 20px; right: 20px; background-color: white; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 1em; z-index: 9999; } </style> <body> <h1>Welcome!</h1> <p>This is an example of using Server-Sent Events.</p> </body> </html> ``` 此部分展示了如何通过EventSource API接收从服务器传来的信息,并利用简单的DOM操作创建临时性的视觉反馈——即所谓的“浮动窗口”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛可可白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值