HTML5服务器发送事件

HTML5服务器发送事件使浏览器可以通过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 + "
";
  }

代码说明：

• 首先，创建新的EventSource对象，并定义发送服务器更新的页面的URI。在这里，我们已将ServerUpdate.php用于将更新发送到Web浏览器。
• 每次从服务器进行更新时，都会发生onmessage事件，并将消息print在网页上。
• 发生的消息可以使用id“输出”显示在div上。

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

首先，我们需要检查浏览器对服务器发送事件的支持。因此，要检查浏览器对服务器发送事件的支持，我们将检查EventSource对象是否为true。如果为真，则会发出警报以提示支持，否则会发出警报以提示不支持。

例：

从服务器发送事件：

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

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

ServerUpdate.php：

例：

代码说明：

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

完整的例子：

例：

   


  



Dynamic Server Updates

注意：要在浏览器上执行上述代码，需要在系统上安装服务器，然后在localhost上运行该服务器。您可以安装任何服务器，例如MYSQL，XAMPP等。

浏览器支持：

API	Chrome	IE	Firefox	Opera	Safari
SSE	6.0	Not Supported	6.0	11.5	5.0