最新的Web開發教程

HTML5服務器發送的事件


服務器發送的事件允許一個網頁從服務器獲取更新。


服務器發送的事件 - 單程消息

服務器發送的事件是,當一個網頁會自動從服務器獲取更新。

這也可以過,但該網頁將不得不問,如果任何更新可用。 隨著服務器發送的事件時,會自動更新來。

例如: Facebook/Twitter更新,股票價格更新,新聞,體育賽事結果等。


瀏覽器支持

在表中的數字指定第一個瀏覽器版本完全支持的服務器發送的事件。

API
SSE 6 不支持 6 5 11.5

接收服務器發送的事件通知

所述EventSource對象用於接收服務器發送的事件通知:

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};
試一試»

為例進行了說明:

  • 創建一個新EventSource對象,並指定發送更新頁面的URL (in this example "demo_sse.php")
  • 每次接收的更新時間,該onmessage事件發生時
  • onmessage事件發生時,把接收到的數據與所述元件id="result"

檢查服務器發送的事件支持

tryit上面的例子還有一些代碼行額外檢查服務器發送的事件瀏覽器的支持:

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
} else {
    // Sorry! No server-sent events support..
}

服務器端代碼示例

對於上面的例子中工作,你需要能夠發送(如PHP或ASP)的數據更新的服務器。

服務器端事件流語法很簡單。 設置"Content-Type""text/event-stream" 。 現在你可以開始發送事件流。

代碼PHP (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}\n\n";
flush();
?>

代碼ASP (VB) (demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

代碼解釋:

  • 設置"Content-Type""text/event-stream"
  • 指定的頁面不應該緩存
  • 輸出要發送的數據( Always start with "data: ")
  • 刷新輸出數據傳回的網頁

該EventSource的對象

在上面的例子中,我們使用的onmessage事件得到的消息。 但是其他事件也可用:

活動 描述
onopen 當到服務器的連接被打開
onmessage 當接收到消息時
onerror 當發生錯誤