原创 编程疏影 路条编程 2024年07月14日 08:00 北京
一、引言
在当今的互联网应用中,实时消息推送成为了提升用户体验和增强系统交互性的关键技术。本文将深入探讨如何使用 Spring Boot 结合 Server-Sent Events(SSE)来实现实时消息推送功能,包括 SSE 的实现原理、特点、应用场景,并通过详细的前后端代码示例进行展示。
二、SSE 实现原理
SSE 基于 HTTP 协议,客户端向服务器发起一个请求,服务器保持该连接打开。当有新的消息产生时,服务器通过这个连接将消息以特定的格式推送给客户端。SSE 利用了 HTTP 协议的流特性,通过设置特定的响应头,如Content-Type: text/event-stream,来标识这是一个 SSE 连接。服务器推送的消息以特定的格式组织,每行以data:开头表示数据内容。
三、SSE 特点
单向通信:SSE 是服务器向客户端的单向推送,客户端无法主动向服务器发送数据。
轻量级:相较于 WebSocket 等技术,SSE 的实现相对简单,开销较小。
基于 HTTP:利用现有的 HTTP 基础设施,易于部署和集成。
跨平台支持:大多数现代浏览器都支持 SSE,具有较好的兼容性。
四、SSE 应用场景
实时通知:如邮件到达通知、系统告警等。
数据实时更新:股票行情、天气预报等数据的实时推送。
日志实时监控:将服务器端的日志实时推送到前端展示。
五、后端代码实现(Spring Boot)
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.util.concurrent.atomic.AtomicInteger;
@RestController
public class SseController {
private AtomicInteger counter = new AtomicInteger(0);
@GetMapping(value = ”/stream“, produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter streamMessages() {
SseEmitter emitter = new SseEmitter();
new Thread(() -> {
try {
while (true) {
String message = ”消息 “ + counter.incrementAndGet();
// send(SseEvent event) 示例
SseEvent event = new SseEventBuilder()
.data(message)
.name(”customEvent“)
.build();
emitter.send(event);
// send(Object data) 示例
emitter.send(message);
Thread.sleep(5000);
}
} catch (Exception e) {
emitter.completeWithError(e);
}
}).start();
// complete() 示例
emitter.onCompletion(() -> {
System.out.println(”连接正常完成“);
});
// timeout(long timeoutMillis) 示例
emitter.timeout(10000);
// onTimeout(Runnable callback) 示例
emitter.onTimeout(() -> {
System.out.println(”连接超时“);
});
// onError(ErrorCallback callback) 示例
emitter.onError((Throwable t) -> {
System.out.println(”发生错误: “ + t.getMessage());
});
return emitter;
}
}
在上述后端代码中,定义了一个/stream的接口。创建了SseEmitter对象,并在新的线程中每隔 5 秒发送一条消息。
六、前端代码实现(HTML + JavaScript)
<!DOCTYPE html>
<html lang=”en“>
<head>
<meta charset=”UTF-8“>
<meta http-equiv=”X-UA-Compatible“ content=”IE=edge“>
<meta name=”viewport“ content=”width=device-width, initial-scale=1.0“>
<title>SSE 实时消息推送示例</title>
</head>
<body>
<script>
// 创建 EventSource 对象连接后端
var source = new EventSource(’/stream‘);
// 处理接收到的消息
source.onmessage = function (event) {
console.log(event.data);
var div = document.createElement(’div‘);
div.innerHTML = event.data;
document.body.appendChild(div);
};
// 处理连接错误
source.onerror = function (error) {
console.error(’SSE 连接错误:‘, error);
};
</script>
</body>
</html>
前端通过创建EventSource对象与后端的/stream接口建立连接,并处理接收到的消息和连接错误。
七、总结
通过上述的前后端代码示例,我们成功地实现了基于 Spring Boot 和 SSE 的实时消息推送功能。SSE 在一些特定场景下具有独特的优势,能够为应用提供高效、轻量级的实时数据推送解决方案。
希望本文能够帮助您深入理解并成功运用 SSE 实现实时消息推送。
消息推送1