HTML5_服务器发送事件

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

你可能感兴趣的:(html5,eventSourc,eventstrea)