SpringBoot整合SSE技术详解

news2024/9/22 23:35:02

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>