【Java网络编程与IO流】Spring boot整合SSE实现服务器实时推送流信息

最新推荐文章于 2025-05-16 15:34:45 发布

mind_programmonkey

最新推荐文章于 2025-05-16 15:34:45 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：开发篇文章标签： spring boot sse 服务器实时推流

本文链接：https://blog.csdn.net/Mind_programmonkey/article/details/110435894

开发篇专栏收录该内容

10 篇文章

订阅专栏

本文围绕Spring Boot整合SSE实现服务器实时推流展开。先介绍SSE相关知识，它是HTML5协议，有EventSource对象及标准事件，支持断线重连，传输数据有格式要求。接着阐述搭建前端页面和后端Controller的过程，还对实现方法进行改进以达更好效果。

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

Java网络编程与IO流目录：

Spring boot整合SSE实现服务器实时推送流信息

SSE全程Server Sent Event，就是服务器发送事件。本文将在springboot的基础上实现一个sse，实现服务器实时推流。

一、SSE相关知识

SSE的基本特性：

HTML5中的协议，是基于纯文本的简单协议；
在游览器端可供JavaScript使用的EventSource对象

EventSource提供了三个标准事件，同时默认支持断线重连

事件	描述
onopen	当成功与服务器建立连接时产生
onmessage	当收到服务器发来的消息时发生
onerror	当出现错误时发生

传输的数据有格式上的要求，必须为 [data:…\n…\n]或者是[retry:10\n]

简单使用demo：

EventSource 对象用于接收服务器发送事件通知：

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

实例解析：

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）
每接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中

二、Spring Boot整合SSE实现服务器推流

2.1 搭建前端页面

首先需要在spring boot的基础上的搭建出前端页面，使用呢thymeleaf，具体可参考spring boot整合thymeleaf,支持JSP和HTML页面开发

本节的SSE页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spring boot整合SSE实现服务器推送流信息</title>
    <script>
        if(typeof(EventSource)!=="undefined")
        {
            var source = new EventSource("/sse/get");
            source.onmessage = function(event)
            {
                // document.getElementById("result").innerHTML+=event.data + "<br>";
                document.getElementById('result').innerText = event.data ;
            };
        }
        else
        {
            document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
        }
    </script>
</head>
<body>
    <div id="result"></div>
</body>
</html>

游览器发送了一个/sse/get请求。接下来在controller下写相关请求。

2.2 搭建后端Controller

@RestController
@RequestMapping("/sse")
public class SSEController {
    /**
     * 网上的方法 但存在一个问题 运行在tomcat中，tomcat会帮助直接给关掉，而sse有自动重连，所以每次都会重新发起请求。
     * @return
     */
    @GetMapping(value = "get",produces = "text/event-stream;charset=UTF-8")
    public String getData(){
        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        return "data:行情:" + Math.random()+"\n\n";
    }
}

具体效果如下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2D01h8zx-1606808289797)(C:\Users\lcz\AppData\Roaming\Typora\typora-user-images\image-20201201152757133.png)]$

但该方法，我们可以发现前端还是在不断的发送请求，不是像SSE说的那样，该种实现方式还是存在着一些问题的。

对上述的controller方法进行改进，并将前文的html的请求进行替换，改进如下：

    @GetMapping(value = "get_true")
    public void getData_True(HttpServletResponse response){
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("utf-8");

        try{
            PrintWriter pw = response.getWriter();
            while (true){
                if (pw.checkError()){
                    System.out.println("客户端断开连接");
                    break;
                }
                Thread.sleep(1000);
                pw.write("data:行情:" + Math.random()+"\n\n");
                pw.flush();
            }
        }catch (IOException | InterruptedException e){
            e.printStackTrace();
        }
    }

结果如下，只通过一个请求，便实现了更新：
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bMYM1gK7-1606808289801)(C:\Users\lcz\AppData\Roaming\Typora\typora-user-images\image-20201201153528100.png)]$