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. mysql数据去除重复及相关优化（转）

    由于mysql不支持同时对一张表进行操作,即子查询和要进行的操作不能是同一张表,因此需要通过临时表中专以下. 1.单字段重复 生成临时表,其中uid是需要去重的字段 create table tmp_ ...

  2. Bigtable 论文 阅读笔记 - 原理部分

    不支持markdown,桑心.更好的阅读体验请看:Github/Bigtable.md Paper: Google Bigtable paper Notes author: Lhfcws Wu Tim ...

  3. 【python+mysql】在python中调用mysql出问题 ImportError: No module named MySQLdb.constants

    遇到如下异常: File "C:\Users\Neil\PycharmProjects\ScrapyDouban\book\book\database.py", line 4, i ...

  4. python使用mysql数据库

    一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安装文件,双击安装文件一步一步进行操作即可. Linux 下的安装可能会更加简单,除了下载安装包进行安装外,一般的l ...

  5. 解决导入so库报错小结

    最近公司准备将重构后的项目上线,可是等到我接手的时候发现一个很纠结的问题:安卓5.0以上的手机(例如我现在在用的红米note3)运行重构后项目发生报错,提示缺少某so库. 而5.0以下的手机(我的小米 ...

  6. 自动爬取ZiMuZu的内容发布到Wordpress

    先说一下大致的步骤. 首先需要模拟浏览器登录网站才能看到相应电影信息, 然后通过正则表达式从网页源代码中筛选出所需要的电影, 最后通过python-wordpress-xmlrpc将信息逐条发布到Wo ...

  7. mysql延迟查询, 覆盖索引使用例子

    引用自 'mysql高性能' 5.3.6章节 不能使用覆盖索引的情况 :  解决办法 : 

  8. SQL Server获取自增列下一个Id

    IDENT_CURRENT('TableName')为当前的最大标识值,IDENT_INCR('TableName')为设置的标识值增量, 两者相加即为下一个标识值 SELECT IDENT_CURR ...

  9. C# 程序实现功能目录

    1.根据年月日获取 星期几  http://www.cnblogs.com/liwp/p/5943226.html 2.json对象转换为泛型集合 http://www.cnblogs.com/liw ...

  10. 阿里云服务器Linux CentOS安装配置（九）shell编译、打包、部署

    阿里云服务器Linux CentOS安装配置(九)shell编译.打包.部署 1.查询当前目录以及子目录下所有的java文件,并显示查询结果 find . -name *.java -type f - ...