srcmini上一章HTML5教程请查看：html5 Web worker用法
在本教程中，你将学习如何使用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页面。
<?php
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服务器报告的当前时间并将其显示给用户。
<!DOCTYPE html>
<html lang="zh_CH">
<head>
<title>使用服务器发送的事件</title>
<script>
window.onload = function() {
var source = new EventSource("server_time.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += "从web服务器接收到的新时间: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="result">
<!--服务器响应将插入这里-->
</div>
</body>
</html>
评论前必须登录！
注册