数据预处理﹣系统监控 web 界面﹣各链路流量转发数据来源|学习笔记

简介: 快速学习数据预处理﹣系统监控 web 界面﹣各链路流量转发数据来源

开发者学堂课程【大数据实战项目:反爬虫系统(Lua+Spark+Redis+Hadoop框架搭建)第四阶段数据预处理﹣系统监控 web 界面﹣各链路流量转发数据来源】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/672/detail/11681


数据预处理﹣系统监控 web 界面﹣各链路流量转发数据来源


内容介绍:

一、各链路流量转发数据来源代码详解

二、前端展示


一、各链路流量转发数据来源代码详解

接下来看各链路流量转发情况,回到 Monitor 里面看到第三个代码loadSystqmFunction是爬虫加载情况,现在没有数据暂时先不看,然后接着看第四个,第四个就是各链路流量转发。同样也是每隔60秒刷新一次。

//初始化

init : function ({

systemMonitorIndex . loadSysteuF unctionInfo ();// systeaMonitorIndex .loadFlows();

systemMonitorIndex . LoadDiscernCondition ();

systemMonitorIndex . loadFlowTransmit ();

//refreshSystenlonitorFlag在comnonIndex . js 定义

1f( null mrefreshSystenMonitorFlag ){

setInterval( systemNonitorIndex .loadFloWs ,timeout:60000);

//定时60秒刷新一次

setInterval ( systemMonitorIndex .1oadFlowTransmit,

tineout :6000);//定时60秒刷新一次

refreshsystecMonitorFlag -" HAVE _ REFRESH ;

同样的这个程序也是一个 ext,往下我们看到 option 也是一个 ext,一直往下到结束,下面是一个 ajax 的请求:

请求调用的是 systemMonitoring 里面的 getRealTimeLinkTraffic 结构,然后来找:

找到后发现是在获取实时 各链路流量转发情况接下来看它是如何实现的,首先上面定义了一个 value 的 list 和一个key 的 list,

List < Object > valuelList = new ArrayList <~>);

List < String > keyList = new ArrayList <~>();

拆分一下一个是存储 value 的集合一个是 key 的集合,后面接了 maps 和 jsonVO,jsonVO 的结果如下:

public class Jsonvo implements comparable < JsonVo >, java . io . Serializable {

private string key ;// redis 系统内的 key

private String costTime ;//时间差任务运行时间( end - start )

private Map < String ,0bject> serversCountMap ;//链路统计中的结果 private String applicationId ;// appID

private String countPerMillis ;// speed

private string applicationUniqueName ;// appname private String endTime ;//任务运行结尾时间

private String sourceCount ;//一批次数据数据总量

返回来后接着往下看是 getTrafficInfoByMinute 方法,给了一个-20和一个前缀,进入方法里面:

public static List < JsonVo > trafficInfo ( String strFlage ){

JedisCluster jedisCluster = JedisConnectionUtil . getJedisCluster ();

Set < String > keySet = JedisConnectionUtil . keys ( jedisCluster , pattern : strFlage +"*");

List < JsonVo > jsonVOs = new ArrayList <~>();

try {

for ( String str : keySet ){

JsonVo jsonVO = new JsonVo ();

String value = jedisCluster . get ( str

jsonVO = JsonResolveUtil . resolveJson ( value );

if (nul1!= jsonVo ){

jsonVo . setKey ( str );

jsonVOs . add ( jsonvO );

catch ( Exception e ){

//ТOD0: handLe exception Logger . info ( e . getMessage ());

return jsonVOs ;

时间是-20,key是一个前缀。

拿取的是以 strFlage 作为前缀,有*,有 jedisCluster 集群,拿取所有的前缀,拿到所有的 key,然后去遍历每个key,获取所有的 value,所有的 value 转化成 jsonVO,然后设置 jsonVO 的 keys 然后添加到 jsonVOs 里面,这里面拿到的是所有以 DP 为前缀的 key 对应的数据转化成的 jsonVO,没有时间范围。

Set < String > keyset = JedisConnectionUtil . keys ( jedisCluster , patern : strFlage +"*");

里面就是所有的数据

接下来要做的就是 timeE 是-20,也就是20分钟前到当前,i和j要大于零,也就是说在这20分钟内如果有数据的话就把这20分钟内的数据拿过来,塞到我的 list 里面,塞过来以后返回,也就是说拿到了20分钟内的数据,再退回去:jsonVOs 就是20分钟内的数据,有了20分钟数据后,排序,排序后后面的内容就不一样了,先求了一下排完序后 list的大小,

假设 list 有五个数据,角标是零一二三四。size是5,如果5>0,命令一个 maps,jsonVO.get

这个 list get 的是4(以 size=5为例4=5-1),角标是零一二三四,四是最后一个,所以 get 的是最后一个,我们这个里面是获取出20分钟内的最后一个数据也就等于 size-1。

//取 List 集合最一条数据(即最新的一条数据)

// size =5个角标(01234)

int size = jsonVOs . size (); if ( size >0){

mapS = new HashMap ;

// jsonvo 20分钟内的最后一条数据

Jsonvo jsonVo = jsonVos . get (jsonV0s. size ()-1);

Map < String , object > serversCountMap = jsonVo . getServersCountMap ();

Set < String > keySet = serversCountMap . keySet ();

for ( String key : keySet ){

object value = serversCountMap · get ( key );

keyList . add ( key );

valuelList . add ( value );

mapS . put (" key ", keyList );

mapS . put (" value ", valuelList );

return mapS ;

最后一个拿到之后就 get seversCountMap,seversCountMap 数据里面有一个我们做的链路统计功能中的结果。在写的过程中 seversCountMap 是我们链路统计的结果:

image.png

标蓝的结果就是统计出来的,写到原来的程序里面,转化成 jsonVO,获取出来,这个 seversCountMap 就是它统计出来的 IP 和他对应的值。serversCountMap . keySet 就可以拿到所有的 key,因为我只有一个服务器所以现实的结果里面只有一个值,如果有多台服务器就是多个值。多个值 keySet 就会有多个,然后遍历每一个,serversCountMap.get,key是我的 IP192.168.100.160,serversCountMap 中 map 就是 value,key value get key,就是把9拿出来,也就是说这行 object value = serversCountMap . get ( key ); 就是为了把9拿出来。把9拿出来后添加到value的list,就是存储 value 的集合,这个集合添加的就是我从数据 redys 里面读过来的每一个20分钟数据当中 serversCount 里面 IP 对应的 value。

再往后添加 key,key 就是我们数据库读过来解析的IP,把IP截取出来添加到 keylist 里面,key 里面存储的就是链路统计中的 IP,value 存储的就是 IP 对应的值,存进来以后初始化的 maps 存储了一个key,然后 value 是 key 的list,value 存储的是 valu 的 list,也就是说我把我计算出来的 key 的 list 和 value 的 list 这两个 list 塞到 map 里面,然后把 map 返回。返回 maps 的这个方法就结束了。

// jsonvo 20分钟内的最后一条数据

Jsonvo jsonVo = jsonVOs . get ( jsonVOs . size ()-1);

Map < String , object > serversCountMap = jsonVo . getServersCountMap ();

Set < String > keySet = serversCountMap . keySet ();

for ( String key : keySet ){

object value = serversCountMap · get ( key );

keyList . add ( key );

valuelList . add ( value );

mapS . put (" key ", keyList );

mapS . put (" value ", valuelList );

return mapS ;

返回的话是返回到url,也就返回到 data 里面,data.value 中的 value 存储的就是 valuelist

Series 里面给的是值,key 是 IP,IP 的 list,IP 作为x轴,然后写到 myChart 里面,就是在展示的画面中横坐标应该是一个 IP,纵坐标是一个值 value。var url = ctx +'/ systemMonitoringVgetRealTimeLinkTraffic '; kingpoint . postData ( url , data : null , handle : function ( data ){  /*

*mapS . put (" key ", keyList )

mapS . put (" value ", valuel 话 t );

*/

if ( data !=nul1){

option . series []. setData ( data . value );

option . xAxis []. setData ( data . key );

mychart . setoption ( option , true );

});


二、前端展示

image.png

如上图横坐标是 IP,纵坐标是流量转换情况12,以上全部就是链路流量转发情况从后端到前端的大致情况。数据监控的三个模块就全都完成了。

相关文章
|
16天前
|
开发框架 JSON 缓存
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
在数字化浪潮推动下,RESTful API成为Web开发中不可或缺的部分。本文详细介绍了在Python环境下如何设计并实现高效、可扩展的RESTful API,涵盖框架选择、资源定义、HTTP方法应用及响应格式设计等内容,并提供了基于Flask的示例代码。此外,还讨论了版本控制、文档化、安全性和性能优化等最佳实践,帮助开发者实现更流畅的数据交互体验。
37 1
|
2天前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
8 0
|
1月前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
67 9
|
1月前
|
监控 前端开发 数据库连接
Zabbix 5.0 LTS的web界面安装及修改zabbix web管理员的默认密码
这篇文章是关于如何安装Zabbix 5.0 LTS的web界面以及如何修改Zabbix web管理员默认密码的教程。
83 1
|
1月前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
38 0
|
2月前
|
物联网 C# 智能硬件
智能家居新篇章:WPF与物联网的智慧碰撞——通过MQTT协议连接与控制智能设备,打造现代科技生活的完美体验
【8月更文挑战第31天】物联网(IoT)技术的发展使智能家居设备成为现代家庭的一部分。通过物联网,家用电器和传感器可以互联互通,实现远程控制和状态监测等功能。本文将探讨如何在Windows Presentation Foundation(WPF)应用中集成物联网技术,通过具体示例代码展示其实现过程。文章首先介绍了MQTT协议及其在智能家居中的应用,并详细描述了使用Wi-Fi连接方式的原因。随后,通过安装Paho MQTT客户端库并创建MQTT客户端实例,演示了如何编写一个简单的WPF应用程序来控制智能灯泡。
55 0
|
2月前
|
Java 数据库 API
JSF与JPA的史诗级联盟:如何编织数据持久化的华丽织锦,重塑Web应用的荣耀
【8月更文挑战第31天】JavaServer Faces (JSF) 和 Java Persistence API (JPA) 分别是构建Java Web应用的用户界面组件框架和持久化标准。结合使用JSF与JPA,能够打造强大的数据驱动Web应用。首先,通过定义实体类(如`User`)和配置`persistence.xml`来设置JPA环境。然后,在JSF中利用Managed Bean(如`UserBean`)管理业务逻辑,通过`EntityManager`执行数据持久化操作。
40 0
|
2月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
52 0
|
2月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
49 0
|
2月前
|
开发者 Java Spring
【绝技揭秘】掌握Vaadin数据绑定:一键同步Java对象,告别手动数据烦恼,轻松玩转Web应用开发!
【8月更文挑战第31天】Vaadin不仅是一个功能丰富的Java Web应用框架,还提供了强大的数据绑定机制,使开发者能轻松连接UI组件与后端Java对象,简化Web应用开发流程。本文通过创建一个简单的用户信息表单示例,详细介绍了如何使用Vaadin的`Binder`类实现数据绑定,包括字段与模型属性的双向绑定及数据验证。通过这个示例,开发者可以更专注于业务逻辑而非繁琐的数据同步工作,提高开发效率和应用可维护性。
57 0