2015年12月16日 星期三

HTML5 - 伺服器發送事件功能(Server-Sent Events)

HTML5 伺服器發送事件(server-sent event)允許網頁獲得來自伺服器的更新。
Server-Sent 事件 - 單向消息傳遞

Server-Sent 事件指的是網頁自動獲取來自伺服器的更新。

以前也可能做到這一點,前提是網頁不得不詢問是否有可用的更新。通過伺服器發送事件,更新能夠自動到達。

例子:Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。

範例程式如下:

<!DOCTYPE html>
<html>
<body>
<h1>自動取得伺服器更新資料</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined") //新增一個新的 EventSource 物件,然後規定發送更新的頁面的 URL(本例中是 "demo_sse.php")
  {
  var source=new EventSource("demo_sse.php");
  source.onmessage=function(event)  //每接收到一次更新,就會發生 onmessage 事件
    {
    document.getElementById("result").innerHTML+=event.data + "<br>"; //當 onmessage 事件發生時,把已接收的資料推入 id 為 "result" 的元素中
    };
  }
else
  {
  document.getElementById("result").innerHTML="抱歉,你的瀏覽器不支持 server-sent 事件...";
  }
</script>

</body>
</html>

伺服器端程式碼範例

為了讓上面的例子可以執行,您還需要能夠發送資料更新的伺服器(比如 PHP 和 ASP)。

伺服器端事件流的語法是非常簡單的。把 "Content-Type" 設置為 "text/event-stream"。現在,您可以開始發送事件流了。

demo_sse.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>
           
           

沒有留言:

張貼留言