开发分布式网络监控分析之前端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 ,如需转载请自行联系原作者

相关文章
|
7月前
|
人工智能 安全 Java
智慧工地源码,Java语言开发,微服务架构,支持分布式和集群部署,多端覆盖
智慧工地是“互联网+建筑工地”的创新模式,基于物联网、移动互联网、BIM、大数据、人工智能等技术,实现对施工现场人员、设备、材料、安全等环节的智能化管理。其解决方案涵盖数据大屏、移动APP和PC管理端,采用高性能Java微服务架构,支持分布式与集群部署,结合Redis、消息队列等技术确保系统稳定高效。通过大数据驱动决策、物联网实时监测预警及AI智能视频监控,消除数据孤岛,提升项目可控性与安全性。智慧工地提供专家级远程管理服务,助力施工质量和安全管理升级,同时依托可扩展平台、多端应用和丰富设备接口,满足多样化需求,推动建筑行业数字化转型。
262 5
|
2月前
Vite使用svg-企业级开发(支持本地svg和网络svg渲染)
本教程介绍如何在Vite项目中集成SVG图标插件。首先安装`vite-plugin-svg-icons`,配置插件指向SVG图标目录,并注册全局组件。接着创建SVG图标组件,支持内部图标与外部图片展示。通过简单配置,即可在页面中灵活使用各类SVG图标,提升开发效率。
142 0
|
5月前
|
JSON 中间件 Go
Go 网络编程:HTTP服务与客户端开发
Go 语言的 `net/http` 包功能强大,可快速构建高并发 HTTP 服务。本文从创建简单 HTTP 服务入手,逐步讲解请求与响应对象、URL 参数处理、自定义路由、JSON 接口、静态文件服务、中间件编写及 HTTPS 配置等内容。通过示例代码展示如何使用 `http.HandleFunc`、`http.ServeMux`、`http.Client` 等工具实现常见功能,帮助开发者掌握构建高效 Web 应用的核心技能。
312 61
|
6月前
|
安全 JavaScript 前端开发
HarmonyOS NEXT~HarmonyOS 语言仓颉:下一代分布式开发语言的技术解析与应用实践
HarmonyOS语言仓颉是华为专为HarmonyOS生态系统设计的新型编程语言,旨在解决分布式环境下的开发挑战。它以“编码创造”为理念,具备分布式原生、高性能与高效率、安全可靠三大核心特性。仓颉语言通过内置分布式能力简化跨设备开发,提供统一的编程模型和开发体验。文章从语言基础、关键特性、开发实践及未来展望四个方面剖析其技术优势,助力开发者掌握这一新兴工具,构建全场景分布式应用。
638 35
|
5月前
|
开发者
鸿蒙仓颉语言开发教程:网络请求和数据解析
本文介绍了在仓颉开发语言中实现网络请求的方法,以购物应用的分类列表为例,详细讲解了从权限配置、发起请求到数据解析的全过程。通过示例代码,帮助开发者快速掌握如何在网络请求中处理数据并展示到页面上,减少开发中的摸索成本。
鸿蒙仓颉语言开发教程:网络请求和数据解析
|
5月前
|
监控 安全 网络协议
恶意软件无处逃!国内版“Manus”AiPy开发Windows沙箱工具,进程行为+网络传输层级监控! 头像 豪气的
NImplant.exe 是一款后渗透测试工具,可实现远程管理与持久化控制。其优点包括无文件技术、加密通信和插件扩展,但也存在被检测风险及配置复杂等问题。为深入分析其行为,我们基于 aipy 开发了 Windows 沙箱工具,针对桌面上的 NImplant.exe 进行多维度分析,涵盖进程行为、网络连接(如 TCP 请求、目标 IP/域名)、文件控制等,并生成传输层监控报告与沙箱截图。结果显示,aipy 工具响应迅速,报告清晰易读,满足分析需求。
|
6月前
|
消息中间件 缓存 算法
分布式开发:数字时代的高性能架构革命-为什么要用分布式?优雅草卓伊凡
分布式开发:数字时代的高性能架构革命-为什么要用分布式?优雅草卓伊凡
320 0
分布式开发:数字时代的高性能架构革命-为什么要用分布式?优雅草卓伊凡
|
11月前
|
数据管理 API 调度
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
HarmonyOS Next 是华为新一代操作系统,专注于分布式技术的深度应用与生态融合。本文通过技术特点、应用场景及实战案例,全面解析其核心技术架构与开发流程。重点介绍分布式软总线2.0、数据管理、任务调度等升级特性,并提供基于 ArkTS 的原生开发支持。通过开发跨设备协同音乐播放应用,展示分布式能力的实际应用,涵盖项目配置、主界面设计、分布式服务实现及部署调试步骤。此外,深入分析分布式数据同步原理、任务调度优化及常见问题解决方案,帮助开发者掌握 HarmonyOS Next 的核心技术和实战技巧。
1360 76
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
|
8月前
|
网络协议 物联网
VB6网络通信软件上位机开发,TCP网络通信,读写数据并处理,完整源码下载
本文介绍使用VB6开发网络通信上位机客户端程序,涵盖Winsock控件的引入与使用,包括连接服务端、发送数据(如通过`Winsock1.SendData`方法)及接收数据(利用`Winsock1_DataArrival`事件)。代码实现TCP网络通信,可读写并处理16进制数据,适用于自动化和工业控制领域。提供完整源码下载,适合学习VB6网络程序开发。 下载链接:[完整源码](http://xzios.cn:86/WJGL/DownLoadDetial?Id=20)
301 12
|
8月前
|
人工智能 运维 监控
领先AI企业经验谈:探究AI分布式推理网络架构实践
当前,AI行业正处于快速发展的关键时期。继DeepSeek大放异彩之后,又一款备受瞩目的AI智能体产品Manus横空出世。Manus具备独立思考、规划和执行复杂任务的能力,其多智能体架构能够自主调用工具。在GAIA基准测试中,Manus的性能超越了OpenAI同层次的大模型,展现出卓越的技术实力。