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

comet大家都再了解不过了…实现的方式那可谓琳琅满目比如websocket、flashsocket、xhrpolling、Iframe====…不胜枚举…今天偶然发现了一个比较野的路子…你们用没用过我不知道…我反正是没用过…这个就是xhr-multipart方式… <br/> <br/>我们先来了解一下它的原理: <br/> <br/>首先声明xhr-multipart仅适用于Gecko内核的浏览器.也就是firefox.原理是通过在HTML头声明ContentType为multipart/x-mixed-replace,浏览器会使用新版本的HTML替换已有页面…通过设置boundary来区分每次发送的数据…意思如下: <br/><pre>Content-type: multipart/x-mixed-replace;boundary=xxoo <br/>–xxoo <br/>Content-type: text/plain <br/>//第一波数据 <br/>–xxoo <br/>Content-type: text/plain <br/>//第二波数据 <br/>–xxoo</pre> <br/>说道这里可能大家对怎么实现还是模棱两可…那我们就动手用一个例子来show一下如何实现.研究了一段时间nodejs…孩纸们有木有发现nodejs实现comet简直是天作任何…所以我也尝试用nodejs实现一下这个方式的comet.先上代码先. <br/> <br/>server端: <br/><pre class=“brush:js”>var http = require(‘http’); <br/>var server = http.createServer(function(req, res){ <br/> var headers = {}; <br/> headers[‘Access-Control-Allow-Origin’] = ‘*’; //为了xhr跨域 <br/> headers[‘Access-Control-Allow-Credentials’] = ‘true’; //为了xhr跨域 <br/> headers[‘Content-Type’] = ‘text/plain’; <br/> <br/> headers[‘Content-Type’] = ‘multipart/x-mixed-replace;boundary=“woca”’; <br/> headers[‘Connection’] = ‘keep-alive’; <br/> <br/> req.on(‘end’, function(){ <br/> console.log(‘requset end’); <br/> res.writeHead(200, headers); <br/> setInterval(function(){ <br/> console.log(‘res write once’); <br/> res.write(’–woca\n’); <br/> res.write(“Content-Type: text/plain;charset=utf-8” + “\n\n”); <br/> res.write(Math.random()+’\n’); <br/> res.write(’–woca\n’); <br/> },2000); <br/> }); <br/>}); <br/>server.listen(8088);</pre> <br/>client端: <br/><pre class=“brush:js”>var prepareUrl = ‘http://10.9.23.126:8088/’; <br/>var xhr = new XMLHttpRequest(); <br/>xhr.multipart = true; //注意这里很重要!! <br/>xhr.open(‘GET’, prepareUrl); <br/> <br/>xhr.onreadystatechange = function(){ <br/> if (xhr.readyState == 4){ <br/> console.log(‘data-reached:’+xhr.responseText); <br/> } <br/>}; <br/>xhr.send(null);</pre> <br/>很显然这就实现了comet的Streaming方式…查看firebug的console显示如下: <br/><pre>GET http://10.9.23.126:8088/ <br/> <br/>data-reached:0.327594279544428 <br/>data-reached:0.9273588482756168 <br/>data-reached:0.4943395967129618 <br/>data-reached:0.7412194828502834</pre> <br/>

回到顶部