HTML5_服务器发送事件

最新推荐文章于 2024-08-09 03:37:41 发布

翻译最新推荐文章于 2024-08-09 03:37:41 发布 · 1.4k 阅读

文章标签：

#html5 #eventSourc #eventstrea

HTML 专栏收录该内容

20 篇文章

订阅专栏

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();
?>

代码解释：