转帖：http://www.developersky.net/thread-63-1-1.html

一直以来，HTTP协议都是严格遵循Request-Response模型的。客户端发送一个Request到服务器，服务器对Request作出响应并将Response发送回客户端。也就是说，所有的互动都是由客户端发起的，服务器不会发起任何互动。
为了创建互动性更强的web应用程序，AJAX出现了，AJAX实现了一个动态的从Server获取数据的方法。通过使用AJAX，浏览器通过XMLHttpRequest API来发送HTTP request。XMLHttpRequest使得我们可以在不阻塞用户界面的情况下向服务器发送异步的HTTP request来获取数据。但是AJAX并没有定义新的HTTP request类型，只是将发送HTTP request的工作移到了后台，不影响用户的操作。因此AJAX也没有打破Request-Response的模型，还是由浏览器从服务器‘拉’数据。
另外一种技术是Comet，也称为反向Ajax。和Ajax一样，Comet也是建立在已经存在的HTTP协议之上的。Comet会维护一个长期存活的HTTP连接，发送‘假’的请求从而得到response。
这些都是为了打破HTTP协议的限制的解决方法。但是在HTML5中，这种限制会被打破。HTML5规范中包含很多功能强大的特性，能够将浏览器变成功能齐全的RIA客户端平台。Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据‘推送’到客户端的功能。
在这篇文章中我们先介绍一下Server-Sent Events特性
Server-Sent Events
Server-Sent Events实际上将Comet技术进行了标准化。Server-Sent Events规范“定义了API来打开一个HTTP连接，通过该连接能够获取从服务器推送的通知”。Server-Sent Events包含新的HTML元素EventSource和新的MIME类型 text/event-stream，这个MIME类型定义了事件框架格式。

 
<html>

   <head>

     <mce:script type='text/javascript'><!--

        var source = new EventSource('Events');

        source.onmessage = function (event) {

           ev = document.getElementById('events');

           ev.innerHTML += "<br>[in] " + event.data;

        };

// --></mce:script>

  </head>

  <body>

    <div id="events"></div>

  </body>

</html>

EventSource代表的是接收事件的客户端的终点。客户端通过创建EventSource对象来打开一个event stream。创建EventSource对象时，该对象接收一个事件来源的URL作为其构造函数的参数。当每次收到新的事件数据时onmessage事件处理器会被调用。
通常情况下，浏览器会限制到每个服务器的连接的数量。在有些情况下，装载多个包含到同一个域的EventSource对象的页面会导致对每个EventSource创建一个专属于该EventSource的连接，这种情况下很快就会超出连接数量限制。为了处理这种情况，我们可以使用共享的WebWorker，该对象共享一个EventSource的实例。另外，通过定义浏览器特定的EventSource实现，我们可以做到如果两个EventSource的URL是相同的，那么他们就重用相同的连接。这时，共享的连接就由浏览器特定的EventSource实现来管理。
当event stream打开的时候，浏览器会发送如下的HTTP request。
REQUEST:

GET /Events HTTP/1.1

Host: myServer:8875

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE)

        AppleWebKit/532+ (KHTML, like Gecko) Version/4.0.4

        Safari/531.21.10

Accept-Encoding: gzip, deflate

Referer: http://myServer:8875/

Accept: text/event-stream

Last-Event-Id: 6

Accept-Language: de-DE

Cache-Control: no-cache

Connection: keep-alive

Accept定义了需要的格式 text/event-stream。 虽然Server-Sent Events规范定义了text/event-stream的MIME 类型，该规范同时允许使用其他的事件框架格式。但是Server-Sent Events的实现必须支持test/event-stream格式。
根据text/event-stream的格式，一个事件有一个或多个注释行和字段行组成。注释行是由冒号：开始的行。字段域行由字段名和字段值组成，字段名和字段值也是由冒号：分隔。多个事件之间用空行分隔。下面就是一个Response的例子：
RESPONSE:

 
HTTP/1.1 200 OK

Server: xLightweb/2.12-HTML5Preview6

Content-Type: text/event-stream

Expires: Fri, 01 Jan 1990 00:00:00 GMT

Cache-Control: no-cache, no-store, max-age=0, must-revalidate

Pragma: no-cache

Connection: close

: time stream

retry: 5000

id: 7

data: Thu Mar 11 07:31:30 CET 2010

id: 8

data: Thu Mar 11 07:31:35 CET 2010

[...]

