HTML5 服务器发送的事件
在本教程中，您将学习如何使用 HTML5 服务器发送事件功能在网页和服务器之间创建单向且持久的连接。
什么是服务器发送事件？
HTML5 服务器发送事件是网页与 Web 服务器通信的一种新方式。 也可以使用 XMLHttpRequest 对象，让您的 JavaScript 代码向 Web 服务器发出请求，但它是一对一的交换 — 这意味着一旦 Web 服务器提供响应，通信就结束了。 XMLHttpRequest 对象是所有 Ajax 操作的核心。
但是，在某些情况下，网页需要与 Web 服务器进行长期连接。 一个典型的例子是金融网站上的股票报价，价格会自动更新。 另一个例子是在各种媒体网站上运行的新闻自动收报机。
您可以使用 HTML5 服务器发送的事件来创建此类内容。 它允许网页保持与 Web 服务器的开放连接，以便 Web 服务器可以随时自动发送新的响应，无需重新连接，并一遍又一遍地从头开始运行相同的服务器脚本。
注意： 服务器发送的事件 (SSE) 是单向的，这意味着数据从服务器向客户端传递一个方向。 客户端通常是 Web 浏览器。
提示： 除了 Internet Explorer 之外，所有主要的现代网络浏览器（如 Firefox、Chrome、Safari 和 Opera）都支持 HTML5 的服务器发送事件功能。
使用服务器脚本发送消息
让我们创建一个名为"server_time.asp"的 PHP 文件，并在其中键入以下脚本。 它只会定期报告 Web 服务器内置时钟的当前时间。 我们将在本教程后面部分检索此时间并相应地更新网页。
示例
Download<?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 服务器发送事件发送的每条消息都必须以文本 data: 开头，后跟实际消息文本和换行符序列 (\n\n)。
最后，我们使用了 PHP flush() 函数来确保立即发送数据，而不是在 PHP 代码完成之前进行缓冲。
处理网页中的消息
EventSource 对象用于接收服务器发送的事件消息。
现在让我们创建一个名为"demo_sse.html"的 HTML 文档，并将其放在"server_time.asp"文件所在的同一项目目录中。 该 HTML 文档仅接收 Web 服务器报告的当前时间并将其显示给用户。
示例
Download<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Server-Sent Events</title>
<script>
window.onload = function() {
var source = new EventSource("server_time.asp");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="result">
<!--服务器响应将插入此处-->
</div>
</body>
</html>