標籤：style blog class code c java
HTML5有一個Server-Sent Events(SSE)功能，允許服務端推送資料到用戶端。(通常叫資料推送)。我們來看下，傳統的WEB應用程式通訊時的簡單時序圖：
現在Web App中，大都有Ajax，是這樣子：
基於資料推送是這樣的，當資料來源有新資料，它馬上發送到用戶端，不需要等待用戶端請求。這些新資料可能是最新聞，最新股票行情，來自朋友的聊天資訊，天氣預報等。
資料拉與推的功能是一樣的，使用者拿到新資料。但資料推送有一些優勢。 你可能聽說過Comet, Ajax推送, 反向Ajax, HTTP流，WebSockets與SSE是不同的技術。可能最大的優勢是低延遲。SSE用於web應用程式重新整理資料，不需要使用者做任何動作。
你可能聽說過HTML5的WebSockets，也能推送資料到用戶端。WebSockets是實現服務端更加複雜的技術，但它是真的全雙工系統socket, 服務端能推送資料到用戶端，用戶端也能推送資料回服務端。SSE工作於存在HTTP/HTTPS協議，支援Proxy 伺服器與認證技術。SSE是文本協議你能輕易的調試它。如果你需要發送大部位元據從服務端到用戶端，WebSocket是更好的選擇。
讓我們來看一下很簡單樣本，先是前端basic_sse.html：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SSE Example</title>
</head>
<body>
<pre id="x">Initializing...</pre>
<script>
var es = new EventSource("basic_sse.php");
es.addEventListener("message", function(e){
document.getElementById("x").innerHTML += "\n" + e.data;
},false);
</script>
</body>
</html>
後端先是一個basic_sse.php頁面：
<?php
header("Content-Type: text/event-stream");
while(true){
echo "data:".date("Y-m-d H:i:s")."\n\n";
@ob_flush();@flush();
sleep(1);
}
?>
您可以使用Apache Server 這裡我們把它們放在SinaAppEngine上，瀏覽器FireFox訪問basic_see.html時，將繼續返回目前時間：
代碼中資料格式是data: datetime. 在這兒，我們還可以使用Node.js來做服務端，datepush.js代碼是這樣的：
var http = require("http");
http.createServer(function(request, response){
response.writeHead(200, { "Content-Type": "text/event-stream" });
setInterval(function(){
var content = "data:" +
new Date().toISOString() + "\n\n";
response.write(content);
}, 1000);
}).listen(1234);
完善一下功能，如果我們用Node.js來返回HTML，代碼是這樣的datepush.js：
var http = require("http"), fs = require("fs");
var port = parseInt( process.argv[2] || 1234 );
http.createServer(function(request, response){
console.log("Client connected:" + request.url);
if(request.url!="/sse"){
fs.readFile("basic_sse.html", function(err,file){
response.writeHead(200, { ‘Content-Type‘: ‘text/html‘ });
var s = file.toString(); //file is a buffer
s = s.replace("basic_sse.php","sse");
response.end(s);
});
return;
}
//Below is to handle SSE request. It never returns.
response.writeHead(200, { "Content-Type": "text/event-stream" });
var timer = setInterval(function(){
var content = "data:" + new Date().toISOString() + "\n\n";
var b = response.write(content);
if(!b)console.log("Data got queued in memory (content=" + content + ")");
else console.log("Flushed! (content=" + content + ")");
},1000);
request.connection.on("close", function(){
response.end();
clearInterval(timer);
console.log("Client closed connection. Aborting.");
});
}).listen(port);
console.log("Server running at http://localhost:" + port);
在控制台，運行 node datepush2.js，在瀏覽器中訪問 http://127.0.0.1:1234/sse2 ，效果如下：
假設您曾經有javascript編程經驗，代碼並不難看懂。前端是HTML5，後端可以是PHP, JSP, Node.js, Asp.net等應用。
Tips: 不所有瀏覽器都支援SSE，可以使用以下Javascript來判斷：
if(typeof(EventSource)!=="undefined"){
// Yes! Server-sent events support!
}
else{
// Sorry! No server-sent events support in our system
}
目前瀏覽器支援情況：
| Browser |
Supported |
Notes |
| Internet Explorer |
No |
IE is not supported |
| Mozilla Firefox |
Yes |
Version 6.0 |
| Google Chrome |
Yes |
GC is Supported |
| Opera |
Yes |
Version 11 |
| Safari |
Yes |
Version 5.0 |
您可能感興趣的文章：
HTML5上傳檔案顯示進度
Html 5中自訂data-*特性
HTML5中實現拖放效果
W3C HTML5 SSE
Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。
該文章也同時發布在我的獨立部落格中-Petter Liu Blog。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
