备案 控制台
开发者社区 开发与运维 文章 正文

开发分布式网络监控分析之前端ajax展现那些事

简介:

周六自己在家甚是无聊,看到朋友们在讨论分布式监控分析,要的效果是 阿里测,17ce那种形式的,想查询监控啥的时候,在一个页面上能看到所以监控点提供的数据。比如,我想要查询针对一个url的get,dig数据。在这边直接采用zabbix、nagios的数据不太合理,因为我想要是给客服和客户用的界面。 像zabbix这样,咱们只能是提前先配置好。




以前做过类似的全网监控检测,但是做的有些简陋,但也和这次聊的话题不一样,有兴趣的朋友可以看看以前的我写的关于大屏幕开发的文章。  http://rfyiamcool.blog.51cto.com/1030776/1302398


本来以为不算难的东西,只要我从前端把你要查询的节点数据给后端,然后用table展现不就行了。 自己写demo的时候,遇见了不少的问题。


真正做的时候,我发现浏览器是有线程并发限制的,firefox是6个,chrome也是6个,ie 6/7 是2个吧 。ie8 才是6个。


wKiom1M_YDfAvKUtAADdcq2q7kM852.jpg


firefox的修改线程的方式,这里是告诉大家,这东西是可以改的。 但是对于客户来说,你不能老让他改呀。  

1
2
3
4
5
6
// if network.http.keep-alive is true, and if NOT connecting via a proxy, then
pref( "network.http.m camerabagss.us a x-persistent-connections-per-server" 6 );
// if network.http.keep- camerabagss.us a live is true,  camerabagss.us a nd if connecting vi camerabagss.us a   camerabagss.us a  proxy, then  camerabagss.us a
// new connection will only be  camerabagss.us a ttempted if the number of  camerabagss.us a ctive persistent
// connections to the proxy is less then m camerabagss.us a x-persistent-connections-per-proxy.
pref( "network.http.max-persistent-connections-per-proxy" 8 );



一开始我的做法是、从这个页面确定用户要查询的监控节点。然后each遍历数据,ajax 异步执行。但这个时候,我前面说的线程数超过6个后,后面的任务会堵塞,这个堵塞会总是浏览器的崩溃。  

wKiom1NDbqaTeWN-AAQaf1WjEUY073.jpg


不能让用户改线程数,不改的话,浏览器会卡掉的。不知道用websocket的方式,能不能突破浏览器的限制,以前做websockek都是分段提供的数据,一下子超过6条的堵塞数据,还真没有尝试过。


这个是刚才写的例子,li模拟了100个,结果很很卡。数据的返回是每次6个 。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type= "text/javascript" >
$(document).ready( function (){
           $( "[ id = nima ]" ).click( function (){
                 $( "[ id =kk] li" ). each ( function (){
  //                   alertify.log($(this).text())
                          zhi=$( this ).text();
                          $.ajax({
                              type:  "POST" ,
                              url:  "/queue" ,
                              data : { 'key' :zhi},
                              async: true ,
                              error:  function (){
                                      alert( 'nima' );
                              },
                              success:  function (data,status){
                                      alertify.log(data);
                              }
                          });
                                                                                                                                                                                                                                                                                                                                                                                                              
                 });
            });
   });
</script>


原文: http://rfyiamcool.blog.51cto.com/1030776/1390890

wKioL1M_Yi2xSZR3AAENXVNzDYs872.jpg




这个时候看了下别人的做过,他们都是把压力放到了后端。也就是说,我从前边发出了一个请求后,我会每隔一段时间去访问后端的接口,然后把数据渲染后页面上,这里会做相应的判断,已经展现的数据,我就不重复展现了,还没有展现的我继续渲染页面。


wKioL1M_aOHitBqYAANeP0fKZ7k761.jpg


