springboot学习(五十八) springboot中使用SseEmitter推送消息

最新推荐文章于 2025-03-22 12:25:12 发布

码农-文若书生

最新推荐文章于 2025-03-22 12:25:12 发布

阅读量2.2w

点赞数 8

分类专栏： spring boot 文章标签： java spring boot http sse SseEmitter

本文链接：https://blog.csdn.net/u011943534/article/details/120251614

版权

spring boot 专栏收录该内容

87 篇文章

订阅专栏

本文介绍了如何在SpringBoot应用中使用SseEmitter进行服务器到客户端的消息推送。通过创建SseEmitter实例，设置超时和重连时间，实现实时推送。客户端使用EventSource接收消息，支持onmessage、onerror和onopen事件。示例代码展示了订阅、推送和断开连接的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

服务端常用推送技术有：
1、客户端轮询:ajax定时拉取
2、服务端主动推送:WebSocket。全双工的，本质上是一个额外的tcp连接，建立和关闭时握手使用http协议，其他数据传输不使用http协议，更加复杂一些，适用于需要进行复杂双向数据通讯的场景。
3、服务端主动推送:SSE (Server Send Event)。html5新标准，用来从服务端实时推送数据到浏览器端，
直接建立在当前http连接上，本质上是保持一个http长连接，轻量协议简单的服务器数据推送的场景，使用服务器推送事件， SSE技术是基于单工通信模式，只是单纯的客户端向服务端发送请求，服务端不会主动发送给客户端。服务端采取的策略是抓住这个请求不放，等数据更新的时候才返回给客户端，当客户端接收到消息后，再向服务端发送请求，周而复始。

这篇文章介绍Springboot中使用SseEmitter实现消息推送。

1、服务端：

package com.iscas.biz.test.sse;

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

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 *  测试SSE推送消息
 *
 * @author zhuquanwen
 * @vesion 1.0
 * @date 2021/9/11 21:01
 * @since jdk1.8
 */
@RestController
@RequestMapping(path = "sse/test")
public class SseControllerTest {
    private static Map<String, SseEmitter> sseCache = new ConcurrentHashMap<>();
    @GetMapping(path = "subscribe", produces = {MediaType.TEXT_EVENT_STREAM_VALUE})
    public SseEmitter push(String id) throws IOException {
        // 超时时间设置为3s，用于演示客户端自动重连
        SseEmitter sseEmitter = new SseEmitter(30000L);
        // 设置前端的重试时间为1s
        sseEmitter.send(SseEmitter.event().reconnectTime(1000).data("连接成功"));
        sseCache.put(id, sseEmitter);
        System.out.println("add " + id);
        sseEmitter.onTimeout(() -> {
            System.out.println(id + "超时");
            sseCache.remove(id);
        });
        sseEmitter.onCompletion(() -> System.out.println("完成！！！"));
        return sseEmitter;
    }

    @GetMapping(path = "push")
    public String push(String id, String content) throws IOException {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.send(SseEmitter.event().name("msg").data("后端发送消息：" + content));
        }
        return "over";
    }

    @GetMapping(path = "over")
    public String over(String id) {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.complete();
            sseCache.remove(id);
        }
        return "over";
    }
}

其中subscribe是开启并订阅消息，push是模拟触发后端推送，over是模拟断开sse连接。

2、客户端：

<!doctype html>
<html lang="en">
<head>
    <title>Sse测试</title>
    <meta charset="utf-8"/>
</head>
<body>
<div>sse测试</div>
<div id="result"></div>
</body>
</html>
<script>
    var source = new EventSource('http://localhost:7901/demo/sse/test/subscribe?id=qwe');
    //source.onmessage = function (event) {
     //   text = document.getElementById('result').innerText;
      //  text += '\n' + event.data;
       // document.getElementById('result').innerText = text;
    //};
    source.addEventListener("msg", function(e) {
        text = document.getElementById('result').innerText;
        text += '\n' + e.data;
        console.log(e);
        document.getElementById('result').innerText = text;
        //source.close();
    })
    source.onerror = function(e) {
        if (e.readyState == EventSource.CLOSE) {
            text = document.getElementById('result').innerText;
            text += '\n' + "连接关闭";
        }
    }
    <!-- 添加一个开启回调 -->
    source.onopen = function (event) {
        text = document.getElementById('result').innerText;
        text += '\n 开启: ';
        console.log(event);
        document.getElementById('result').innerText = text;
    };
</script>

3、测试
在这里插入图片描述