根据定义，Event stream不应该被缓存。为了避免缓存，在Response的头中包含了Cache-Control，禁止了缓存该response。
上面的例子中，该response中包含三个事件。第一个事件包含一个注释行和一个retry字段；第二个事件和第三个事件都是包含一个id字段和一个data字段。data字段中包含的是事件的数据，在上面的例子中是当前的时间。id字段是用来在event stream中跟踪处理进程的。上面的例子中，服务器端的应用程序会每隔5秒向event stream中写入一个事件。当EventSource接收到该事件后，onmessage事件处理器就会被调用。
不同的是，第一个事件不会触发onmessage处理器。第一个个事件没有data字段，只包含一个注释行和一个retry字段，retry字段是用于重新连接的目的的。retry字段定义了重新连接的时间，单位是毫秒。如果收到了这样的字段，EventSource会更新其相关的重新连接时间的属性。在发生网络错误的情况下，重新连接时间在提高可靠性方面扮演了重要的角色。当EventSource实例发现连接断开了，在指定的重新连接时间之后会自动的重建连接。
我们可以看到，在HTTP request中，我们可以指定Last-Event-Id。EventSource在重建连接的时候会指定该值。每次EventSource收到包含id字段的事件时，EventSource的last event id属性会被更改，在重建连接的时候，EventSource的last event id属性会被写入HTTP request的Last-Event-Id中。这样如果服务器端实现了lastEventId的处理，就可以保证在重建的连接中不会发送已经收到的事件了。
下面的代码是一个基于Java HTTP 库xLightweb（包含HTML5预览扩展）的HttpServer的例子。

 
class ServerHandler implements IHttpRequestHandler {

  private final Timer timer = new Timer(false);

  public void onRequest(IHttpExchange exchange) throws IOException {

    String requestURI = exchange.getRequest().getRequestURI();

    if (requestURI.equals("/ServerSentEventExample")) {

      sendServerSendPage(exchange, requestURI);

    } else if (requestURI.equals("/Events")) {

      sendEventStream(exchange);

    } else {

      exchange.sendError(404);

    }

  }

  private void sendServerSendPage(IHttpExchange exchange,

          String uri) throws IOException {

    String page = "<html>/r/n " +

        " <head>/r/n" +

        "     <mce:script type='text/javascript'><!--

/r/n" +

        "        var source = new EventSource('Events');/r/n" +

        "        source.onmessage = function (event) {/r/n" +

        "          ev = document.getElementById('events');/r/n" +

        "          ev.innerHTML += /"<br>[in] /" + event.data;/r/n"+

        "        };/r/n" +

        "

// --></mce:script>/r/n" +

        " </head>/r/n" +

        " <body>/r/n" +

        "    <div id=/"events/"></div>/r/n" +

        " </body>/r/n" +

        "</html>/r/n ";

    exchange.send(new HttpResponse(200, "text/html", page));

  }

  private void sendEventStream(final IHttpExchange exchange)

          throws IOException {

    // get the last id string

    final String idString = exchange.getRequest().getHeader(

            "Last-Event-Id", "0");

    // sending the response header

    final BodyDataSink sink = exchange.send(new

            HttpResponseHeader(200, "text/event-stream"));

    TimerTask tt = new TimerTask() {

       private int id = Integer.parseInt(idString);

       public void run() {

         try {

           Event event = new Event(new Date().toString(), ++id);

           sink.write(event.toString());

         } catch (IOException ioe) {

           cancel();

           sink.destroy();

         }

       };

    };

    Event event = new Event();

    event.setRetryMillis(5 * 1000);

    event.setComment("time stream");

    sink.write(event.toString());

    timer.schedule(tt, 3000, 3000);

  }

}

XHttpServer server = new XHttpServer(8875, new ServerHandler());

server.start();
 

Server-Sent Events规范推荐如果没有其他的数据要发送，那么定期的发送keep-alive注释。这样代理服务器就可以在某个HTTP连接有一段时间不活跃时关闭该连接，这样代理服务器能够关闭空闲的连接来避免浪费连接在没有响应的HTTP服务器上。发送注释事件使得这种机制不会发生在有效的连接上。尽管EventSource会自动重建连接，但是发送注释事件还是能够避免不必要的重新连接。
Server-Sent Event是基于HTTP streaming的。如上所述，response会一直打开，当服务器端有事件发生的时候，事件会被写入response中。理论上来说，如果网络的中介如HTTP代理不立即转发部分的response，HTTP streaming会导致一些问题。现在的HTTP RFC （RFC2616 Hypertext Transfer Protocal – HTTP/1.1）没有要求部分的response必须被立刻转发。但是，很多已经存在的流行的、工作良好的web应用程序是基于HTTP streaming的。而且，产品级别的中介通常会避免缓冲大量的数据来降低内存的占用率。
和其他的流行的Coment协议如Bayeux和BOSH不同，Server-Sent Event只支持单向的从服务器到客户端的通道。Bayeux协议支持双向的通信通道。另外，Bayeux能够使用HTTP Streaming和轮询。BOSH协议也支持双向通信通道，但是BOSH是基于轮询机制的。（所谓的轮询就是客户端定期发送request到服务器端来获取数据）。
尽管Server-Sent Events比Bayeux和BOSH的功能要少，但是在只需要单向的服务器向客户端推送数据的情况下（在很多情况下都是这样），Server-Sent Events有潜力成为占主导地位的协议。Server-Sent Events协议被Bayeus和BOSH要简单的多。另外，Server-Sent Events被所有兼容HTML5的浏览器支持（这就是规范的威力啊）。

