Think in Pushlet
作者：cleverpig

极富生活韵味的“Urban Stream”把我们Connecting Together

java 代码

 

<%   
  int i = 1;  
      
  try {  
    while (true) {  
       out.print("
"+(i++)+"
");  
       out.flush();  
        
       try {  
            Thread.sleep(3000);  
       } catch (InterruptedException e) {  
       out.print("
"+e+"
");  
        }  
     }  
   } catch (Exception e) {  
       out.print("
"+e+"
");  
   }  
%>  

        在Pushlet源代码中提供了此页面（examples/basics/push-html-stream.jsp）。上面的页面并不是十分有用，因为在我们刷新页面时，新内容机械地、持续不断地被添加到页面中，而不是server端更新的内容。
示例2
        现在让我们步入Pushlet工作机理中一探究竟。通过运行Pushlet的示例源代码（examples/basics/ push-js-stream.html），我们会看到这个每3秒刷新一次的页面。那么它是如何实现的呢？
        此示例中包含了三个文件：push-js-stream.html、push-js-stream-pusher.jsp、push-js-stream-display.html。
        其中push-js-stream.html是主框架文件，它以HTML Frame的形式包含其它两个页面。
        push-js-stream-pusher.jsp是一个JSP，它执行在server端，此文件内容如下： 

java 代码

 

 7: <%   
 8:   /** Start a line of JavaScript with a function call to parent frame. */  
 9:   String jsFunPre = ";  
10:     
11:   /** End the line of JavaScript */  
12:   String jsFunPost = "') ";  
13:     
14:   int i = 1;  
15:   try {  
16:     
17:     // Every three seconds a line of JavaScript is pushed to the client  
18:     while (true) {  
19:       
20:        // Push a line of JavaScript to the client   
21:        out.print(jsFunPre+"Page "+(i++)+jsFunPost);  
22:        out.flush();  
23:          
24:        // Sleep three secs  
25:        try {  
26:             Thread.sleep(3000);  
27:        } catch (InterruptedException e) {  
28:             // Let client display exception   
29:             out.print(jsFunPre+"InterruptedException: "+e+jsFunPost);  
30:        }  
31:      }  
32:    } catch (Exception e) {  
33:             // Let client display exception   
34:             out.print(jsFunPre+"Exception: "+e+jsFunPost);  
35:    }  
36: %>   

        注 意在示例1和示例2中使用JSP时都存在一个问题：一些servlet引擎在某个client离开时会“吃掉”IOException，以至于JSP页面 将永不抛出此异常。所以在这种情况下，页面循环将会永远执行下去。而这正是Pushlet实现采用servlet的原因之一：可以捕获到 IOException。
        在上面代码的第21行中可以看到在一个定时器循环（3秒/周期）中打印了一些HTML并将它们输出到client浏览器。请注意，这里推送的并非HTML而是Javascript！这样做的意义何在？
         它把类似“

” 的一行代码推送到浏览器；而具有JavaScript引擎的浏览器可以直接执行收到的每一行代码，并调用 parent.push()函数。而代码中的Parent便是浏览器页面中所在Frame的Parent，也就是push-js- stream.html。让我们看看都发生了什么？

js 代码

 

"JavaScript">  
var pageStart=";  
var pageEnd="";  
  // Callback function with message from server.  
  // This function is called from within the hidden JSP pushlet frame  
  function push(content) {  
   
    // Refresh the display frame with the content received  
    window.frames['displayFrame'].document.writeln(pageStart+content+pageEnd);  
    window.frames['displayFrame'].document.close();  
  }  
  
  
  
  
  
       
       
       
       
       
  

         可以看到push-js-stream.html中的push()函数被名为pushletFrame的JSP Frame调用：把传入的参数值写入到displayFrame（此Frame为push-js-stream-display.html）。这是动态 HTML的一个小技巧：使用document对象的writeln方法刷新某个Frame或者Window的内容。
        于是displayFrame成为了用于显示内容的、真正的视图。displayFrame初始化为黑色背景并显示“wait…”直到来自server的内容被推送过来：

WAIT...

         这便是Pushlet的基本做法：我们从servlet（或者从示例中的JSP）把JavaScript代码作为HTTP流推送到浏览器。这些代码被浏览 器的JavaScript引擎解释并完成一些有趣的工作。于是便轻松地完成了从server端的Java到浏览器中的JavaScript的回调。
         上面的示例展示了Pushlet原理，但这里存在一些等待解决的问题和需要增添的特性。于是我建立了一个小型的server端Pushlet框架（其类结 构图表将会展示在下面），添加了一些用在client中的JavaScript库。由于client需要依赖更多的DHTML特性（比如Layers）， 我们将首先粗略地温习一些DHTML知识。示例代码见examples/dhtml。
框架的设计
        注意：本章节仅反映了Pushlet server端框架的1.0版本（随着版本升级可能还会重新构造）。
        Pushlet 框架允许client订阅在server端的主题（subject），而server则接收订阅，然后在server端的订阅主题所对应的数据变化时推送 数据到client。此框架的基本设计模板是发布/订阅（Publish/Subscrib），也被称为观察者（Observer）。它具有server 和client两部分组建而成：
        Server端：
        由围绕着Pushlet类的Java类集合构成（见下面的UML类设计图表）。
        Client端：
        脚本与页面：可重用的JavaScript库（pushlet.js）和用来在DHTML client（这里指浏览器）中接收事件的HTML（pushlet.html）组成。
        Client端Java类：
        JavaPushletClient.java和JavaPushletClientListener.java，负责在Java client中接收事件。
        跨越浏览器的DHTML工具库：
        layer.js, layer-grid.js, layer-region.js，用来在DHTML层中显示数据内容。
        最后，还有用于测试事件的生成工具类EventGenerators.java以及一些示例应用。
server端类设计
        下面是server端Java类的UML图表：

Pushlet框架Java类UML图

js 代码

 

http://www.fluidiom.com:8080/servlet/pushlet?subject="/stocks/aex"  

         主题（subject）表示为具有层次的“主题树”（topic-tree）形式。例如：“/stocks”表示与股票价格相关的所有事件，而 “/stocks/aex”表示Amsterdam Exchange公司的股票价格。“/”表示所有事件。这并不时硬性规定，而是由开发者根据应用自行定义。
        当前只有接收方协议是发送到client的HTTP回应流（response stream）。在将来的扩展版本中，接收方协议能够提供多种选择，比如TCP、UDP、RMI、HTTP POST甚至只SMTP。
        Event（事件）类：仅仅是name/value的字符串对（使用java.util.Properties实现）的集合。
        产生Event的方式：Publisher 类为生成的Event提供了发布接口，它内部保存了订阅者（那些实现Subscriber接口的类）列表，并把每个Event发送给那些主题与Event 匹配的订阅者。Event在server端也可以通过能够侦听外部Event的EventGenerators类来生成。另外client可以通过基于 HTTP通讯的Postlet类来发布Event。
        在上面的图表中，为了适配不同请求源（浏览器、Java client程序），PushletSubscriber以及它所包含的那些类提供了多种订阅者的实现。
场景1: 事件订阅

浏览器client订阅程序图

事件发布程序图

js 代码

Client端框架
        由于这是对于所有浏览器client的通用任务，所以Pushlet Client端框架提供了两个可重用的文件：
pushlet.html和pushlet.js。
        Pushlet.html本身是被附着在一个隐藏的HTML Frame中。这个Frame的parent调用并实现push()方法。
        pushlet.html ：被包含在client端的HTML文档中的Frame中。它可以传入主题标识和背景颜色两个参数。而它所做的最重要的工作是下面的push方法：

        Push ()函数首先根据传入的参数建立了一个JavaScript对象——pushletEvent。接着使用updateStatusFrame()显示闪 光，表示我们正在接收Event数据，如果parent frame存在onPush()函数，则将前面建立的PushletEvent对象作为参数调用parent frame指定的处理方法。
        在pushlet.js 中的PushletEvent类代码如下：

js 代码

 

/* Object to represent nl.justobjects.pushlet.Event in JavaScript.  
   Arguments are an array where args[i] is name and args[i+1] is value  
*/  
function PushletEvent(args) {  
   // Map存放Name/Value pairs  
   this.map = new Map();  
     
   // 设置成员方法  
   this.getSubject = PushletEventGetSubject  
   this.put = PushletEventPut  
   this.get = PushletEventGet  
   this.toString = PushletEventToString  
   this.toTable = PushletEventToTable  
  
   // 将传入的参数值放入到map中  
   for (var i=0; i < args.length; i++) {  
     this.put(args[i], args[++i] );  
   }  
}  
  
// 获取事件主题  
function PushletEventGetSubject() {  
  return this.map.get('subject')  
}  
  
// 获取事件属性  
function PushletEventGet(name) {  
  return this.map.get(name)  
}  
  
// 存放事件属性  
function PushletEventPut(name, value) {  
  return this.map.put(name, value)  
}  
  
function PushletEventToString() {  
  return this.map.toString();  
}  
  
// 将map内容转化为HTML Table  
function PushletEventToTable() {  
  return this.map.toTable();  
}  

        PushletEvent使用了一个我增加的Map JavaScript对象，它类似于java.util.Hashtable。
Pushlet协议
        详见http://www.pushlets.com/doc/protocol.html
应用
        Pushlet可以开发多种类型的web应用。由于此框架允许client主动更新事件（通过Postlet），所以应用就并不只是被动地推送数据了。每个Pushlet应用都可以根据下面进行分类：
        事件由server发起、还是client发起或者两者都有可能；状态是否保持在server、还是在client或者两者都有可能。
        由于事件不但被做成了对JavaScript有效，而且也是其它脚本化的插件能够接收实时的事件更新。例如你可以脚本化Macromedia Flash或者VRML应用。
        为了说明Pushlet应用的范围，下面提供了一些简单的demo。
监控
        例如股票、天气、投票、机场到达系统，这些应用都可以采用Pushlet对实时数据进行监控。
        这是一个实时FX股票/新闻应用：www.rabotreasuryweb.com (IE only). 另一个部署Pushlet的实时股票/新闻应用：www.marketnews.com.
游戏
        从象棋到描述危机和垄断者的游戏。
分布式MVC
         这涉及到了在用户接口框架（例如Java Swing和微软MFC）中常见的设计模板。在分布式MVC的各种变体中，模式层位于server，而client控制着是视图层和控制层。Client 通过控制进而修改模式，然后模式将通知所有依附的视图，而视图将进行自我刷新。
        一些应用具有web前端（front end），其数据存放在server上可被多个用户更新。比如预订系统和登记系统。如果一个client完成一次更新，而其它client却不能马上见到 变化直至刷新页面。在某些情况下，这是很简单、可行的解决方案，但同时也存在着用户需要同步变化的情况。这种情况下，应用可以使用Pushlet简单地将 URL作为单一事件推送到client，client接收到这个URL后将刷新页面。
        另外一点值得注意的示例是争议颇多 的EJB。尽管Java client能够直接和EJB对话（通过RMI或者CORBA），但多数情况下则是由servlet和作为client前端的JSP来完成。在这种情况 下，“通知”工作变得很艰难。使用Pushlet，EJB可以在其状态发生改变时通知依附于它的web client。
Web表示层
        在放弃使用PowerPonit作Java课程讲解工具后，我开发了一个基于XML的内容管理框架。由于在某些情形下，教室没有“卷轴工”，但是所有的学生人手一台网络计算机，所以我开发了这个简单的应用，它使我能够同步改变学生和我的页面内容。
用户辅助
        这种类型的应用可用于call center、银行、帮助桌面、电子商务web应用。当你由于问题而拨打call center电话时，代理程序可以使你通过上网的方式浏览解决方案、供货等信息。
        使用EJB作为后台和JSP作为前台，client可以买/卖外币。一个“AutoTrader”对象自动提供处理，如果自动处理失败或者client请求人工处理时，一个“处理干预”将发生，处理者将被通知并提供相应的服务。
社区工具
        这是一种多用户参加实时会话的应用。我正在计划扩充Pushlet框架，使其支持多用户session的特性。目前可以实现简单的web聊天，我称之为WCQ，大家可以在Pushlet源代码的example中见到它。
比较
        本章节对Pushlet与基于CORBA/RMI的Java applet解决方案进行一下比较。
优势
        直接与浏览器中的DHTML集成。
        标准的HTTP端口和协议：消息和RMI/CORBA使用非标准端口（相对HTTP标准端口而言），遇到“防火墙”、“禁止回调”、“禁止接收UDP数据”的浏览器安全限制时可能无法工作。
        client负载：基于CORBA/RMI的Java applet使client在启动时更加沉重，并消耗更多的资源。
        无需额外的server：消息和RMI/CORBA需要单独的server产品。Pushlet理论上可以在任何server引擎上运行，并具备连接管理和多线程能力。
缺点
        跨越浏览器的DHTML：Pushlet需要使用能工作在任何平台、所有浏览器版本的DHTML库。
        可测量性：当100个以上的client通过Pushlet连接到server时，server上的线程和socket资源都将出现紧张。而解决这一问题的方式就是使用单独的Pushlet服务器。
        Web server问题：一般的web server往往不是为长连接而设计的。针对这一问题的解决方案与上面的可测量性相同。
        代理缓存：一些代理服务器可能缓存HTTP数据。
参考资源：
        什么是Comet？
        Pushlet官网
        Pushlet白皮书
        JavaWorld《An in-depth look at RMI callbacks》
        JavaWorld《POSTing via Java/ Learn how to POST data to Web servers in Java》
        avaWorld《POSTing via Java revisited. Learn how to display the HTML document returned by the Web server》J
        JavaWorld《Connect to a Java server via HTTP》
        Doug Lea编写的《Concurrent Programming in Java – 2nd edition》
        Dynamic Duo[Cross-Browser Dynamic HTML]
        Danny Goodman编写的 《Dynamic HTML: The Definitive Reference》
进阶资源：
        Pushlet安装手册
        Pushlet协议解释
        Pushlet Cookbook
        Pushlet API文档
感谢阅读此文