当前位置：首页 > news >正文

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

news 来源：原创 2025/9/17 14:36:00

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 连接。
语法：

1	`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 文件即可体验。

https://www.52kanjuqing.com/2025/02/11/html5-%e6%9c%8d%e5%8a%a1%e5%99%a8%e5%8f%91%e9%80%81%e4%ba%8b%e4%bb%b6server-sent-events/

1. 引言

2. 什么是 Server-Sent Events？

3. SSE 的工作原理

4. SSE 的核心 API

4.1 EventSource 对象

4.2 事件类型

5. SSE 的使用

5.1 客户端实现

5.2 服务器端实现

6. 实例：SSE 应用

7. 最佳实践与注意事项

8. 结论

回答特点

如何运行示例

相关文章：