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. 2015 ACM Syrian Collegiate Programming Contest

    A. My Friend of Misery 计算出答案的上下界即可. 时间复杂度$O(n)$. #include<bits/stdc++.h> using namespace std; ...

  2. 玩转AR，联想将在2017年推出第二款Tango AR手机

    今年6月份,联想与谷歌合作推出了全球首款消费级AR手机Phab2 Pro,并获得很大的关注.作为谷歌Project Tango的一部分,这款手机的最大亮点是它搭载了三颗后置摄像头和多个传感器,机身背面 ...

  3. 今天必须完成ireport+jasperreport转成pdf

    中午之前解决字体问题 2.问题总结 (1)Caused by: java.lang.NoSuchMethodException: Unknown property 'objectModelBean98 ...

  4. debian C++ OTL库 用 unixodbc 连接 mysql 小记

    这个东东也是折腾了几天,网上很多文章可能已经过时,所以写下不同,以备后用. 参考网址: http://blog.csdn.net/genganpeng/article/details/7402229 ...

  5. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  6. 关于页面中table中相同的列自动合并

    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. ansible 简单使用

    前面讲完安装,现在说说怎么用 1.创建目录 mkdir -p /etc/ansible 2. 编辑(或创建)/etc/ansible/hosts 并在其中加入一个或多个远程系统:echo '192.1 ...

  8. Activiti-explorer 在tomcat中部署报HTTP Status 404问题

    如果tomcat版本没错,请检查一下文件,将Activiti中war文件夹中的内容复制到webapp下,而不是将文件夹整个放进去……

  9. django对数据查询结果进行排序的方法

    在你的 Django 应用中,你或许希望根据某字段的值对检索结果排序,比如说,按字母顺序. 那么,使用 order_by() 这个方法就可以搞定了. ? 1 2 >>> Publis ...

  10. 对Git的理解

    GIT属于计算机软件,功能是分布式版本控制系统,字面意思还挺有意思的:愚蠢或不开心的人,首先呢,这款软件是免费的.这款软件是免费的.这款软件是免费的.(重要的地方要说三遍)即使它不是免费的,在我大天朝 ...