前端通信:ajax设计方案(二)---集成轮询技术

阅读 696
收藏 15
2018-01-29
原文链接:www.cnblogs.com
前端通信:ajax设计方案(二)---集成轮询技术 - 仲强 - 博客园

半个诗人

前端通信:ajax设计方案(二)---集成轮询技术

上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工通道暂时不涉及

一些概念:

  短轮询:浏览器通过循环或者setTimeout方法,每隔一段时间往后台发送一次请求,无线循环

  长轮询:不停的向后台请求数据,但是后台如果检测不到数据变动,就会将这个请求挂掉。如果检测到数据变动,就会响应这个请求变动数据

区别概念:

  长连接:在进行http数据传输的时候,在数据传输层一直开着一个TCP通道,所有请求资源文件都是通过复用这个通道去请求数据,有超时时间

  短连接:如果http进行的短连接,即每次浏览器发送请求,都会创建TCP通道,然后传输完成了再进行销毁,重复操作,消耗很大

 

主要区别:

  1. http的长短轮询,通过代码层,向后台请求数据。
  2. Http的长短连接,实际上就是TCP协议传输层是否复用一个TCP协议。

 

主要业务方面:及时性比较高的应用(web端聊天系统),或者需要后台等待响应的应用(比如付款,等待完成响应)。

关键代码:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 /*     * 长轮询的实现     *   a. 业务上只需要得到服务器一次响应的轮询     *   b. 业务上需要无限次得到服务器响应的轮询     *     *   param: url   请求接口地址     *          data  请求参数     *          successEvent    成功事件处理     *          isAll           是否一直请求(例如,等待付款完成业务,只需要请求一次)     *          timeout         ajax超时时间     *          timeFrequency   每隔多少时间发送一次请求     *          error           错误事件     *          timeout         超时处理     * */    longPolling:function(url,data,successEvent,isAll,timeout,timeFrequency,errorEvent,timeoutEvent){        var ajaxParam ={            time:timeout,            type:"post",            url:url,            data:data,            async:false,            success:function(date){                successEvent(data);                var timer = setTimeout(                    function(){                        tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent);                    },timeFrequency);                //业务需求判断,是否只需要得到一次结果                if (!isAll) clearTimeout(timer);            },            //如果走了error说明该接口有问题,没必要继续下去了            error:errorEvent,            timeout:function(){                timeoutEvent();                setTimeout(function (){                    tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent)                },timeFrequency);            }        };        ajax.common(ajaxParam);    }

 

考虑到业务需求,集成了一次isAll参数有2个意义

  1. 聊天系统会要一直需求轮询,不间断的向后台使用数据,所以isAll = true
  2. 等待付款业务只需要得到后台一次响应是否支付成功,所以isAll = false

 

稍微提及一下遇到的一些问题:

问题:

?
1 2 3 4 success:function(date){      successEvent(data);    //此处使用递归,不停递归自己      tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent); },       

浏览器报错:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Uncaught RangeError: Maximum call stack size exceeded.     at Object.common (ajax-1.2.js:202)     at Object.longPolling (ajax-1.2.js:280)     at Object.success (ajax-1.2.js:266)     at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)     at Object.common (ajax-1.2.js:202)     at Object.longPolling (ajax-1.2.js:280)     at Object.success (ajax-1.2.js:266)     at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)     at Object.common (ajax-1.2.js:202)     at Object.longPolling (ajax-1.2.js:280) common @ ajax-1.2.js:202 longPolling @ ajax-1.2.js:280 success @ ajax-1.2.js:266 xhr.onload @ ajax-1.2.js:160 (anonymous) @ index.html:42 (anonymous) @ index.html:43   ajax-1.2.js:202 Uncaught RangeError: Maximum call stack size exceeded.     at Object.common (ajax-1.2.js:202)     at Object.longPolling (ajax-1.2.js:280)     at Object.success (ajax-1.2.js:266)     at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)     at Object.common (ajax-1.2.js:202)     at Object.longPolling (ajax-1.2.js:280)     at Object.success (ajax-1.2.js:266)     at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)     at Object.common (ajax-1.2.js:202)     at Object.longPolling (ajax-1.2.js:280)

 

英文解释:

超出最大调用堆栈大小。

问题原因:

递归调用过多导致的栈溢出问题说明

问题解释:

函数调用的参数是通过栈空间来传递的,在调用过程中会占用线程的栈资源。而递归调用,只有走到最后的结束点后函数才能依次退出,而未到达最后的结束点之前,占用的栈空间一直没有释放,如果递归调用次数过多,就可能导致占用的栈资源超过线程的最大值,从而导致栈溢出,导致程序的异常退出。js可以调用自身,这里不停的调用longPolling方法,在方法里面不停的调用自己,导致GC(垃圾回收)一直不释放,越来越大,导致资源超过最大上限,直接崩溃。然后级联一层一层的抛出崩溃信息