这个是后端接口返回的json数据。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{ "url" : "www.youku.com" , "host" : "www.youku.com" , "srcip" : "" , "tid" : "201404_f5d00f83f4ba8ab6fab0df23fc8823a4" , "pre" : "201404" , "type" : 1 , "taskstatus" : "2" , "teststatus" : 1 , "message" : "" , "num" : "5" , "num2" : "5" ,"
xmlfile ":" "," check_time ":" "," freshdata ":{3:{" linkname ":" "," link ":" "," name ":" 上海市电信 "," isp ":" 电信 "," view ":" 上海市 "," sid ":" 3 "," SrcIP ":{" srcip ":" 101.227 . 10.19 "," ipfrom ":" 上海市 电信 "}," IP ":" 61.172 . 249.96 "," HttpCode ":" 200 "," T
otalTime ":" 0 .011s "," NsLookup ":" 0 .001s "," ConnectTime ":" 0 .001s "," downtime ":" 0 .008s "," FileSize ":" 62 .13KB "," realsize ":" 62 .13KB "," speed ":" 7 .349MB\/s "," HpptHead ":" HTTP\/ 1.0  200  OK\r<br>Expires: Sat,  05  Apr  2014  01 : 26 : 18  GMT\r<br>Cache-Control: max-age= 120 \r<br>L
ast-Modified: Sat,  05  Apr  2014  01 : 23 : 56  GMT\r<br>ETag: \" 4100116602 \"\r<br>Content-Encoding: deflate\r<br>Content-Type: text\/html\r<br>Vary: Accept-Encoding\r<br>Content-Length:  63621 \r<br>Connection: close\r<br> Date : Sat
05  Apr  2014  01 : 24 : 18  GMT\r<br>Server: jinjingwww01 "},32:{" linkname ":" "," link ":" "," name ":" 厦门市电信 "," isp ":" 电信 "," view ":" 福建省 "," sid ":" 32 "," SrcIP ":{" srcip ":" 183.61 . 116.212 "," ipfrom ":" 广东省广州市 电信 "}," IP ":" 222.76 . 219.7 "," HttpCode ":" 200 "
, "TotalTime" : "0.096s" , "NsLookup" : "0.001s" , "ConnectTime" : "0.018s" , "downtime" : "0.077s" , "FileSize" : "62.13KB" , "realsize" : "62.13KB" , "speed" : "805.166KB\/s" , "HpptHead" :"HTTP\/ 1.0  200  OK\r<br>Expires: Sat,  05  Apr  2014  01 : 26 : 18  GMT\r<br>Cache-Control: max-age= 120 \
r<br>Last-Modified: Sat,  05  Apr  2014  01 : 23 : 56  GMT\r<br>ETag: \" 1533679214 \"\r<br>Content-Encoding: deflate\r<br>Content-Type: text\/html\r<br>Vary: Accept-Encoding\r<br>Content-Length:  63621 \r<br>Connection: close\r<br> Date : Sat,  05  Apr  2014  01 : 24 : 18  GMT\r<br>Server:
gzwww5 "},665:{" linkname ":" "," link ":" "," name ":" 安徽移动 "," isp ":" 移动 "," view ":" 安徽省 "," sid ":" 665 "," SrcIP ":{" srcip ":" 221.181 . 195.121 "," ipfrom ":" 江苏省常州市 移动 "}," IP ":" 120.209 . 138.81 "," HttpCode ":" 200 "," TotalTime ":" 0 .052s "," NsLookup ":" 0 .001s "," ConnectTime ":" 0 .008s "," d
owntime ":" 0 .043s "," FileSize ":" 62 .13KB "," realsize ":" 62 .13KB "," speed ":" 1 .401MB\/s "," HpptHead ":" HTTP\/ 1.0  200  OK\r<br>Expires: Sat,  05  Apr  2014  01 : 26 : 18  GMT\r<br>Cache-Control: max-age= 120 \r<br>Last-Modified: Sat,  05  Apr  2014  01 : 23 : 56  GMT\r<br>ETag: \" 1952045240 \"\r<br
>Content-Encoding: deflate\r<br>Content-Type: text\/html\r<br>Vary: Accept-Encoding\r<br>Content-Length:  63621 \r<br>Connection: close\r<br> Date : Sat,  05  Apr  2014  01 : 24 : 18  GMT\r<br>Server: nj_mob_www_3 "},250:{" linkname ":" "," link ":" "," name ":" 滁州市双线 "," isp ":" 电信联通 "," view ":" 安徽省 "," sid ":" 250
"," SrcIP ":{" srcip ":" 116.211 . 115.228 "," ipfrom ":" 湖北省 电信 "}," IP ":" 27.54 . 247.9 "," HttpCode ":" 200 "," TotalTime ":" 0 .132s "," NsLookup ":" 0 .072s "," ConnectTime ":" 0 .014s "," downtime ":" 0 .046s "," FileSize ":" 62 .13KB "," realsize ":" 62 .13KB "," speed ":" 1 .327MB\/s "," HpptHead ":" HTTP\/ 1.0  200  OK\r<br>Expires: Sat,  05  A
pr  2014  01 : 26 : 18  GMT\r<br>Cache-Control: max-age= 120 \r<br>Last-Modified: Sat,  05  Apr  2014  01 : 23 : 56  GMT\r<br>ETag: \" 4217557738 \"\r<br>Content-Encoding: deflate\r<br>Content-Type: text\/html\r<br>Vary: Accept-Encoding\r<br>Content-Length:  63621 \r<br>Connection: close\r<br> Date : Sat,  05  Apr  2014  01 : 2
4 : 18  GMT\r<br>Server: whwww5 "},853:{" linkname ":" "," link ":" "," name ":" 东莞市电信 "," isp ":" 电信 "," view ":" 广东省 "," sid ":" 853 "," SrcIP ":{" srcip ":" 183.61 . 116.213 "," ipfrom ":" 广东省广州市 电信 "}," IP ":" 121.12 . 169.41 "," HttpCode ":" 200 "," TotalTime ":" 0 .037s "," NsLookup ":" 0 .003s "," ConnectTime ":" 0 .006s "," downtime ":" 0
.028s "," FileSize ":" 62 .13KB "," realsize ":" 62 .13KB "," speed ":" 2 .187MB\/s "," HpptHead ":" HTTP\/ 1.0  200  OK\r<br>Expires: Sat,  05  Apr  2014  01 : 26 : 18  GMT\r<br>Cache-Control: max-age= 120 \r<br>Last-Modified: Sat,  05  Apr  2014  01 : 23 : 56  GMT\r<br>ETag: \" 1332352621 \"\r<br>Content-Encoding: deflate\r<br>Content-Type:
text\/html\r<br>Vary: Accept-Encoding\r<br>Content-Length:  63621 \r<br>Connection: close\r<br> Date : Sat,  05  Apr  2014  01 : 24 : 18  GMT\r<br>Server: gzwww6"}},
"backdata" :[], "accuracy_backdata" :[], "time_backdata" :[], "speed_backdata" :[], "average_data" :[], "ajax_over" : 0 , "port" : 80 }



