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>

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

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

HTML5的Server-Sent Events介绍////////////////zzz的更多相关文章

  1. HTML5的Server-Sent Events介绍

    body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; }       HTML5有一个Server-Sent Events(S ...

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

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  3. Play Framework, Server Sent Events and Internet Explorer

    http://www.tuicool.com/articles/7jmE7r Next week I will be presenting at Scala Days . In my talk I w ...

  4. 翻译1-在SQL Server 2016中介绍微软R服务

    在SQL Server 2016中介绍微软R服务 源自:http://www.sqlservercentral.com/articles/Microsoft/145393/ 作者:tomakatrun ...

  5. server sent events

    server sent events server push https://html5doctor.com/server-sent-events/ https://developer.mozilla ...

  6. HTML5 服务器发送事件(Server-Sent Events)介绍

    w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...

  7. HTML5分析实战WebSockets基本介绍

    HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...

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

    第一阶中我们描述了如何在Profiler中自定义一个Trace,并且让它运行在服务器端来创建一个Trace文件.然后我们通过Jonathan Kehayias的 sp_SQLskills_Conver ...

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

    http://www.sqlservercentral.com/articles/Stairway+Series/134869/ SQL server 2008 中引入了Extended Events ...

随机推荐

  1. 【原】iOS学习之极光推送

    一.极光推送工程端 1.下载SDK 极光推送是一个推送消息的第三方,SDK下载:https://www.jpush.cn/common/products 集成压缩包内容:包名为JPush-iOS-SD ...

  2. bzoj 3791: 作业

    Description 众所周知,白神是具有神奇的能力的. 比如说,他对数学作业说一声“数”,数学作业就会出于畏惧而自己完成:对语文作业说一声“语”,语文作业就会出于畏惧而自己完成. 今天,语文老师和 ...

  3. Android入门（八）：使用RadioGroup 和RadioButton组件建立单选清单

    这一章,我们学习RadioGroup 和RadioButton组件,我们新建一个项目,编码过程与前几章的项目类似. 1.建立字符串资源文件strings.xml: <resources> ...

  4. dojo tree edit的使用[前端]

    var store = new mydata.JsonRestStore({ target: "<%=ResolveUrl("~/uieditserver.ashx" ...

  5. 存储过程执行失败与sql668n

    某日监控报存储过程执行失败,查看返回码为sql668n [db2inst1@limt bin]$ db2 ? sql668n SQL0668N Operation not allowed for re ...

  6. cookie小析

    cookie用于存储数据,当用户访问了某个网站(网页)时,我们就可以通过cookie来向访问者电脑上存储数据1.不同的浏览器存放的cookie位置不同,也不能通用2.cookie的存储是以域名的形式进 ...

  7. php bmp中创建图像bmp2gd，让GD支持32位BMP

    php GD库可方便的从URL新建一图像, GD中有imagecreatefromjpeg(),imagecreatefromPNG()....等之类的FUNCTION 可有时从URL中读取的切BMP ...

  8. Python获取当前日期及时间

    import time def GetNowTime(): return time.strftime("%Y%m%d%H%M%S",time.localtime(time.time ...

  9. WPF整理-XAML构建后台类对象

    1.XAML 接触WPF的第一眼就是XAML---XAML是用来描绘界面的.其实不然! "Actually, XAML has nothing to do with UI. It's mer ...

  10. IIS7应用程序池集成和经典的区别

    IIS7应用程序池集成和经典的区别 IIS7应用程序池有集成和经典两种模式,根据微软官方的介绍, 集成模式,如果托管应用程序在采用集成模式的应用程序池中运行,服务器将使用 IIS 和 ASP.NET ...