在本教程中，你将学习如何使用HTML5服务器发送的时间server-sent events特性，在web页面和服务器之间创建单向和持久的连接。

什么是服务器发送的事件？

HTML5 server-sent event是web页面与web服务器通信的一种新方式。也可以使用XMLHttpRequest对象让JavaScript代码向web服务器发出请求，但这是一对一的交换—这意味着一旦web服务器提供了响应，通信就结束了，XMLHttpRequest对象是所有Ajax操作的核心。

但是，在某些情况下，web页面需要与web服务器进行长期连接。一个典型的例子是财经网站上的股价自动更新，另一个例子是在各种媒体网站上运行的新闻标签。

你可以使用HTML5服务器发送的事件来创建这些内容。它允许web页面保持到web服务器的开放连接，这样web服务器可以在任何时候自动发送新的响应，不需要重新连接，并且从头开始反复运行相同的服务器脚本。

注意：服务器发送的事件(SSE)是单向的，这意味着数据是按一个方向从服务器发送到客户机的。客户机通常是web浏览器。

提示：HTML5的服务器发送事件功能在所有主要的现代web浏览器中都是受支持的，如Firefox、Chrome、Safari和Opera

(Internet Explorer除外)。

使用服务器脚本发送消息

让我们创建一个名为“server_time”的PHP文件。并在其中输入以下脚本，它将定期报告web服务器内置时钟的当前时间，我们将在本教程的后面部分检索并相应地更新web页面。

header("Content-Type: text/event-stream");

header("Cache-Control: no-cache");

// 获取服务器上的当前时间

$currentTime = date("h:i:s", time());

// 发送一个消息

echo "data: " . $currentTime . "\n\n";

flush();

?>

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

通过HTML5

server-sent events发送的每个消息都必须以文本数据开始：后面是实际的消息文本和新行字符序列(\n\n)。

最后，我们使用了PHP

flush()函数来确保立即发送数据，而不是在PHP代码完成之前进行缓冲。

处理网页中的消息

EventSource对象用于接收服务器发送的事件消息。

现在让我们创建一个名为“demo_sse”的HTML文档，并将其放在“server_time”所在的项目目录中“server_time.php”文件被定位，此HTML文档只是接收web服务器报告的当前时间并将其显示给用户。

使用服务器发送的事件

window.onload = function() {

var source = new EventSource("server_time.php");

source.onmessage = function(event) {

document.getElementById("result").innerHTML += "从web服务器接收到的新时间: " + event.data + "
";

};

};