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();
?>
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();
?>
留言
張貼留言