HTML5的Server-Sent Events介绍////////////////zzz
HTML5有一个Server-Sent Events(SSE)功能，容许服务端推送数据到客户端。(一般叫数据推送)。咱们来看下，传统的WEB应用程序通讯时的简单时序图：javascript
如今Web App中，大都有Ajax，是这样子：php
基于数据推送是这样的，当数据源有新数据，它立刻发送到客户端，不须要等待客户端请求。这些新数据多是最新闻，最新股票行情，来自朋友的聊天信息，天气预报等。html
数据拉与推的功能是同样的，用户拿到新数据。但数据推送有一些优点。 你可能据说过Comet, Ajax推送, 反向Ajax, HTTP流，WebSockets与SSE是不一样的技术。可能最大的优点是低延迟。SSE用于web应用程序刷新数据，不须要用户作任何动做。
你可能据说过HTML5的WebSockets，也能推送数据到客户端。WebSockets是实现服务端更加复杂的技术，但它是真的全双工socket, 服务端能推送数据到客户端，客户端也能推送数据回服务端。SSE工做于存在HTTP/HTTPS协议，支持代理服务器与认证技术。SSE是文本协议你能轻易的调试它。若是你须要发送大部二进制数据从服务端到客户端，WebSocket是更好的选择。前端
让咱们来看一下很简单示例，先是前端basic_sse.html：java
<!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页面：node
<?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代码是这样的：web
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 |
- 1. PhoneGap API介绍：Events
- 2. Pointer Events API 介绍
- 3. css3 pointer-events 介绍
- 4. Kubernetes(K8s)Events介绍（上）
- 5. mysql 事件 Events介绍
- 6. 01-HTML5的介绍
- 7. HTML5 介绍
- 8. HTML5介绍
- 9. Html5-Canvas介绍
- 10. zzz
- 更多相关文章...
- • 网站主机 介绍 - 网站主机教程
- • Docker events 命令 - Docker命令大全
- • Java Agent入门实战（一）-Instrumentation介绍与使用
- • 漫谈MySQL的锁机制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. PhoneGap API介绍：Events
- 2. Pointer Events API 介绍
- 3. css3 pointer-events 介绍
- 4. Kubernetes(K8s)Events介绍（上）
- 5. mysql 事件 Events介绍
- 6. 01-HTML5的介绍
- 7. HTML5 介绍
- 8. HTML5介绍
- 9. Html5-Canvas介绍
- 10. zzz