HTML5服务器发送事件 EventSource
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过HTML5的服务器发送事件,能够自动获取更新。
- 在客户端获取服务器发送的数据并更新
<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("http://www.w3school.com.cn/example/html5/demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
- 配套的服务端代码(PHP或ASP)如下:
<?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();
?>
代码解释:
- 把报头 “Content-Type” 设置为 “text/event-stream”
- 规定不对页面进行缓存
- 输出发送日期(始终以 “data: ” 开头)
- 向网页刷新输出数据
更多请参考:W3School