最新的Web开发教程

HTML5服务器发送的事件


服务器发送的事件允许一个网页从服务器获取更新。


服务器发送的事件 - 单程消息

服务器发送的事件是,当一个网页会自动从服务器获取更新。

这也可以过,但该网页将不得不问,如果任何更新可用。 随着服务器发送的事件时,会自动更新来。

例如: Facebook/Twitter更新,股票价格更新,新闻,体育赛事结果等。


浏览器支持

在表中的数字指定第一个浏览器版本完全支持的服务器发送的事件。

API
SSE 6 不支持 6 5 11.5

接收服务器发送的事件通知

所述EventSource对象用于接收服务器发送的事件通知:

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};
试一试»

为例进行了说明:

  • 创建一个新EventSource对象,并指定发送更新页面的URL (in this example "demo_sse.php")
  • 每次接收的更新时间,该onmessage事件发生时
  • onmessage事件发生时,把接收到的数据与所述元件id="result"

检查服务器发送的事件支持

tryit上面的例子还有一些代码行额外检查服务器发送的事件浏览器的支持:

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
} else {
    // Sorry! No server-sent events support..
}

服务器端代码示例

对于上面的例子中工作,你需要能够发送(如PHP或ASP)的数据更新的服务器。

服务器端事件流语法很简单。 设置"Content-Type""text/event-stream" 。 现在你可以开始发送事件流。

代码PHP (demo_sse.php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

代码ASP (VB) (demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

代码解释:

  • 设置"Content-Type""text/event-stream"
  • 指定的页面不应该缓存
  • 输出要发送的数据( Always start with "data: ")
  • 刷新输出数据传回的网页

该EventSource的对象

在上面的例子中,我们使用的onmessage事件得到的消息。 但是其他事件也可用:

活动 描述
onopen 当到服务器的连接被打开
onmessage 当接收到消息时
onerror 当发生错误