解决方案:

使用settimeout解决该问题

方案解释:

因为Javascript是单线程的,有个排队的处理队列,所以settimeout相当于有一个计时器,不停的向这个队列每隔一段时间塞进一个处理事件。因为这样,相当于longPolling方法每次都走完了,GC就将该方法的资源释放了,然后再执行,再释放。

 

代码已集成github:https://github.com/GerryIsWarrior/ajax      点颗星星 是我最大的鼓励,下一步研究ajax的上传文件技术(H5的)

 

PS:对于轮询这个技术,虽然平时用的少,但是在一些特殊的业务场景能发挥很大的作用。在浏览器,没有完完全全支持H5的境况下,这个还是要考虑的。毕竟H5的那些webSocket还是需要H5兼容的。而且,研究这一块,对原声js,和计算机的一些底层技术还是很有帮助的,像堆栈溢出,不仅仅是前端,后端也会遇到。这样的话,自己底层更夯实,对于以后上层的发展也会有更好的增长。

 

posted on 2016-12-07 10:00 仲强 阅读(1095) 评论(10) 编辑 收藏

评论

#1楼 2016-12-07 10:17 冯建锋  

哥们,看着好费劲啊 支持(0)反对(0) http://pic.cnblogs.com/face/103373/20171221171322.png   

#2楼[楼主] 2016-12-07 10:26 仲强  

@ 冯建锋
哪里费劲?我来改下,是排版 还是啥的? 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png   

#3楼 2016-12-07 10:35 白云随风  

SignalR 直接都帮 你解决了,服务器端还稳定! 支持(0)反对(0) http://pic.cnblogs.com/face/u57741.jpg?id=27150616   

#4楼[楼主] 2016-12-07 10:47 仲强  

@ 白云随风
看了下,哈哈。我是前端,纯研究一些技术的。网上现成的框架多的是,有时候用人家东西,就想看看怎么实现的底层是什么。.NET我都不用好长时间了,哈哈 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png   

#5楼 2016-12-07 11:57 小不了  

推荐!
楼主,还是我。能转吗?跟上次一样。哈哈 支持(0)反对(0)   

#6楼 2016-12-07 12:07 冯建锋  

@ 仲强 错别字 支持(0)反对(0) http://pic.cnblogs.com/face/103373/20171221171322.png   

#7楼[楼主] 2016-12-07 13:47 仲强  

@ 小不了
可以 注明出处就好了 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png   

#8楼[楼主] 2016-12-07 13:48 仲强  

@ 冯建锋
可能有时候 打字太快了 麻烦指出来 我修正一下 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png   

#9楼 2016-12-08 08:32 寒@鹏  

不错 不过现在不用这了。可以学习 支持(0)反对(0) http://pic.cnblogs.com/face/28349/20171208085716.png   

#10楼[楼主]3575336 2016/12/8 9:04:31 2016-12-08 09:04 仲强  

@ 寒@鹏
嗯嗯 主要就是研究的技术实现的设计思路和底层机制,包括遇到的一些问题。毕竟现在H5已经大行其道了,不过有时候为了兼容低版本还是要考虑到的 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png    刷新评论刷新页面 返回顶部 注册用户登录后才能发表评论,请 登录注册访问网站首页。 【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018!
【腾讯云】小程序普惠节精美模板1元起
h3bpm 活动 最新IT新闻:
· 乐视网复牌第二日再跌停 逾800万手卖单排队出逃
· 知名80后创业者茅侃侃离世 家中开煤气自杀
· 支付宝今年香港上市?马云终于发话了!
· 马云达沃斯论坛谈全球贸易:贸易不是武器,而是解决方案
· 两家机构数据显示:小米超三星 成印度手机老大
» 更多新闻... 阿里云C2-1208 最新知识库文章:
· 领域驱动设计在互联网业务开发中的实践
· 步入云计算
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
» 更多知识库文章...

导航

公告

昵称:仲强
园龄:2年5个月
粉丝:73
关注: 0 +加关注
< 2018年1月 >
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3
4 5 6 7 8 9 10

统计

  • 随笔 - 58
  • 文章 - 0
  • 评论 - 209
  • 引用 - 0

搜索

 

常用链接

我的标签

随笔分类

随笔档案

积分与排名

  • 积分 - 32332
  • 排名 - 11378

最新评论

阅读排行榜

评论排行榜

推荐排行榜

Powered by:
博客园
Copyright © 仲强
评论