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

时间: 2023-06-09

HTML5服务器发送事件（Server-Sent Events）是一种通过HTTP连接使Web浏览器能够接收来自服务器的自动更新和数据的技术。它实现了从服务器到客户端的单向消息传递。

要使用SSE从服务器接收事件，可以在JavaScript中使用EventSource对象。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>服务器发送事件示例</title>
</head>
<body>
  <h2>服务器发送事件示例</h2>
  <div id="output"></div>

  <script type="text/javascript">
    if (typeof(EventSource) !== "undefined") {
      var source = new EventSource("ServerUpdate.php");
      source.onmessage = function(event) {
        document.getElementById("output").innerHTML += event.data + "<br>";
      };
    } else {
      alert("抱歉，您的浏览器不支持服务器发送事件。");
    }
  </script>
</body>
</html>

在上面的示例中，使用URL "ServerUpdate.php"创建了EventSource对象。每当服务器发送更新时，onmessage事件被触发，接收到的数据被追加到output div 中。

要从服务器发送事件，您需要创建一个服务器端脚本，如PHP或ASP。以下是一个使用PHP的示例：

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

$time = date('r');
echo "data: 当前服务器时间为: {$time}\n\n";
flush();
?>

在上面的示例中，代码的第一行设置了Content-Type标头为text/event-stream，这是服务器端事件标准所需的。第二行指示服务器关闭缓存，以防止服务器更新被缓存。接下来使用echo语句创建要发送的数据输出，它必须以data:开头。最后，使用flush()方法确保数据立即发送到网页。

完整的示例代码可用于从服务器接收并显示更新的数据。

请注意，要在浏览器上执行上述代码，您需要在您的系统上安装一个服务器，并在本地主机上运行。您可以安装任何服务器，如MySQL、XAMPP等。

浏览器支持如下：

API	Chrome	IE	Firefox	Opera	Safari
SSE	6.0	不支持	6.0	11.5	5.0

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

推荐文章

其它