首頁 咨詢中心 IT學堂
HTML5可以通過server-sent event服務器發送事件實現內容自動推送和自動更新

HTML5新添加的服務器發送事件(server-sent event)可以實現服務器內容自動推送,允許網頁獲得來自服務器的更新。

Server-Sent 事件 - 單向消息傳遞

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

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

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

瀏覽器支持

所有主流瀏覽器均支持服務器發送事件,除了 Internet Explorer。

接收 Server-Sent 事件通知

EventSource 對象用于接收服務器發送事件通知:

實例

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


<!DOCTYPE html>
<html>
<body>
<h1>獲得服務器更新</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("/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>


例子解釋:

創建一個新的 EventSource 對象,然后規定發送更新的頁面的 URL(本例中是 "demo_sse.php")

每接收到一次更新,就會發生 onmessage 事件

當 onmessage 事件發生時,把已接收的數據推入 id 為 "result" 的元素中

檢測 Server-Sent 事件支持

在上面的 TIY 實例中,我們編寫了一段額外的代碼來檢測服務器發送事件的瀏覽器支持情況:

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

ASP 代碼 (VB) (demo_sse.asp):

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

代碼解釋:

把報頭 "Content-Type" 設置為 "text/event-stream"

規定不對頁面進行緩存

輸出發送日期(始終以 "data: " 開頭)

向網頁刷新輸出數據

EventSource 對象

在上面的例子中,我們使用 onmessage 事件來獲取消息。不過還可以使用其他事件:

 

事件

描述

 

onopen    當通往服務器的連接被打開    

onmessage    當接收到消息    

onerror    當錯誤發生    

 

上一篇 HTML5可以通過Web Workers在后臺運行JavaScript文件
上一篇 php清空session三種方法
本方鏈接: http://www.saboomcams.com/5/15312.html
亚洲一区日韩AV