HTML5 – Web 服务器分派事件
传统的 Web 应用程序生成事件并向 Web 服务器分派事件。例如,单击链接会从服务器请求新页面。
流动从 Web 浏览器到 Web 服务器的事件类型可以称为客户端发送事件。
随着 HTML5, WHATWG 的 Web 应用程序 1.0 引入了从 Web 服务器流向 Web 浏览器的事件,称为 Server-Sent Events(SSE)。使用 SSE,您可以将 DOM 事件持续地从您的 Web 服务器推送到访问者的浏览器。
事件流方法打开了到服务器的持久连接,在新信息可用时向客户端发送数据,消除了持续轮询的需要。
Server-sent events 标准化了我们如何从服务器流式传输数据到客户端。
用于 SSE 的 Web 应用程序
要在 Web 应用程序中使用 Server-Sent Events,您需要将 <eventsource>
元素添加到文档中。
<eventsource>
元素的 src 属性应指向一个 URL,该 URL 应提供一个持久的 HTTP 连接,该连接发送包含事件的数据流。
URL 将指向一个 PHP、PERL 或任何 Python 脚本,该脚本将负责连续发送事件数据。以下是一个期望服务器时间的 Web 应用程序的简单示例。
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* 在这里定义事件处理逻辑 */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>
用于 SSE 的服务器端脚本
服务器端脚本应发送 Content-Type 标头,指定类型 text/event-stream 如下。
print "Content-Type: text/event-stream\n\n";
设置 Content-Type 后,服务器端脚本将发送一个 Event :标签,后跟事件名称。以下示例将发送 Server-Time 作为事件名称,由换行符字符终止。
print "Event: server-time\n";
最后一步是使用 Data :标签发送事件数据,该标签将由整数或字符串值后跟的换行符字符终止,如下所示 –
$time = localtime();
print "Data: $time\n";
最后,以下是完整的用 Perl 编写的 ticker.cgi-
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
time = localtime(); print "Data:time\n";
sleep(5);
}
处理 Server-Sent Events
修改 Web 应用程序以处理服务器发送事件。以下是最终示例。
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName(\"eventsource\")[0].addEventListener(\"server-time\",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = \"sse\">
<eventsource src = \"/cgi-bin/ticker.cgi\" />
</div>
<div id = \"ticker\" name = \"ticker\">
[TIME]
</div>
</body>
</html>
在测试 Server-Sent 事件之前,建议您确保您的 Web 浏览器支持此概念。