HTML5服務器發送事件模式可以讓你將實時數據更新從服務器推入瀏覽器。在這篇教程裏，我們將瞭解這一過程，用EventSource對象處理接收的數據並將其寫入頁面。我們將在客戶端使用HTML5和JavaScript，而在服務器端則使用PHP。
【e800編譯】HTML5開發的服務器發送事件模式可以讓你將實時數據更新從服務器推入瀏覽器。
在這篇教程裏，我們將瞭解這一過程，用EventSource對象處理接收的數據並將其寫入頁面。我們將在客戶端使用HTML5和JavaScript，而在服務器端則使用PHP。
在現有模式下，如Ajax，網頁中的代碼會持續詢問服務器是否要提供新數據，而客戶端則負責要對這一信息發出請求。有了服務器發送的請求，你就可以把數據導出服務器，這樣就可以從那兒推出更新，而不需要客戶端代碼不停對其發出請求。一旦頁面發出服務器發送事件，服務器腳本就會持續發送更新。你的JavaScript代碼會在接收到新數據的時候將其寫入頁面。
創建一個HTML5頁面
用下列代碼創建你的HTML5頁面：
添加一個要素顯示服務器發送的數據
我們要在一個專用頁面要素裏顯示從服務器接收到的數據，所以請將下列代碼添加到你的頁面：
Hereis where the serversent data will appear
你可以在要素中放置任何你喜歡的內容，只要它具備ID屬性，因爲你要能在腳本中識別出它來。佔位符文本應該只在頁面第一次加載的時候出現，但是在腳本運行時消失。
向頁面添加腳本
由於你希望這一功能繼續接收和處理更新，所以我們要在頁面主體部分添加腳本。當然，你自己的頁面或許是在用戶互動上執行功能，但是就此代碼演示而言，需要我們將下列腳本添加到頁面末端，在closing body標籤前：
//functions here
該腳本會在瀏覽器安排頁面的的時候執行，所以服務器發送的事件會直接被髮起。下一步是將JavaScript代碼添加到腳本部分：
//check for browsersupport
if(typeof(EventSource)!=="undefined"){
//create an object, passingitthe name and location of the server side script
var eSource =newEventSource("send_sse.php");
//detect message receipt
eSource.onmessage=function(event) {
//write thereceived data tothe page
document.getElementById("serverData").innerHTML=event.data;
};
}
else {
document.getElementById("serverData").innerHTML="Whoops!Yourbrowser doesn't receive server-sent events.";
}
該腳本首先是檢查瀏覽器是否支持EventSource模式。如果不支持，就將一個報錯信息寫入服務器數據頁面要素。如果瀏覽器支持此模式，那麼服務器發送的進程就開始。首先，腳本會創建一個EventSource類的對象，再將要提供數據流更新的服務器端腳本的URL傳給它。而後，腳本會創建一個事件收聽器功能在EventSource對象接收到服務器更新數據時進行收聽。這個時候，腳本會將一個引用送到更新頁碼要素併爲其寫入新數據。
創建一個服務器端腳本
我們現在需要創建服務器端PHP腳本以便向頁面發送更新。創建一個新文件並將其保存爲send_sse.php文件或是其他自選名稱，只要你是修改了上面JavaScriptEventSource代碼來反映正確名稱和所在存儲目錄。在你的PHP文件中輸入如下代碼：
//streaming code
?>
按照下面的方式設置標頭，開始你的PHP腳本：
header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');
這個代碼從腳本到流數據都進行了設置腳本，可以防止緩衝的發生。將下列代碼加入腳本，放在closing php標籤前面：
//generate randomnumber fordemonstration
$new_data = rand(0,1000);
//echo the new number
echo "data: Newrandomnumber: $new_data";
flush();
出於演示服務器發送事件的目的，我們每次都只在腳本發送更新的時候生成了一個新的隨機號碼。這段代碼首先將一個0到1000之間的隨機新號碼作爲變量保存。然後它會在文本“data”之後重複這個新號碼和一些文本，必須將文本“data:”列入腳本中使其正常運行。最後，腳本會將其發送給瀏覽器。
更新和測試
你要在服務器上運行這些腳本，看看它們是否能正常運行。上傳你的HTML頁面和PHP腳本到相同目錄。瀏覽頁面，看是否出現更新。
結論
在這篇教程裏，我們利用HTML5，JavaScript和PHP執行了基本的服務器發送事件的操作。在我們的示例中，在我們示例的服務器端腳本中，我們簡單生成了隨機數字，但是在你自己的項目中，你可以執行其他服務器端進程，如從不同來源獲取數據，爲用戶發送最新信息而不需要用戶瀏覽器每次都發送更新。
想要了解更多有關html5開發的知識可以查詢天地會。