Comet——服务器推送解决方案

浏览器需要资源时,发起请求向服务器“要”,这个很容易,地球人都知道。

服务器有资源更新,想向浏览器“推”,这个好像就有点麻烦了。

Comet就是这么个词,描述技术、协议和为浏览器提供可行且可扩展的低延迟数据传输的解决方案,,,的集合。

使用场景

  • 监控:天气啊、水库啊、核反应堆啊、外星人入侵啊......咳咳,等等。
  • 报价:0700涨到300块啦!南北车又跳水啦!恒生指数三万两千点啦!
  • 消息:腾讯在线教育web化课堂聊天系统 = =、

还是蛮希望0700涨到300块的对吧(虽然这跟我并没有什么关系= =)。类似这些消息,需要服务器即时地更新到浏览器,因为浏览器并不知道恒生指数有没有涨到三万两千点。这个问题的实现方案就是今天要记录的Comet。

方案一:轮询

function ajax(data){
	var xhr = new XMLHttpRequest();
    xhr.open('get', '/cgi-bin/xxx', true);
    xhr.onreadystatechange = function(){
    	if (xhr.readyState == 4) {
        	if (xhr.status == 200) {
            	......
            }
        }
    }
    xhr.send(data);
}
setTimeout(function(){ajax({"data":"hehe"});}, 2000);

估计看到这两个字的时候各位已经准备好臭鸡蛋要丢上来了。是的,这个词汇生来就不招人待见,因为它就是这么一个蛋疼的过程。

浏览器君:恒指上三万了吗?

服务器桑:没有

浏览器君:恒指上三万了吗?

服务器桑:没有

浏览器君:恒指上三万了吗?

服务器桑:没有

浏览器君:恒指上三万了吗?

服务器桑:没有

浏览器君:恒指上三万了吗?

服务器桑:没有

呵呵呵呵。。。。。。。。不多说了反正也不会用。

方案二:长轮询

穿个马甲我就不认识你啦?!其实别说,穿个马甲好像确实有点不一样了。

function longPoll(data, cbk){
	var xhr = new XMLHttpRequest();
    var url = '/cgi-bin/xxx';
    xhr.onreadystatechange = function(){
    	if (xhr.readyState == 4) {
        	if (xhr.status == 200) {
            	cbk(xhr.responseText);
                xhr.open('get', url, true);
                xhr.send(otherData);
            }
        }
    }
	xhr.open('get', url, true);
	xhr.send(data);
}

浏览器君:恒指上三万了吗?

浏览器君嗑瓜子中......

浏览器君吃薯片中......

浏览器君跳秧歌中......

服务器桑:没有

浏览器君:恒指上三万了吗?

浏览器君走钢丝中......

浏览器君碎大石中......

浏览器君住院中......

服务器桑:上了

浏览器君执行“赶紧卖”回调函数。

恩,区别就在于服务器在没有响应的时候会把请求hold住,直到有消息要返回或者超时返回

从浏览器的角度来看,长轮询的办法保持了有效的请求,又避免了大量无效请求,并且即时性更好,这是一种可行的方案。

方案三:永久帧

永久帧(forever-frame)的方法是打开一个隐藏的iframe,用这个iframe去请求一个HTTP1.1的trunked编码文档,这是为增量读取超大型文档而生的,即把iframe当作一个不断增加内容的文档,然后在增量文档中生成script标签调用预定义的回调函数,这里也有jsonp的思想在里面。

function foreverFrame(url, callback) {
	var ifm = document.createElement('iframe');
    ifm.style.display = 'none';
    ifm.src = url + '?callback=parent.foreverFrame.callback';
    this.callback = callback;
}

与jsonp类似对吧,事先定义回调函数,请求参数带上回调函数名,只不过这里涉及父子iframe之间的通信,要注意跨域问题。

关于iframe跨域问题,隔壁团队有个不错的实现方案。 见http://www.alloyteam.com/2013/11/the-second-version-universal-solution-iframe-cross-domain-communication/

然后服务器就发送一堆消息到iframe中

<script>
parent.foreverFrame.callback('hello world!');
</script>
<script>
parent.foreverFrame.callback('hello Mars!');
</script>

这个方法的问题在于,没有办法实现可靠的错误处理或者跟踪连接的状态,因为所有的连接和数据都是由浏览器通过script标签来处理的,于是某一端什么时候断开了咱们并不知道。

方案四:xhr流

