HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件 (Server-Sent Events, SSE) 中文讲解

关键要点

研究表明，HTML5 服务器发送事件（Server-Sent Events, SSE）是一种基于 HTTP 协议的单向通信技术，允许服务器向浏览器推送实时数据。
证据显示，SSE 使用 EventSource API，适合实时更新场景，如股票价格、通知或实时日志。
它似乎在现代浏览器（如 Chrome、Firefox、Safari、Edge）中支持良好，但 Internet Explorer 不支持。
研究建议，SSE 是 WebSocket 的轻量级替代方案，适合简单、单向的数据推送，但不支持双向通信。

概述

服务器发送事件（Server-Sent Events, SSE）是 HTML5 引入的一项技术，允许服务器通过 HTTP 协议向浏览器推送实时更新。SSE 基于标准的 HTTP 协议，使用 text/event-stream MIME 类型，客户端通过 EventSource API 接收数据。相比 WebSocket，SSE 更轻量，适合单向、服务器到客户端的实时数据传输场景，例如实时通知、新闻提要或实时监控。

SSE 的核心特性

单向通信：服务器主动推送数据到客户端，客户端无法通过同一连接发送数据。
基于 HTTP：使用标准的 HTTP 协议，易于实现和调试。
事件流格式：数据以 text/event-stream 格式传输，支持事件名称、ID 和数据字段。
自动重连：SSE 内置重连机制，客户端会在连接断开后自动尝试重新连接。
轻量级：相比 WebSocket，SSE 协议简单，适合低频率、单向数据推送。

使用方法与示例

SSE 的实现分为客户端和服务器端两部分。以下是一个完整的示例：

1. 客户端代码（`index.html`）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SSE 示例</title>
</head>
<body>
    <h1>服务器发送事件示例</h1>
    <div id="output"></div>
    <script>
        if (typeof(EventSource) !== "undefined") {
            // 创建 EventSource 对象，连接服务器
            const source = new EventSource("events.php");

            // 监听消息
            source.onmessage = function(event) {
                document.getElementById("output").innerHTML += `<p>收到消息: ${event.data}</p>`;
            };

            // 监听自定义事件
            source.addEventListener("customEvent", function(event) {
                document.getElementById("output").innerHTML += `<p>自定义事件: ${event.data}</p>`;
            });

            // 监听错误
            source.onerror = function() {
                document.getElementById("output").innerHTML += "<p>连接错误，尝试重连...</p>";
            };

            // 监听连接打开
            source.onopen = function() {
                document.getElementById("output").innerHTML += "<p>连接已打开</p>";
            };
        } else {
            document.getElementById("output").innerHTML = "浏览器不支持 SSE";
        }
    </script>
</body>
</html>

2. 服务器端代码（`events.php`，使用 PHP）

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

// 设置事件流格式
function sendEvent($data, $event = null, $id = null) {
    if ($event) {
        echo "event: $event\n";
    }
    if ($id) {
        echo "id: $id\n";
    }
    echo "data: $data\n\n";
    ob_flush();
    flush();
}

// 循环发送数据
while (true) {
    sendEvent("当前时间: " . date("Y-m-d H:i:s"));
    sendEvent("自定义消息", "customEvent", 1);
    sleep(2); // 每2秒发送一次
}
?>

说明：
客户端通过 new EventSource("events.php") 建立与服务器的连接。
服务器设置 Content-Type: text/event-stream 和 Cache-Control: no-cache。
服务器使用 data:、event: 和 id: 字段发送事件流，客户端通过 onmessage 或 addEventListener 接收。
SSE 支持自动重连，onerror 事件处理连接断开。

3. 事件流格式

SSE 数据以 text/event-stream 格式传输，包含以下字段：

data：事件的数据内容，换行符分隔多行。
event：事件名称，用于自定义事件。
id：事件 ID，用于重连时的断点续传。
retry：指定重连时间（毫秒）。

示例事件流：

event: customEvent
id: 1
data: 这是一个自定义事件
data: 多行数据示例

data: 默认事件数据

浏览器支持

SSE 在现代浏览器中支持良好，具体如下：

浏览器	支持情况	备注
Chrome	支持（6.0+）	基于标准实现
Firefox	支持（6.0+）	推荐使用最新版本
Safari	支持（5.0+）	iOS 和 macOS 支持一致
Opera	支持（11.0+）	推荐使用最新版本
Edge	支持（12.0+）	基于 Chromium 的 Edge 支持良好
Internet Explorer	不支持	可使用 Polyfills（如 EventSource.js）

注意：IE 和早期 Edge 不支持 SSE，需使用 Polyfills 或 WebSocket 作为回退。
HTTPS 要求：部分浏览器可能要求 HTTPS 环境以确保安全。
移动设备：移动浏览器支持良好，但需注意网络稳定性。

特性与优缺点

特性：

基于 HTTP 协议，简单易用。
支持自动重连，内置 retry 机制。
支持自定义事件和断点续传。
数据格式轻量，适合单向推送。

优点：

实现简单，服务器端只需支持 HTTP。
内置重连机制，适合实时更新场景。
相比 WebSocket，资源占用较低。
支持标准 HTTP 代理和防火墙。

缺点：

单向通信，不支持客户端到服务器的数据推送。
不适合高频率或双向通信场景（如聊天应用）。
IE 不支持，需 Polyfills。
连接数受浏览器限制（通常 6 个并发连接）。

与 WebSocket 的对比

特性	SSE	WebSocket
通信方向	单向（服务器到客户端）	双向
协议	HTTP	WebSocket
实现复杂度	简单	较复杂
浏览器支持	除 IE 外广泛支持	广泛支持
适用场景	实时通知、日志推送	聊天、实时游戏
资源占用	较低	较高

SSE：适合单向、轻量级数据推送，如新闻提要或股票价格。
WebSocket：适合双向、高频率通信，如聊天或协作工具。

安全与注意事项

XSS 风险：SSE 数据来自服务器，需确保服务器端数据过滤，防止注入恶意脚本。
CORS：SSE 受同源策略限制，跨域需设置 Access-Control-Allow-Origin 头。
连接管理：浏览器可能限制并发连接数，需合理管理。
隐私合规：遵守隐私法规（如 GDPR），告知用户实时数据的使用方式。

最佳实践

错误处理：使用 onerror 事件监控连接状态，提示用户断开或重连。
回退机制：为不支持 SSE 的浏览器（如 IE）提供 WebSocket 或轮询（polling）回退。
优化性能：设置合理的 retry 时间，避免频繁重连。
调试：使用浏览器开发者工具检查 SSE 事件流。

应用场景

实时通知：如社交媒体消息或系统警报。
数据监控：如服务器日志、股票价格或传感器数据。
新闻提要：实时更新新闻或博客内容。
状态更新：如订单状态或任务进度。

学习资源

以下是推荐的中文学习资源：

结论

HTML5 服务器发送事件（SSE）是一种轻量级、基于 HTTP 的技术，适合服务器向客户端推送实时数据。它实现简单，支持自动重连，适用于实时通知、数据监控等场景。尽管不支持双向通信且不兼容 IE，SSE 仍是 WebSocket 的有效替代方案。开发者需注意安全性和浏览器兼容性，并结合推荐的学习资源快速掌握 SSE 的用法。迁移到 Service Workers 或 WebSocket 可进一步增强功能。

以上内容基于 2025 年 7 月 27 日的网络资源和教程，力求全面且专业，供用户参考。