转帖：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. 在IE中调试Javascript

    不管我们写代码的时候如何小心,都不可能完全避免程序中出现bug,这个时侯就需要我们在调试的时候找出错误,修改代码. Javascript是一门灵活的语言,灵活的语法和它解释执行的特性,使得Javasc ...

  2. 解决在IE浏览器下 boder边框出现断裂或虚线的问题

    ie6.0下面经常会出现border边框断断续续的问题,等深一步了解了div之后自然会经常碰到这种问题了,不过初学div+css 的一般不会用遇到这个问题,因为初学者不会偷懒,等我们觉得用的很熟了,各 ...

  3. Android 真机调试显示offline

    今天调试程序部署的时候显示设备状态时offline. 然后突然想起来我通过命令行操作过设备. 然后找来一下,如下命令. adb kill-server adb devices

  4. eclipse优化配置

    -startup plugins/org.eclipse.equinox.launcher_1..jar --launcher.library plugins/org.eclipse.equinox. ...

  5. asp.net 获取当月的第一天和最后一天示例

    DateTime now = DateTime.Now; DateTime d1 = ); DateTime d2 = d1.AddMonths().AddDays(-); d1是本月的第一天,d2本 ...

  6. javascript 跨域汇总

    什么是跨域?当两个域具有相同的协议.相同的端口.相同的host时,那么我们就可以认为它们是相同的域.比如:http://www.example.com/a.html 和 http://www.exam ...

  7. html5 web worker

    A web worker is a JavaScript running in the background, without affecting the performance of the pag ...

  8. 14.3.5 LOCK TABLES and UNLOCK TABLES Syntax

    14.3.5 LOCK TABLES and UNLOCK TABLES Syntax LOCK TABLES tbl_name [[AS] alias] lock_type [, tbl_name ...

  9. OpenFileDialog 害人的RestoreDirectory

    莫名其妙出现找不到文件的错误.经查,发现: OpenFileDialog,SaveFileDialog在选择文件后,会切换当前程序目录的路径(System.Environment.CurrentDir ...

  10. 新手学习.net编程计划-1

    .NET是一个庞大的学习体系,对于新手来说会感觉无从下手.学习知识必须从入门的基础学起,才能更好地掌握.学习.net也是如此,最基础的莫过于了解.net平台,以及掌握.net的基础语法C#. 本计划是 ...