HTML5 服务器发送事件

2025 年 3 月 25 日 | 阅读 3 分钟

HTML5 服务器发送事件（Server-Sent Events）允许浏览器通过 HTTP 连接从服务器接收自动更新和数据。

什么是服务器发送事件？

当我们执行某个事件并将其发送到服务器时，例如提交表单到服务器。那么从 Web 浏览器流向 Web 服务器的这类事件称为客户端事件。但如果服务器向浏览器发送了一些更新或信息，则这些事件称为服务器发送事件。因此，当浏览器自动从服务器更新时，就会发生服务器发送事件。

服务器发送事件是单向的（始终从服务器到客户端）。或者也可以称为单向消息传递。

从服务器接收事件

服务器发送事件使用 EventSource 对象从服务器接收事件。它指定了生成事件的脚本的 URI。

示例

if(typeof(EventSource) !== "undefined") {
   var source = new EventSource("ServerUpdate.php");
  source.onmessage = function(event) {
    document.getElementById("output").innerHTML += event.data + "<br>";
  }

代码解释

首先，创建新的 EventSource 对象，并定义发送服务器更新的页面的 URI。这里我们以 ServerUpdate.php 作为向 Web 浏览器发送更新。
每次服务器发生更新时，都会触发 onmessage 事件并在网页上打印消息。
可以使用 id 为“output”的 div 来显示发生的事件消息。

检查浏览器对服务器发送事件的支持情况

首先，我们需要检查浏览器对服务器发送事件的支持情况。要检查浏览器对服务器发送事件的支持情况，我们会检查 EventSource 对象是否为 true。如果为 true，则会弹出支持的提示，否则会弹出不支持的提示。

示例

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 SSE API</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
   
   if(typeof(EventSource)!=="undefined"){
       alert("Hey! Your browser is supporting.");
    }
   else{
    alert("Sorry! Your browser is not supporting."); 
   }
 </script>
</body>
</html>

从服务器发送事件

要使用服务器发送事件，我们需要一个能够向 Web 浏览器发送数据更新的服务器。为此，我们需要使用 ASP、PHP 或任何动态语言创建一个文件。

以下是显示服务器更新的示例

ServerUpdate.php

示例

 <?php
  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');
//Get the current time of server
   $time = date('r');
  echo "data: The Current Server time is: {$time}\n\n";
  flush();
  ?>

代码解释

在代码的第一行，我们将“Content-type”标头设置为“text/event-stream”。这是服务器端事件标准所必需的。
第二行指示服务器关闭缓存，否则服务器更新可能会被缓存。
echo "data: The Current Server time is: {$time}\n\n"; 它创建要发送的数据的输出，并且必须始终以 data: 开头。
然后，我们使用了 flush() 方法，该方法确保数据立即发送到网页。

完整示例

示例

   <!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    div{
      text-align: center;
      background-color: #98f5ff;
    }
  </style>
</head>
<body>

<h1 align="center">Dynamic Server Updates</h1>
<div id="output"></div>
<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("ServerUpdate.php");
  source.onmessage = function(event) {
    document.getElementById("output").innerHTML += event.data + "<br>";
  }
} else {
  alert("Sorry, your browser does not support the server sent updates");}
</script>
</body>
</html>