HTML5中的服务器‘推送’技术 -Server-Sent Events的更多相关文章

  1. Server push（服务器推送技术）

    一.服务器推送技术Server Push详解:        推送技术Server Push的基础思想是将浏览器主动查询信息改为服务器主动发送信息.服务器发送一批数据,浏览器显示这些数据,同时保证与服 ...

  2. HTML5中的SSE（服务器推送技术）

    本文原链接:https://cloud.tencent.com/developer/article/1194063 SSE技术详解:一种全新的HTML5服务器推送事件技术 前言 概述 基本介绍 与We ...

  3. JavaEE开发之SpringMVC中的静态资源映射及服务器推送技术

    在上篇博客中,我们聊了<JavaEE开发之SpringMVC中的自定义拦截器及异常处理>.本篇博客我们继续的来聊SpringMVC的东西,下方我们将会聊到js.css这些静态文件的加载配置 ...

  4. 深入了解 Dojo 的服务器推送技术

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  5. [html5] 学习笔记-服务器推送事件

    1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...

  6. Web端服务器推送技术原理分析及dwr框架简单的使用

    1 背景 “服务器推送技术”(ServerPushing)是最近Web技术中最热门的一个流行术语.它是继“Ajax”之后又一个倍受追捧的Web技术.“服务器推送技术”最近的流行跟“Ajax ”有着密切 ...

  7. HTML5 服务器推送事件（Server-sent Events）实战开发

    转自:http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/ http://www.ibm.com/develop ...

  8. web服务器推送技术

    传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工作.不能满足很多现实应用的需求,譬如: 监控系统:后台硬件温度.电压发生变化: 即时通信系统:其它用户登录.发送信息: 即时报价系统:后台 ...

  9. PHP Web实时消息后台服务器推送技术---GoEasy

    越来越多的项目需要用到实时消息的推送与接收,怎样用php实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 ...

随机推荐

  1. python基础之 list和 tuple(元组)

    list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...

  2. Activity之间的跳转

    /* * 触发按钮bt1跳转到另一个Activity */ bt1.setOnClickListener(new OnClickListener() { @Override public void o ...

  3. 天天模拟器极速畅玩靠谱游戏《仙境传说RO：复兴》

    在电脑上用模拟器打开手游<仙境传说RO:复兴>,今天小编就来写一写天天模拟器的试玩教学. 首先先打开天天模拟器极速版. 在界面中找到鱼图标的靠谱游戏应用中心. 在应用中心中找到<仙境 ...

  4. MongoDB的save 和insert函数的区别

    mongodb的save和insert函数都可以向collection里插入数据,但两者是有两个区别: 一.使用save函数里,如果原来的对象不存在,那他们都可以向collection里插入数据,如果 ...

  5. 代码设置layout_weight attribute

    代码设置 LinearLayout权重比例之小结: 如果在LinearLayout添加子View,那么只有一个View的时候设置所占的比例一定要设置LinearLayout总weightsum.不然会 ...

  6. python 源代码分析之调试设置

    首先在官方下载源代码,我下载的是最新版本3.4.3版本:https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz 解压后的目录如下(借用网上的目 ...

  7. 整数v，从高位到低位，取c位数，得到最大数 (其中：v>=10^c)

    题目如上,例子v=22312324,c=3,求得最大数为334. 用自己的想法实现了一遍,如果你有更好的方法的话,欢迎不吝赐教. 我的思路是,先将整数v按位存入一个数组,数组低位为整数高位,如num[ ...

  8. SQL Server SQLOS

    SQLOS 抽象出了: 1.任务高度管理子系统. 2.内存管理子系统. 3.错误,异常处理机制. 4.死锁侦测各解决机制. 5.运行第三方代码. 好处: 1.减少线种的上下文切换.空闲连接不占用线程.

  9. 100个linux站点

    (一) 文件下载 (二) 幽默娱乐 (三) 相关新闻 (四) 通用硬体 (五) 专用硬体 (六) 新手站点 (七) 图形/多媒体 (八) 游戏站点 (九) 网路杂志 (十) 入口(教育.链结) (十一 ...

  10. 在线获取访客QQ号码的原理及实现方法

    原文地址:http://www.piaoyi.org/network/get-qq-haoma-js.html 正 文: 最近,飘易收到不少在线获取网站访客QQ号码的促销推广邮件,有不少商用网站挖掘了 ...