HTML5 服务端发信事件（SSE）
HTML5服务端发信事件允许网页从服务端获取数据更新.
服务端发信事件 ： 一种消息方式
服务端发信事件是网页加载时自动获取来自服务端的更新.
这也有可能是之前, 但如果有任何有效更新网页都会询问. 随着服务端发信事件，会自动更新.
例子: 网易/微博的更新, 股票更新, 新闻事件,体育新闻等.
浏览器支持
服务端发信事件除了IE，支持所有主流的浏览器.
接收服务端发信事件的通知
EventSource对象用于接收服务端发信事件的通知:
例子
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML + =event.data + "<br>";
};
source.onmessage = function(event) {
document.getElementById("result").innerHTML + =event.data + "<br>";
};
亲自试一试 »
例子说明:
- 创建一个EventSource对象, 指定发送更新页面的URL (这个例子的是"demo_sse.php")
- 每次更新被接收onmessage事件会被触发
- onmessage事件触发时,将接收到的数据放入到id="result"的元素中
检查SSE的支持
在上面的例子中包含一些检查是否支持SSE的代码:
if(typeof(EventSource) !== "undefined")
{
// 支持SSE
// 相关代码.....
}
else
{
// 不支持SSE..
}
{
// 支持SSE
// 相关代码.....
}
else
{
// 不支持SSE..
}
服务端端的例子
如果让上面的例子工作，你需要在服务端发送更新数据(如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('Y-m-d H:i:s');
echo "data: 服务端的时间是: {$time}\n\n";
flush();
?>
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('Y-m-d H:i:s');
echo "data: 服务端的时间是: {$time}\n\n";
flush();
?>
ASP (VB)代码 (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: " & now())
Response.Flush()
%>
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: " & now())
Response.Flush()
%>
代码说明:
- 设置header头"Content-Type"的值为"text/event-stream"
- 指定页面无缓存
- 输出的发送数据 ( 总是 以"data: "作为开头)
- 刷新输出数据的页面
EventSource对象
上面的例子使用onmessage事件获取消息. 但是其他事件也可以有效:
| 事件 | 描述 |
|---|---|
| onopen | 当连接服务打开时 |
| onmessage | 当消息被接收时 |
| onerror | 当发生错误时 |
