SpringBoot整合SSE技术详解

Hi 👋, I'm shy

SpringBoot整合SSE技术详解

1. 引言

在现代Web应用中,实时通信变得越来越重要。Server-Sent Events (SSE)是一种允许服务器向客户端推送数据的技术,为实现实时更新提供了一种简单而有效的方法。本文将详细介绍如何在SpringBoot中整合SSE,并探讨SSE与WebSocket的区别。

2. SSE简介

Server-Sent Events (SSE)是一种基于HTTP的服务器推送技术。它允许服务器通过HTTP连接向客户端发送事件流。SSE非常适合于单向数据传输的场景,例如实时通知、股票行情更新等。

2.1 SSE的主要特点

基于HTTP协议,无需特殊协议
单向通信(服务器到客户端)
自动重连机制
支持自定义事件
轻量级,易于实现

3. SpringBoot整合SSE

3.1 添加依赖

首先,确保你的SpringBoot项目中包含了Web依赖:

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

3.2 创建SSE控制器

import java.io.IOException;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;import org.springframework.web.bind.annotation.CrossOrigin;
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;@CrossOrigin
@RestController
@RequestMapping("sse")
public class SseController {private final ExecutorService executorService = Executors.newCachedThreadPool();@GetMapping("/handleSse")public SseEmitter handleSse() {SseEmitter emitter = new SseEmitter();executorService.execute(() -> {try {for (int i = 0; i < 10; i++) {emitter.send(SseEmitter.event().name("message").data("SSE Event #" + i));Thread.sleep(1000);}emitter.complete();} catch (IOException | InterruptedException e) {emitter.completeWithError(e);}});return emitter;}
}

这个控制器创建了一个SSE端点(/handleSse),它会发送10个事件,每个事件间隔1秒。

3.3 客户端实现

在前端,你可以使用JavaScript的EventSource API来接收SSE事件:

<!DOCTYPE html>
<html>
<body>
<h1>SSE Demo</h1>
<div id="messages"></div><script>const eventSource = new EventSource('http://localhost:8001/sse/handleSse');const messages = document.getElementById('messages');eventSource.onmessage = function(event) {const message = document.createElement('p');message.textContent = event.data;messages.appendChild(message);};eventSource.onerror = function(error) {console.error('EventSource failed:', error);eventSource.close();};
</script>
</body>
</html>