Mindon.IDEA

Air off, Mind on ~ / Javascript+Golang, Sci, Health… /

建立Web应用的即时数据通道:WebSocket & Comet

BlogMS original blog key: 1002751443, blog id: airoff History stat: 浏览/评论:248/0 , 日期:2010年3月2日 17:10

在web应用高速发展,SNS火爆的今天,基于web的即时数据通道的需求也越来越强烈了。于是COMET重新出来亮相了,HTML5更是加入了 WebSocket 和 EventSource 这样的技术标准。

WebSocket目前可以在 Chrome 4+ 上很流畅地体验:

JavaScript 代码就很简单了

var ws = new WebSocket("ws://mindon.demo:1234/service");
ws.onopen = function(evt) {
    wsock.send('hello world');
};
ws.onmessage = function(evt) { alert(evt.data); };
ws.onclose = function(evt){};</PRE>
至于EventSource,Opera 9 就开始试验性的支持<event-source id=”myes” src=”http://mindon.demo/service?type=event-stream” /> 这样的标签。

http://labs.opera.com/news/2006/09/01/

服务器输出: (Content-Type: application/x-dom-event-stream)
data: hello

data: 1234567
JavaScript 代码
var es = new EventSource('http://mindon.demo/service?type=data-stream');
es.onopen = function(e) {
// readyState 0 CONNECTING , 1 OPEN, 2 CLOSED
};
dsock.onerror = function(e) {    };
dsock.onmessage = function(evt) {alert(evt.data)};

不过Opera的even-source实现有点不一样,而且在 10.50上有的例子已经不行了。

Opera 的 event-source 的 on 事件是可以通过 myes.addEventListener(‘onEventName’, function(evt){}) 动态加入,数据则是(Content-Type: application/x-dom-event-stream,而EventName 则是自定义的字符串)
Event: event-name1
data: hello

Event: event-name2
data: 1234567
而 Firefox 3 和 Safari 4 则支持XHR Stream,在 XmlHTTPRequest对象的 readyState == 3 时就能读取到数据并且进行响应。实现就是一般的AJAX,细节这里就不提了。
对于IE除了可以选择使用上面提到的 WebSocket 的Flash实现之外,就是使用 htmlfile 这个 ActiveXObject了,在IE6/7/8下都是不错的,不过会受到同一进程、同一域名连接数的限制。
服务器输出 (text/html)
&lt;script&gt;document.domain="mindon.demo";d=parent.d&lt;/script&gt;
..... {make length no less than 256}
&lt;script&gt;d('hello world')&lt;/script&gt;
&lt;script&gt;d('hi')&lt;/script&gt;</PRE>
JavaScript 代码
var xdoc = new ActiveXObject("htmlfile");
xdoc.open();
xdoc.write('&lt;html&gt;&lt;script&gt;document.domain="mindon.demo"&lt;\/script&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;');
xdoc.close();
xdoc.parentWindow.d = function(data){ callback({data: data}) };
var cometfr = xdoc.createElement('iframe');
cometfr.src = 'http://mindon.demo/service&amp;type=script-tags';
xdoc.body.appendChild(cometfr);
cometfr = null;
xdoc = null;

Comments