原文: http://rfyiamcool.blog.51cto.com/1030776/1390890

总觉得用saltstack也是可以试试的,有时间的朋友可以做些测试。  不用太复杂,用他的模块,提供url的参数就可以了。






 本文转自 rfyiamcool 51CTO博客,原文链接:http://blog.51cto.com/rfyiamcool/1390890 ,如需转载请自行联系原作者

技术小胖子
目录
相关文章
梦回故国楼台梦
|
16天前
【计算巢】网络拓扑结构的比较分析:星形、环形与总线型
【5月更文挑战第31天】本文介绍了网络的三种常见拓扑结构:星形、环形和总线型。星形拓扑易于管理和维护,信息传递高效;环形拓扑结构简单,信息环状传递,但环中断可能导致网络瘫痪;总线型成本低、扩展易,但总线故障会全局影响。理解其特点有助于根据需求选择合适的网络结构。
梦回故国楼台梦
31 1
小白学大数据
|
18天前
|
数据采集 XML 数据格式
Haskell网络爬虫:视频列表获取案例分析
Haskell网络爬虫:视频列表获取案例分析
小白学大数据
40 0
梦回故国楼台梦
|
13天前
|
机器学习/深度学习 安全 网络安全
【计算巢】数字取证:追踪和分析网络犯罪的方法
【6月更文挑战第4天】本文探讨了数字取证在网络安全中的关键作用,通过Python编程展示如何分析网络日志以发现线索。数字取证利用科学方法收集、分析电子数据,以应对黑客入侵、数据泄露等网络犯罪。文中提供的Python代码示例演示了从服务器日志中提取IP地址并统计访问次数,以识别异常行为。此外,实际的数字取证还包括数据恢复、恶意软件分析等复杂技术,并需遵循法律程序和伦理标准。随着技术发展,数字取证将更有效地保障网络空间的和平与秩序。
梦回故国楼台梦
24 5
艾尼麻麻
|
13天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
艾尼麻麻
20 2
郏国上
|
26天前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
郏国上
23 0
ZShiJ
|
1月前
|
网络协议 Java 网络安全
【计算机网络】—— Socket通信编程与传输协议分析
【计算机网络】—— Socket通信编程与传输协议分析
ZShiJ
34 0
Geek极安云科
|
1月前
|
安全 网络安全 数据库
01-Web 网络安全纵观与前景分析
01-Web 网络安全纵观与前景分析
Geek极安云科
34 8
拓端数据部落
|
1月前
|
机器学习/深度学习 自然语言处理 运维
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集2
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集
拓端数据部落
44 0
拓端数据部落
|
1月前
|
机器学习/深度学习 存储 数据采集
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集1
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集
拓端数据部落
48 1
拓端数据部落
|
1月前
|
机器学习/深度学习 监控 数据可视化
R语言SOM神经网络聚类、多层感知机MLP、PCA主成分分析可视化银行客户信用数据实例2
R语言SOM神经网络聚类、多层感知机MLP、PCA主成分分析可视化银行客户信用数据实例
拓端数据部落
35 1

