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

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

news 来源：原创 2025/5/11 5:29:27

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 客户端实现

  • 示例：监听服务器推送的时间更新

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<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）：推送当前时间

1

2

3

4

5

6

7

8

9

10

<?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 应用

以下是一个完整的实时更新示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!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）：

1

2

3

4

5

6

7

8

9

10

11

12

13

<?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/

相关文章：

  • YOLOv11改进——注意力机制优化 | 引入SpatialGroupEnhance空间分组增强模块
  • WebGIS 学习路线分享
  • 第二期：[特殊字符] 深入理解MyBatis[特殊字符]MyBatis基础CRUD操作详解[特殊字符]
  • （二十三）安卓开发中数据存储之Room详解
  • 【iOS】UIPageViewController学习
  • 全局前置守卫与购物车页面鉴权
  • upload-labs二次打
  • 深度学习参数设置指南
  • LRU java 实现方式
  • 计算机组成原理(哈工大，会持续更新)
  • Zookeeper的典型应用场景?
  • MFC案例：利用CFileDialog类选择多个文件的实验
  • Themeleaf复用功能
  • Google A2A协议解析：构建分布式异构多Agent系统
  • 深入了解 UI 咨询公司：数字化时代的品牌助推器
  • 游戏引擎学习第222天
  • 【文献分享】因果推断经验研究中的中介效应与调节效应
  • [题解] Educational Codeforces Round 168 (Rated for Div. 2) E - level up
  • pycharm已有python3.7，如何新增Run Configurations中的Python interpreter为python 3.9
  • 【Linux篇】深入理解文件系统：从基础概念到 ext2 文件系统的应用与解析
  • “苏河超级管”调研：桥下公园“留白”很好，指引差点
  • “降息潮”延续！存款利率全面迈向“1时代”
  • 老铺黄金拟配售募资近27亿港元，用于门店拓展扩建及补充流动资金等
  • “救护车”转运病人半路加价，从宝鸡到西安往返都要多收钱
  • 美联储宣布维持联邦基金利率目标区间不变
  • 农行原首席专家兼浙江省分行原行长冯建龙主动投案，正接受审查调查