深入浅出 Server-Sent Events (SSE) 技术

深入浅出 Server-Sent Events (SSE) 技术

随着实时 Web 应用需求的增长，传统的 HTTP 请求响应模式已不能完全满足需求。Server-Sent Events (SSE) 提供了一种简单、高效的方式，使服务器可以向客户端推送实时数据。本文将全面介绍 SSE 的工作原理、使用场景、与其他技术的对比，以及如何在实际项目中应用。

---

什么是 Server-Sent Events (SSE)

Server-Sent Events 是一种基于 HTTP 协议的服务器推送技术，允许服务器通过单向的方式向客户端发送实时更新的数据流。SSE 是 HTML5 的一部分，支持原生的浏览器事件流监听机制，使用简单且高效。

工作原理

• 单向通信：服务器主动向客户端发送消息，客户端只能接收而不能向服务器发送。
• 持久连接：客户端通过 EventSource 与服务器建立长连接，服务器保持连接并持续推送数据。
• 文本流格式：SSE 传输的数据是基于纯文本的事件流格式，包含事件名称、数据、ID 等。

浏览器支持

SSE 原生支持绝大多数现代浏览器，但在 IE 和部分老旧浏览器中不支持，需要使用 polyfill 或其他技术替代。

---

SSE 的优势

1. 简单易用：使用原生 API，无需额外引入复杂的库或协议解析。
2. 实时推送：适用于实时性要求较高的应用场景，例如股票行情、新闻更新、游戏动态等。
3. 轻量级：基于文本流，开销较低，适合对资源要求较低的实时应用。
4. 自动重连：浏览器原生支持断线后的自动重连功能，增强了系统的稳定性。
5. 带状态更新：通过事件 ID，客户端可以恢复到断线前的状态，避免数据丢失。

---

SSE 的使用场景

• 实时数据更新：如股票、天气、社交媒体动态等。
• 消息通知：如邮件提醒、任务进度更新等。
• 轻量级监控：如服务健康状态、服务器性能指标的实时监控。
• 实时日志流：如开发调试中的日志推送或审计日志流。

---

实现 SSE 的基础步骤

客户端实现

SSE 的客户端实现非常简单，可以通过 JavaScript 的 EventSource 接口进行操作。

const eventSource = new EventSource('/sse-endpoint');

// 监听默认消息
eventSource.onmessage = (event) => {
    console.log('Received message:', event.data);
};

// 监听特定事件类型
eventSource.addEventListener('customEvent', (event) => {
    console.log('Received customEvent:', event.data);
});

// 处理连接错误
eventSource.onerror = () => {
    console.log('Connection error, attempting to reconnect...');
};

服务器端实现

以 Node.js 为例，服务器端可以通过 Content-Type: text/event-stream 来声明 SSE 数据流，并发送事件。

const http = require('http');

http.createServer((req, res) => {
    if (req.url === '/sse-endpoint') {
        res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive',
        });

        const sendEvent = (data) => {
            res.write(`data: ${JSON.stringify(data)}\n\n`);
        };

        // 定时发送数据
        const interval = setInterval(() => {
            sendEvent({ timestamp: Date.now(), message: 'Hello, SSE!' });
        }, 1000);

        // 清理资源
        req.on('close', () => {
            clearInterval(interval);
        });
    }
}).listen(3000, () => console.log('Server running on http://localhost:3000'));

在 Java 中实现 Server-Sent Events (SSE)

Java 中可以通过 Servlet 或 Spring Boot 来实现 SSE。以下是分别使用这两种方式的实现示例：

---

使用 Servlet 实现 SSE

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/sse-endpoint")
public class SseServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置响应头
        resp.setContentType("text/event-stream");
        resp.setCharacterEncoding("UTF-8");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setHeader("Connection", "keep-alive");

        // 获取输出流
        var writer = resp.getWriter();

        try {
            for (int i = 0; i < 10; i++) {
                // 构造 SSE 格式的数据
                writer.write("data: " + "Hello, SSE! Count: " + i + "\n\n");
                writer.flush();
                Thread.sleep(1000); // 模拟数据生成延迟
            }
        } catch (InterruptedException e) {
            Thread.currentThread().interrupt();
        } finally {
            writer.close(); // 关闭流
        }
    }
}

访问 /sse-endpoint 后，客户端将持续接收到推送的消息。

---

使用 Spring Boot 实现 SSE

Spring Boot 提供了对 SSE 的原生支持，可以通过 @RestController 和 ResponseBody 的组合实现。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.http.MediaType;
import reactor.core.publisher.Flux;
import java.time.Duration;

@RestController
public class SseController {

    @GetMapping(value = "/sse-endpoint", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<String> streamEvents() {
        // 每隔 1 秒推送一条数据
        return Flux.interval(Duration.ofSeconds(1))
                .map(sequence -> "data: Hello, SSE! Sequence: " + sequence + "\n\n");
    }
}

关键点说明：

• Flux：来自 Spring WebFlux 的反应式流，用于生成事件流。
• MediaType.TEXT_EVENT_STREAM_VALUE：设置响应的 Content-Type 为 text/event-stream。
• Duration.ofSeconds(1)：设置事件生成的间隔时间。

启动 Spring Boot 应用后，访问 /sse-endpoint 即可实时接收事件流。

无论是 Servlet 还是 Spring Boot，都可以轻松实现 SSE。在现代应用中，建议使用 Spring Boot 的方式，得益于其简洁的编程模型和对响应式编程的支持。而 Servlet 实现则适合轻量级的传统 Java Web 应用。

---

SSE 与其他实时技术的对比

特性	Server-Sent Events	WebSocket	长轮询
通信模式	单向	双向	单向
实现复杂度	简单	较复杂	简单
数据格式	文本	二进制或文本	任意
浏览器支持	广泛	广泛	广泛
连接开销	低	高	高
适用场景	实时数据推送	交互式实时通信（如聊天）	简单实时更新

选择建议

• 如果需要双向通信，选择 WebSocket。
• 如果需要简单的实时数据流，选择 SSE。
• 如果不支持持久连接或需要兼容性，选择长轮询。

---

SSE 的局限性

1. 单向通信：SSE 仅支持服务器向客户端推送数据，不能实现双向通信。
2. 基于 HTTP/1.1：SSE 不能利用 HTTP/2 的多路复用特性，相较 WebSocket 效率稍低。
3. 跨域限制：SSE 的跨域请求需要通过 CORS 配置支持。
4. 文件传输不佳：SSE 不适合大文件或二进制数据的传输。

---

总结

Server-Sent Events 是一种轻量级、易用的实时数据推送技术，适合单向实时数据的传输。通过简单的实现步骤和低成本的维护，它在很多场景中成为 WebSocket 的良好替代方案。尽管存在局限性，但在实际项目中，合理地结合 SSE 和其他技术，可以极大提升应用的实时性能和用户体验。

如果您需要实现实时功能，不妨试试 SSE。