热门文章

最新文章

  • 1
    《MySQL 简易速速上手小册》第6章:MySQL 复制和分布式数据库(2024 最新版)
  • 2
    搞定了 6 种分布式ID,分库分表哪个适合做主键?
  • 3
    电子好书发您分享《使用云起实验室体验PolarDB分布式版》
  • 4
    Java从入门到精通:3.2.2分布式与并发编程——了解分布式系统的基本概念,学习使用Dubbo、Spring Cloud等分布式框架
  • 5
    分布式延时消息的另外一种选择 Redisson (推荐使用)
  • 6
    【Flink】Flink分布式快照的原理是什么?
  • 7
    人工智能平台PAI产品使用合集之如何在CPU服务器上使用PAIEasyRec进行分布式训练
  • 8
    如何本地搭建开源分布式任务调度系统DolphinScheduler并远程访问
  • 9
    分布式(计算机算法)
  • 10
    区块链技术原理及应用:深入探索分布式账本技术
  • 1
    【专栏:HTML 进阶篇】HTML 表单验证与 AJAX 交互
    13
  • 2
    【JavaScript技术专栏】JavaScript网络请求与Ajax技术
    21
  • 3
    【PHP开发专栏】jQuery与PHP实现Ajax通信
    34
  • 4
    【PHP 开发专栏】PHP 与 Ajax 交互开发
    24
  • 5
    AJAX 工作原理
    14
  • 6
    AJAX 简介
    32
  • 7
    JavaScript原生实现AJAX技术详解
    22
  • 8
    axios请求成功而$.ajax却不行排错
    17
  • 9
    创建AJAX五大基本步骤
    37
  • 10
    ajax相关属性的作用
    21
  • 相关课程

    更多
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • 网络管理者必知-2分钟了解新出台的《网络安全法》
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • Ajax入门
  • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的
  • 相关实验场景

    更多
  • 快速搭建移动端可视化看板
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 配置流程编排实现根据天气情况播放歌曲
  • Github实时数据分析与可视化
  • 1分钟SAE部署Web在线游戏
  • 通过云拨测对指定网页进行网页性能监测
  • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考

    深圳SEO优化公司海西百度关键词包年推广昌吉英文网站建设推荐焦作关键词排名包年推广推荐信阳百姓网标王推荐怀化百度标王扬州建设网站营口外贸网站建设公司十堰网络广告推广哪家好北京网站优化按天计费报价陇南网站推广哪家好龙华网站制作设计推荐鹰潭关键词按天收费三亚网站推广哪家好丹东网站优化哪家好黑河百度爱采购推荐宁波网站搭建推荐湖州至尊标王多少钱巴中关键词按天收费价格洛阳网站设计阜阳百度网站优化多少钱乌海营销网站哪家好阜阳百度网站优化排名推荐天水关键词按天计费价格来宾seo优化多少钱泰州企业网站制作报价莆田优化多少钱舟山网络广告推广价格丹竹头百搜标王哪家好酒泉网站优化按天计费公司中山网站设计模板多少钱歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

    深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化