HTML5的Server-Sent Events介绍

body{
font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif;
}

HTML5有一个Server-Sent
Events(SSE)功能，允许服务端推送数据到客户端。(通常叫数据推送)。我们来看下，传统的WEB应用程序通信时的简单时序图：

现在Web App中，大都有Ajax，是这样子：

基于数据推送是这样的，当数据源有新数据，它马上发送到客户端，不需要等待客户端请求。这些新数据可能是最新闻，最新股票行情，来自朋友的聊天信息，天气预报等。

数据拉与推的功能是一样的，用户拿到新数据。但数据推送有一些优势。 你可能听说过Comet,
Ajax推送, 反向Ajax,
HTTP流，WebSockets与SSE是不同的技术。可能最大的优势是低延迟。SSE用于web应用程序刷新数据，不需要用户做任何动作。

     
你可能听说过HTML5的WebSockets，也能推送数据到客户端。WebSockets是实现服务端更加复杂的技术，但它是真的全双工socket,
服务端能推送数据到客户端，客户端也能推送数据回服务端。SSE工作于存在HTTP/HTTPS协议，支持代理服务器与认证技术。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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

后端先是一个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);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

完善一下功能，如果我们用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);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
在控制台，运行 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
   }
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

目前浏览器支持情况：



























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


希望对您WEB应用程序开发有帮助。

您可能感兴趣的文章：

HTML5上传文件显示进度
Html
5中自定义data-*特性

HTML5中实现拖放效果

W3C HTML5
SSE

作者：Petter
Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

该文章也同时发布在我的独立博客中-Petter Liu
Blog。

HTML5的Server-Sent Events介绍,布布扣,bubuko.com

时间： 2024-10-11 16:20:39

HTML5的Server-Sent Events介绍的相关文章

html5 拖拽的简要介绍

1,首先,你要告诉计算机那个元素可以拖动,或者是一张图,或者是一个盒子,在标签里面加上 draggable="true"  2,然后,监听该元素被拖动的函数 ondragstart="drag(event)" 3,drag 里面告诉计算机是那个元素被拖动的 ev.dataTransfer.setData("Text",ev.target.id); 4,接下来将拖动的元素放到哪个盒子,(或者是经过那个盒子,经过某个盒子的时候触法 ondragove

手机站建设HTML5触摸屏touch事件使用介绍

手机站建设HTML5触摸屏touch事件使用介绍技术 maybe yes 发表于2015-01-05 14:42 原文链接 : http://blog.lmlphp.com/archives/56  来自 : LMLPHP后院 市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用,但是效果不够好.PC上还没有哪个事件是可以与触屏手机的触摸事件对

SQL Server 默认跟踪 -- 介绍

SQL Server 默认跟踪 -- 介绍 什么是默认跟踪? 默认的SQL Server预定义跟踪,是SQL Server中默认开启的最轻量级跟踪,由5个跟踪文件(.trc)组成,每个文件的最大值为20MB,存储在SQL Server log目录. 这些文件用作临时存储捕获事件的缓存.存储在缓存中的事件一段事件后会被删除.当SQL Server重启后,或者当当前使用的文件达到最大值时,最旧的文件被删除,在忙碌的生产环境,这样的循环缓存会在几分钟内被循环覆盖. 注意: 后续版本的 Microsof

html5/css3响应式布局介绍及设计流程

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查

SQL Server 黑盒跟踪 -- 介绍

SQL Server 黑盒跟踪 -- 介绍 问题描述: 你是否碰到过这些问题:一个查询导致SQL Server崩溃,或者因为CPU飙到100%而导致服务器不可用? 解决方案: SQL Server提供了另一个开箱即用的后台跟踪就是黑盒跟踪(Blackbox Traces).这个跟踪被设计为同飞机上的黑匣子功能类似,SQL Server黑匣子就是拥有大量运行数据的记录.黑匣子记录了发送到SQL Server的所有查询以及类似错误信息的有用记录,可以帮助诊断间歇性服务器崩溃,或者知道在CPU飙高之前

[翻译]——SQL Server索引的介绍:SQL Server索引级的阶梯

SQL Server索引的介绍:SQL Server索引级的阶梯 By David Durant, 2014/11/05 (first published: 2011/02/17) 该系列 本文是楼梯系列的一部分:SQL Server索引的阶梯 索引是数据库设计的基础,并告诉开发人员使用数据库非常了解设计器的意图.不幸的是,当性能问题出现时,索引常常被添加到事后.这里最后是一个简单的系列文章,它应该能让任何数据库专业人员快速"跟上"他们的步伐 第一个层次引入了SQL Server索引:

SQL Server Extended Events 进阶 1：从SQL Trace 到Extended Events

http://www.sqlservercentral.com/articles/Stairway+Series/134869/ SQL server 2008 中引入了Extended Events 用以替换SQL Trace. 然而在第一个版本中并没有为用户提供UI,因此使用Extended Events并不是很方便.SQL Server 2012及时修正了这一点,将UI管理工具集成在SSMS中, 这就意味着我们不需要再为了查询Event XML而学习使用XQuery了.因此跟多的DBA和开

HTML5分析实战WebSockets基本介绍

HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 WebSockets而不能攀登的轮询和长轮询的解决方式是用来模拟全双工连接通过维护两个连接. HTML5 WebSockets账户代理和防火墙等网络危害,使得流媒体可以在不论什么连接,和可以支持在单个连接上游和下游的通信,HTML5 WebSockets-based应用程序server减轻负担,让现有的

SQL Server Extended Events 进阶 2：使用UI创建基本的事件会话

第一阶中我们描述了如何在Profiler中自定义一个Trace,并且让它运行在服务器端来创建一个Trace文件.然后我们通过Jonathan Kehayias的 sp_SQLskills_ConvertTraceToExtendedEvents存储过程,将Trace定义转换为创建Extended Events 会话的脚本.希望它为你建立起了一座由SQL Trace 通向Extended Events开始的桥梁.当然,它也提供了一个将已有SQL Trace库转换为Extend Events的有效途