深入浅出SSE与Spring Boot实战应用

t0_54coder

于 2024-08-09 19:09:51 发布

阅读量335

点赞数 5

文章标签： spring boot 后端 java 编程开发

本文链接：https://blog.csdn.net/m0_62153576/article/details/141069567

版权

在现代Web应用开发中，实现服务器与客户端之间的实时通信变得越来越重要。Server-Sent Events（SSE）作为一种简单高效的技术，允许服务器主动向客户端推送信息。本文将通过一个Spring Boot应用的实例，详细讲解如何使用SSE技术实现实时数据推送。

一、SSE技术简介

SSE是一种基于HTTP的新标准，它允许服务端向客户端发送新数据，而客户端则使用标准的事件监听器来接收数据。这种技术特别适用于需要实时更新数据的应用场景，如股票价格更新、实时聊天室等。

二、Spring Boot集成SSE

Spring Boot提供了SseEmitter类来支持SSE。这个类是ResponseBodyEmitter的子类，可以非常方便地集成到Spring MVC控制器中。

三、创建SSE控制器

下面是一个简单的Spring MVC控制器示例，它使用SseEmitter来周期性地发送当前时间到客户端。

@Controller
public class MyWebController {
    @RequestMapping("/sseTest")
    public ResponseBodyEmitter handleRequest() {
        final SseEmitter emitter = new SseEmitter();
        ExecutorService service = Executors.newSingleThreadExecutor();
        service.execute(() -> {
            for (int i = 0; i < 500; i++) {
                try {
                    emitter.send(LocalTime.now().toString(), MediaType.TEXT_PLAIN);
                    Thread.sleep(200);
                } catch (Exception e) {
                    e.printStackTrace();
                    emitter.completeWithError(e);
                    return;
                }
            }
            emitter.complete();
        });
        return emitter;
    }
}

四、Spring Boot启动类

创建一个Spring Boot启动类来启动整个应用。

@SpringBootApplication
public class SseExample {
    public static void main(String[] args) {
        SpringApplication.run(SseExample.class, args);
    }
}

五、客户端JavaScript实现

在客户端，我们可以使用JavaScript来接收服务器发送的事件。以下是一个简单的HTML页面，它使用JavaScript来初始化SSE连接，并接收服务器发送的消息。

<!DOCTYPE html>
<html>
<body>
<h1>Sse client</h1>
<a href="javascript:void" onclick="sendRequest()">Send Request</a>
<div id="sseDiv"></div>
<script>
function sendRequest() {
    if (typeof(EventSource) !== "undefined") {
        var source = new EventSource("/sseTest");
        source.onmessage = function(event) {
            document.getElementById("sseDiv").innerHTML += event.data + " - ";
        };
    } else {
        document.getElementById("sseDiv").innerHTML =
            "Your browser does not support server-sent events.";
    }
}
</script>
</body>
</html>