html5服务器发送的事件server-sent event – HTML5教程 html5服务器发送的事件|HTML

【html5服务器发送的事件server-sent event – HTML5教程】上一章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>