HTML5 服务器发送事件

Created: October-16, 2018

HTML5 服务器发送的事件允许网页自动从 Web 服务器获取信息。

什么是服务器发送的事件

HTML5 服务器发送事件是网页与 Web 服务器通信的新方式。XMLHttpRequest 对象也可以让你的 JavaScript 代码向 Web 服务器发出请求。但它是一对一的交换 - 这意味着一旦 Web 服务器提供其响应，通信就结束了。

但是，在某些情况下，网页需要与 Web 服务器建立长期连接。一个典型的例子是金融网站上的股票报价，其中价格自动更新。另一个例子是在各种媒体网站上运行的新闻自动收报机。

你可以使用 HTML5 服务器发送的事件功能创建此类效果。它允许网页保持与 Web 服务器的开放连接，以便 Web 服务器可以随时自动发送新响应，并且无需重新连接，并且一遍又一遍地从头开始运行相同的服务器脚本。

提示： 除了 Internet Explorer 之外，所有主要的现代浏览器（如 Firefox，Chrome，Safari 和 Opera）都支持 HTML5 的服务器发送事件功能。

使用服务器脚本发送消息

让我们创建一个名为’server_time.php’的 PHP 文件，并在其中键入以下脚本。它将定期报告 Web 服务器内置时钟的当前时间。稍后我们将收到此时间并相应地更新网页。

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Get the current time on server
$currentTime = date("h:i:s", time());
 
// Send it in a message
echo "data: " . $currentTime . "\n\n";
flush();
?>

PHP 脚本的前两行设置了两个重要的标题。首先，它将 MIME 类型设置为 text/event-stream，这是服务器端事件标准所必需的。第二行告诉 Web 服务器关闭缓存，否则可能会缓存脚本的输出。

通过 HTML5 服务器发送的事件发送的每条消息都必须以文本 data: 开头，后跟实际的消息文本和新的行字符序列（\n\n）。

最后，我们使用 PHP flush() 函数确保数据立即发送，而不是缓冲直到 PHP 代码完成。

处理网页中的消息

EventSource 对象用于接收服务器发送的事件消息。让我们创建一个名为’demo_sse.html’的 HTML 文档，并将其放在’server_time.php’文件所在的同一项目目录中。此 HTML 文档只接收 Web 服务器报告的当前时间并将其显示给用户。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Server-Sent Events</title>
<script type="text/javascript">
    window.onload = function(){
        var source = new EventSource("server_time.php");
        source.onmessage = function(event){
            document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
        };
    };
</script>
</head>
<body>
    <div id="result">
        <!--Server response will be inserted here-->
    </div>
</body>
</html>