数据预处理﹣系统监控 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,以上全部就是链路流量转发情况从后端到前端的大致情况。数据监控的三个模块就全都完成了。

相关文章
|
29天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
35 3
|
1月前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
90 0
|
1月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
89 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
55 5
|
26天前
|
消息中间件 监控 Kafka
Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面
随着大数据技术的发展,Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面,方便管理和监控 Kafka 集群。本文详细介绍了 Kafka Manager 的部署步骤和基本使用方法,包括配置文件的修改、启动命令、API 示例代码等,帮助你快速上手并有效管理 Kafka 集群。
41 0
|
1月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
95 0
|
1月前
|
存储 JSON 前端开发
JSON与现代Web开发:数据交互的最佳选择
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。
55 0
|
1月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
27 0
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
113 3
|
24天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
125 45
下一篇
无影云桌面