Comet框架Pushlets的集成
Author:Zhang, Yang
在从事web项目开发时, 有时会遇到业务需求,要求通知用户某一事件的发生而无需页面不停的刷新,如:
即时通信: 用户登录、消息推送
即时报价: 数据库的数据变化
即时监控: 硬件状态变化
然而由于html协议天生的请求模式,只能是客户端向服务器端请求数据,服务器端没法主动向客户端推送数据。
为此, 开发人员想出了一些办法:
1.Flash
在Flash中可以实现socket通信, 然后页面通过 JavaScript去和Flash交互。
优点:
a.实时性好
b.并发好
缺点:
a.页面上必须运行Flash, 而现在移动系统对于电池续航的考虑对Flash都不友好了。
b.Socket通信不是走的80端口,所以有防火墙的问题
2.Java Applet
Applet中也可以实现socket通信。
优点:
a.实时性好
b.并发好
缺点:
a.Applet无法通过JavaScript和页面交互
b.客户端需要运行java
3.页面定时刷新
<META HTTP-RQUIV="Refresh" CONTENT=10>,通过meta标签指示页面每10秒刷新一次。
优点:
a.实现方式简单粗暴
缺点:
a.服务器负担很大
b.用户体验差
4.ajax轮询
通过ajax去不停刷新有可能更新的数据部分。
优点:
a.相对页面刷新,数据传输少了很多
缺点:
b.网络请求数还是很多
a.多久查一次是个问题,性能和实时性不好拿捏
5.comet
采用长连接,通过延长服务器接受请求时的响应时机来造成服务器主动推的假象。由浏览器主动发起请求,但是Server 端以一种似乎非常慢的响应方式给出回答。这样在这个期间内,服务器端可以使用同一个 connection 把要更新的数据主动发送给 Browser 。因此请求可能等待较长的时间,期间没有任何数据返回,但是一旦有了新的数据,它将立即被发送到浏览器。
优点:
a.实时性好
b.当没有数据更新时, 网络交互数会比轮询少
缺点:
a.连接长期占用,浪费服务器连接资源
6. WebSocket
Htlm5的新特性, 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
优点:
a.数据传送少
b.双向数据通信
缺点:
a.浏览器兼容性,IE10才开始支持
b.Web服务器是否支持
从上面的选择看来,笔者更青睐comet长连接,pushlets就是一种长连接的实现,本文将介绍如何将pushlets 2.0.3 集成到web项目中。
Pushlets 2.0.3 jar下载地址 http://sourceforge.net/projects/pushlets/files/pushlets/2.0.3/
1、把pushlet.jar放到 WebRoot\WEB-INF\lib下,添加进classpath
2、把pushlet.properties,sources.properties放到 WebRoot\WEB-INF下,一个是pushlet的配置文件,一个是事件源的配置文件,如果没有用到他的事件源可以不要sources.properties,我用到了他的“/pushlet/ping”事件来保持响应,所以我加了
3、添加pushlet 的ajax客户端js文件到你的项目中 ajax-pushlet-client.js,并在用到的页面引入,这个文件封装了一些ajax访问的方法,用他提供的接口可以很方便的发布消息,订阅消息,至于他提供了什么方法,要看这个js文件的代码,很简单的,就700行,一看就懂,pushlet的源码也是,其实pushlet框架就是一个人写的,相当小型的框架,这个js文件里默认是把 PL._init() 方法和window的onload绑到一起了,和ext一起用的时候起冲突了,所以后来我把他注掉了,就在文件的最后一行, 然后在我用到pushet的时候在我自己的js代码里面先执行PL._init() ,然后才开始PL.joinListen('/pushlet/ping'),这个PL就是pushlet的客户端js对象
4、在你的web.xml里添加pushlet的servlet,这个是用来给ajax访问用的
<servlet>
<servlet-name>pushlet</servlet-name>
<servlet-class>nl.justobjects.pushlet.servlet.Pushlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Define the Servlet Mappings. -->
<!-- The pushlet -->
<servlet-mapping>
<servlet-name>pushlet</servlet-name>
<url-pattern>/desktop/pushlet.srv</url-pattern>
</servlet-mapping>
这里需要注意的一点是,上面我映射的是/desktop/pushlet.srv,那是因为当时我引用ajax-pushlet-client.js的页面是http://localhost:8080/myproject/desktop/desktop.html ,在ajax-pushlet-client.js中,默认定义的访问地址是
PL.pushletURL = PL._getWebRoot() + 'pushlet.srv';在我的应用中,他去访问的就是/myproject/desktop/pushlet.srv,最开始我写的是/pushlet.srv,出错了,才改成/desktop/pushlet.srv的,所以你在不同的页面调用时,要注意映射路径,
当然你也可以再PL初始化后在去改PL.pushletURL,这是公共属性,应该可以改的,然后写一个固定的url-pattern去访问。
上面都配好后,就可以再你的页面中使用pushlet的方法了,主要是使用PL对象,使用前先PL._init(),然后怎么用就得看文档,看例子了,我写了一个简单的列子就是在页面中调用
PL._init();
PL.joinListen('/pushlet/ping');
'/pushlet/ping'事件是pushelt自己的一个事件源例子,我调用的就是他,会每隔几秒就发个事件给客户端
pushlet事件接受的时候会对窗口的状态栏写信息,看到这些就知道当前的pushlet的运行状态了
等待消息中
接受数据中
下面是我的项目结构
下面有完整的代码下载
http://dl.iteye.com/topics/download/e1ee2daa-e159-3936-9daf-5def775fbde0