HTML5 SSE (Server-Sent Events 服务器发送事件)

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新


Server-Sent事件 - 单向消息传递

Server-Sent事件是指网页自动从服务器获取更新.

之前也可以这样做,但网页必须询问是否有可用的更新.使用服务器发送的事件,更新会自动进行.

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


浏览器支持

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

API
SSE 6.0 不支持 6.0 5.0 11.5

接收 Server-Sent 事件通知

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

实例

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

示例说明:

  • 创建一个新的EventSource对象,并指定发送更新的页面的URL(在此示例中为"demo_sse.php")
  • 每次收到更新时,都会发生onmessage事件
  • 当发生onmessage事件时,将接收到的数据放入id ="result"的元素中

检查 Server-Sent 事件支持

在上面的tryit示例中,有一些额外的代码行来检查浏览器对Server-Sent事件的支持:

if(typeof(EventSource) !== "undefined") {
    // 浏览器支持 Server-Sent!
    // Some code.....
} else {
    // 对不起! 浏览器不支持 Server-Sent..
}


服务器端代码示例

要使上述示例起作用,您需要一台能够发送数据更新的服务器(如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: 服务器时间是: {$time}nn";
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"
  • 指定页面不应缓存
  • 输出要发送的数据( 始终以"data: "开头)
  • 将输出数据刷新回网页

EventSource对象

在上面的示例中,我们使用onmessage事件来获取消息.但也有其他活动:

事件(Events) 描述(Description)
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误