使用xhr-multipart方式实现comet
发布于 4年前 作者 niusmallnan 3359 次浏览 最后一次编辑是 3年前

comet大家都再了解不过了…实现的方式那可谓琳琅满目比如websocket、flashsocket、xhrpolling、Iframe====…不胜枚举…今天偶然发现了一个比较野的路子…你们用没用过我不知道…我反正是没用过…这个就是xhr-multipart方式…

我们先来了解一下它的原理:

首先声明xhr-multipart仅适用于Gecko内核的浏览器.也就是firefox.原理是通过在HTML头声明ContentType为multipart/x-mixed-replace,浏览器会使用新版本的HTML替换已有页面…通过设置boundary来区分每次发送的数据…意思如下:

Content-type: multipart/x-mixed-replace;boundary=xxoo

–xxoo
Content-type: text/plain
//第一波数据
–xxoo
Content-type: text/plain
//第二波数据
–xxoo

说道这里可能大家对怎么实现还是模棱两可…那我们就动手用一个例子来show一下如何实现.研究了一段时间nodejs…孩纸们有木有发现nodejs实现comet简直是天作任何…所以我也尝试用nodejs实现一下这个方式的comet.先上代码先.

server端:
var  http = require(‘http’);

var server = http.createServer(function(req, res){
var headers = {};
headers[‘Access-Control-Allow-Origin’] = '*’; //为了xhr跨域
headers[‘Access-Control-Allow-Credentials’] = 'true’; //为了xhr跨域
headers[‘Content-Type’] = 'text/plain’;

headers[‘Content-Type’] = 'multipart/x-mixed-replace;boundary="woca"’;
headers[‘Connection’] = 'keep-alive’;

req.on(‘end’, function(){
console.log(‘requset end’);
res.writeHead(200, headers);
setInterval(function(){
console.log(‘res write once’);
res.write(‘–woca\n’);
res.write(“Content-Type: text/plain;charset=utf-8” + “\n\n”);
res.write(Math.random()+’\n’);
res.write(‘–woca\n’);
},2000);
});
});
server.listen(8088);

client端:
var prepareUrl = 'http://10.9.23.126:8088/’;

var xhr = new XMLHttpRequest();
xhr.multipart = true; //注意这里很重要!!
xhr.open('GET’, prepareUrl);

xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
console.log('data-reached:’+xhr.responseText);
}
};
xhr.send(null);

很显然这就实现了comet的Streaming方式…查看firebug的console显示如下:
GET http://10.9.23.126:8088/


data-reached:0.327594279544428
data-reached:0.9273588482756168
data-reached:0.4943395967129618
data-reached:0.7412194828502834

回到顶部