xhr流(XMLHttpRequest Streaming)也是通过标准的XMLHttpRequest对象获得的,但是需要在readyState为3的时候去访问数据,这样就不必等待连接关闭之后再操作数据。

function xhrStreaming(url, callback) {
	var xhr = new XMLHttpRequest();
    xhr.open('post', url, true);
    //保存上次返回的文档位置
    var lastSize;
    xhr.onreadystatechange = function() {
    	var newResponseText = "";
        if (xhr.readyState > 2) { 
        	newResponseText = xhr.responseText.slice(lastSize);
        	lastSize = xhr.responseText.length;
        	callback(newResponseText);
        }
        if (xhr.readyState == 4) {
        	xhrStreaming(url, callback);
        }
    }
    xhr.send(null);
}

其实跟永久帧的方法也类似,只不过是把iframe获取内容的方式改成了ajax,然后在xhr内部处理增量逻辑、回调和重发。

这里需要注意的是链接时间需要有超时限制,否则内存性能会受到影响,另外单个请求返回数据需要限定长度,不能无限增大。

终极方案:WebSocket

这个名字大家都不陌生了,HTML5协议中的BS全双工通信解决方案,真正的高富帅,实力与智慧的结合,地位和财富的象征。

//名字叫“猥琐”的函数
function ws(url, callback) {
	var ws = new WebSocket(url);
    
    ws.onopen = function() {
    	ws.send(xxx);
    }
    ws.onmessage = function(e) {
    	callback(e.data);
    }
    ws.onclose = function(e) {
    	...
    }
}

美如画。。。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

rhj

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

网站速度优化模块HttpCompressionModule

为了优化网站的访问速度,准备采用HttpCompressionModule 6对传输数据进行压缩,下载了HttpCompressionModule 6 , 并按...

28970
来自专栏AhDung

【SQL】SQL2012离线帮助文档安装不上的处理手记

我SQL实例装的是2008 R2版,由于该版自带的SSMS(Microsoft SQL Server Management Studio 管理工具)存在一些操蛋...

23230
来自专栏游戏杂谈

使用hta操作nginx停止、重启

新上线的webgame需要做一个官网,做好了并上线了(切割、程序、后台,后台使用是java版本的jeecms),但仅仅是自己家的官网做好了,现在上面的想法是需要...

19210
来自专栏小狼的世界

Fedora 11 的安装以及 LAMP环境的搭建(一)

最近,重新安装了一次系统,为了以后不再做无谓的重复查询的工作,特将本次安装及配置的过程记录下来,做为自己以后的一个参考,亦可以为想要安装 Fedora 桌面的同...

13130
来自专栏Huramkin的归档库

在中国大陆好用的DNS

这里选择了一些在中国大陆好用的公共DNS服务 污染小,响应速度快 还有一些其他的使用技巧

7K00
来自专栏FreeBuf

CoffeeMiner:劫持WiFi网络接入设备进行“挖矿”的框架

几个星期以前,我看到了网上关于黑客劫持星巴克WiFi网络中的笔记本电脑进行“挖矿”的报道,非常有意思,结合分析,我认为,还能用中间人MITM测试方式来实现类似目...

26360
来自专栏coding

django2实战1.初识django什么是django环境安装创建第一个项目启动开发服务器项目配置文件小结

以建房子为比喻,如果每个建筑工都以自己的想法去建,而且要负责所有的流程,包括打地基,建柱子,垒砖头等。这种造出来的房子肯定是又丑又不坚固。如果这个房子的地基已经...

19510
来自专栏日常学python

用Python实现模拟登录正方教务系统抢课

最近学校开始选课,但是如果选课时间与自己的事情冲突,这时候就可以使用Python脚本自助抢课,抢课的第一步即是模拟登录,需要模拟登录后保存登录信息然后再进行操作...

37200
来自专栏沃趣科技

ASM 翻译系列第十四弹:ASM Internal Rebalancing act

原作者:Bane Radulovic 译者: 吴 栋 审核: 魏兴华 DBGeeK社群联合出品 Rebalancing act 在ASM中,每...

38150
来自专栏FreeBuf

TP-link TL-WR840N系列路由器存在CSRF漏洞,可修改任意配置(含POC测试过程)

免责声明:本站提供安全工具、程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! TP-Link路由器在国内的用户量很大,最近国外安全研究者发现TP-...

293100

扫码关注云+社区

领取腾讯云代金券