以下是以资深软件开发工程师的视角，对“HTML5 服务器发送事件（Server-Sent Events，简称 SSE）”的专业回答。我将详细讲解 SSE 的概念、工作原理、使用方法及其应用场景，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，以 HTML5 标准为基准。
HTML5 服务器发送事件 (Server-Sent Events)
目录
1. 引言
HTML5 服务器发送事件（Server-Sent Events，SSE）是一种基于 HTTP 的服务器推送技术，允许服务器主动向客户端（如浏览器）发送实时更新。SSE 适用于单向通信场景，如新闻推送、实时价格更新等。本文将系统介绍 SSE 的定义、实现方式和用法，并通过实例展示其应用，帮助你掌握其核心知识。
2. 什么是 Server-Sent Events？
- 定义：SSE 是 HTML5 提供的一种技术，通过
EventSource接口建立持久化的 HTTP 连接，使服务器能够随时推送数据到客户端。 - 特点：
- 单向通信：服务器到客户端推送，客户端无法通过同一连接发送数据。
- 基于 HTTP：使用标准 HTTP 协议，轻量且易于实现。
- 自动重连：浏览器内置重连机制，增强可靠性。
3. SSE 的工作原理
- 连接建立：客户端通过
EventSource对象向服务器发起请求，指定一个事件流 URL。 - 数据推送：服务器保持连接打开，并以
text/event-stream格式发送数据。 - 事件处理：客户端监听事件（如
message），接收并处理服务器推送的数据。 - 重连机制：若连接断开，浏览器会自动尝试重连（默认间隔约 2 秒，可由服务器调整）。
4. SSE 的核心 API
4.1 EventSource 对象
- 作用：用于建立和维护与服务器的 SSE 连接。
- 语法：
const source = new EventSource(url, { withCredentials: false });
- 属性：
readyState：连接状态（CONNECTING = 0,OPEN = 1,CLOSED = 2）。url：事件源地址。- 方法：
close()：关闭连接。
4.2 事件类型
message：默认事件，当服务器发送数据时触发。open：连接建立时触发。error：连接失败或中断时触发。- 自定义事件：服务器可定义特定事件名，客户端通过
addEventListener监听。
5. SSE 的使用
5.1 客户端实现
- 示例：监听服务器推送的时间更新
<script>
if (typeof EventSource !== "undefined") {
const source = new EventSource("server.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
source.onerror = function() {
console.log("连接错误");
};
} else {
alert("浏览器不支持 SSE");
}
</script>
<div id="result"></div>
5.2 服务器端实现
- 要求：
- 设置
Content-Type: text/event-stream。 - 数据格式以
data:开头，每条消息以双换行符\n\n分隔。 - 示例（PHP）：推送当前时间
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
while (true) {
echo "data: " . date("Y-m-d H:i:s") . "\n\n";
flush(); // 立即发送数据
sleep(2); // 每 2 秒推送一次
}
?>
6. 实例：SSE 应用
以下是一个完整的实时更新示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE 示例</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; text-align: center; }
#updates { padding: 10px; background: #f0f0f0; min-height: 100px; }
</style>
</head>
<body>
<h1>实时服务器更新</h1>
<div id="updates"></div>
<script>
if (typeof EventSource !== "undefined") {
const source = new EventSource("updates.php");
source.onopen = () => console.log("连接已建立");
source.onmessage = (event) => {
document.getElementById("updates").innerHTML += event.data + "<br>";
};
source.onerror = () => console.log("连接中断，将尝试重连...");
// 可手动关闭连接
// setTimeout(() => source.close(), 10000);
} else {
document.getElementById("updates").innerHTML = "浏览器不支持 SSE";
}
</script>
</body>
</html>
- 服务器端（updates.php）：
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
$count = 0;
while ($count < 5) {
$time = date("Y-m-d H:i:s");
echo "data: 当前时间: $time\n\n";
flush();
sleep(1);
$count++;
}
?>
- 运行方法：将文件保存到支持 PHP 的服务器（如 localhost），访问 HTML 文件。
- 效果：每秒显示一次服务器时间，共 5 次。
7. 最佳实践与注意事项
- 浏览器支持：Chrome、Firefox、Safari、Edge 支持良好，IE 不支持（需 polyfill）。
- 连接管理：
- 使用
retry:设置重连间隔（如retry: 5000表示 5 秒）。 - 监听
error事件处理断连。 - 性能优化：
- 避免频繁推送大数据，建议使用 JSON 格式压缩数据。
- 添加心跳机制（如定期发送空数据）防止超时。
- 安全性：
- 使用 HTTPS 确保数据安全。
- 设置
Access-Control-Allow-Origin支持跨域请求。 - 替代方案：若需双向通信，可考虑 WebSocket。
8. 结论
HTML5 Server-Sent Events 提供了一种简单高效的服务器推送方案，适用于实时单向数据更新的场景，如股票价格、通知推送等。本文介绍了 SSE 的原理和实现方法，并通过实例展示了其应用。如需更多动态功能，可参考 HTML 脚本 或访问 W3C 文档（w3.org）。
回答特点
- 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
- 实用性：从概念到应用，覆盖 SSE 核心知识。
- 内部链接：通过
<a href="#ID">跳转，如 SSE 的使用。 - 出站链接：嵌入正文，指向权威资源。
如何运行示例
- 将代码保存为
.html和.php文件，部署到支持 PHP 的服务器（如 XAMPP），访问 HTML 文件即可体验。
发表回复