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

简介: 快速学习数据预处理﹣系统监控 web 界面﹣实时流量转发数据来源
+关注继续查看

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

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


数据预处理﹣系统监控 web 界面﹣实时流量转发数据来源


内容介绍:

一、实时流量转发数据来源代码介绍

二、前端展示


一、实时流量转发数据来源代码介绍

之前学习了系统功能运行情况,分析了代码运行,今天来学习第二个,第二个里面有一个定时的运行的周期。因为实时流量转发情况数据是不断刷新的,每隔60秒刷新一次

setInterval ( systemMonitorIndex . loadFlows , timeout :60000);

往下找到实时流量转发情况代码,也就是实时流量转发的数据来源。上面几行的代码是一些参数的设置,option 往下的 tooltip 及以下就是实时流量转发

image.png

再往后会出现 ajax,option 是 ext 可以直接进行数据填充,数据就存在于 ajax 的 systemMonitoring 里面。通过ajax 就可以找到数据的来源,复制 getRealTimeTraffid 到搜索框就找到了这个实时流量转发情况。

下面来看一下曲线图的来源,

*获取实时流量转发情况

@ RequestMapping ( value ="/ getRealTimeTraffic ", method = RequestMethod . PosT )

 @ResponseBody 

 public Map < String ,0bject> getRealTimeTraffic ( HttpServletRequest request ){

Map < String , object > map = new HashMap <~>();

try {

/ *

* mapS . put (" time ", endTimeList );

mapS . put (" value ", sourceCountList ); 

mapS . put (" sum ", currFlowSum );

* /

map = TrafficUtil . getForwardInfo ( minutes :-20, Constants . CSANTI _ MONITOR _ DP );

 catch ( Exception e ){

//Т000: handLe exception 

System . out . println ( e . getStackTrace ()); Logger . info 

( e .getMessage ()); 

 return map ;

第一个方法用 map,往后看有一个 TrafficUtil 传了一个-20和一个前缀,进入这个方法:int minutes 是-20,key 是前缀,数据又被传到了 getTrafficInfoByMinute 这个方法里面,进入这个方法发现前缀被塞到了 strFlage 这个方法。这个方法是以 strFlage 为前缀,传递到keys ( jedisCluster , pattern : strFlage +“*”)方法里面,keys 前面有一个初始化的集群,在这个集群里,以strFlage为前缀加一个*,就可以获取所有的节次点keys获取所有以 dp 开头的 key,全部获取过来,添加到keys里面并进行了返回,key遍历每一个,每一个节次点 get key,get key 就是拿到数据。数据拿到后把value又转化成了 jsonVO 的 class。把key设置一下,所有的数据就都有了,添加到 jsonVO 里面并返回,返回后就获得了多个 jsonVOs,这里面拿到的是所有的数据转化成 jsonVO 的结果。

public static List < JsonVo > getTrafficInfoByMinute ( int minutes , String key ){

// redis 内所有的匹配上的数据

List < JsonVo > jsonVos = trafficInfo ( key ); List < JsonVo > sList = new ArrayList <~>();

//获取当前时间

string timeE= TimeUtil . getCurrTime ();

//获取 minutes 分钟前的时间

String timeS = TimeUtil . getTimeByMinute ( TimeUtil . yyyy _ MM _ DDH Н24miss( timeE ), minutes );

//选取 minutes 分钟内的数据

for ( JsonVo jsonVo : jsonVos ){

//比较时间大小,并对返回 fint 值做判断

int i = jsonVo . getEndTime (). compareTo ( times ); int j =

timeE . compareTo ( jsonVo . getEndTime ()); if ( i > o && j >0){

sList . add ( jsonvo );

return sList ;

jsonVO 再往后遍历,刚刚的-2也就是两分钟之前,判断它是在两分钟之前,两分钟之后和当前时间性之前,也就是两分钟之内,而现在传过来的只是-20,-20是20分钟之前和当前时间,这20分钟内依然是旧的对比,依然大于零。也就是数据的时间大于20分钟之前并且小于当前,也就是说它在20分钟之内,然后把它添加进来sList里面,然后把sList return 返回。返回到 List < JsonVo > jsonos = getTrafficInfoByMinute ( minutes , key );这个就是我们20分钟之内的而不是2分钟。曲线图中展示的也就是20分钟的数据了。

下面的 endTimeList 还有 sourceCountList 这两个,从字面理解是来存储结束时间,sourceCount 总数的。

List < Jsonvo > jsonVOs = getTrafficInfoByMinute ( minutes , key ); 

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

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

有了20分钟的数据,接着往下看,

//对 list 集合排序

float currFlowSum =0;

Collections . sort ( jsonVOs ); 

for ( JsonVo jsonVo : jsonVos ){

String endTime = jsonVo . getEndTime ();

String sourceCount = jsonVo . getSourceCount (); endTimeList .

add ( endTime );

sourceCountList . add ( sourceCount );

currFlowSum += Float . valueof ( jsonVo . getSourceCount ());

mapS . put (" time ", endTimeList );

mapS . put (" value ", sourceCountList ); 

mapS . put (" sum ", currFlowSum );

return maps 

先定义了一个数值,Flow 类型的,数值是零,调用了 sort 方法,把之前调用的20分钟内的数据排序,然后是遍历20分钟内的数据,获得每一个。GetendTime 就是之前的 jsonVO,jsonVO 里面有结束时间,结束时间就是数据中的endTime。

数据遍历出排序以后,遍历出其中的每一个结束世界,就得到了结束时间。把结束时间添加到 endTimeList,endTimeList 就是存储结束时间的一个集合。如果结束时间有十几或者二十几个就会添加到这个集合里面。

再往下看 get sourceCountList 中的 sourceCount 就是我们的总数,每个数据中的总数,总数获取过来以后拿到的结果添加到了 sourceCountList 里面,这个结果记录每个 rdd 里面最终的数据总数。

再往下 currFlowSum 是定义了一个Float类型的变量,getSourceCount 是我们记录的每个数据的数量后变成 Float 类型然后做了一个+=,做了一个数据总数的记录,对数据总数做了一个计算。currFlowSum += Float . valueof ( isonvg . getSourceCount ());

这里面分装了两个 list 和一个总数。

再往下看maps,就是我们最初的 map,

public static Map < String , Object > getForwardInfo ( int minutes , String key )

maps 定义了一个 map 类型,key 是 String,value 是 Object 类型,然后 maps 添加数据,key 是 time 是 endTimeList,就是一个存储了很多结束时间的 list,把它作为一个 value 放到 maps 里面。第二个是 value 是sourceCountList,这个就是刚刚查出来的每个 RDD 的总数的集合,吧 value 作为 key,集合作为 value 存进去。

还有一个 sum,sum 是算出的总和。

综上maps里面存储的是数据结束时间的 list,还有数据的 list,以及总和。

Maps 返回可以回到

public static Map < String , Object > getForwardInfo ( int minutes , String key )

Map 再回来,这里面有说明 maps . put 的是结束时间和结束时间的list,value 和数据的 list 以及总和。

mapS . put (" time ", endTimeList );

mapS . put (" value ",sourceCountList );

mapS . put (" sum "currFlowSum )

然后再把 map 返回,返回就回到了 ajax 里面,也就是下面代码中的 date:

success : function ( deita ){

sum = data . sum ;

if ( data !=nul1){

option . XAxis []. setData ( data . time ); 

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

myChart . setoption ( option , true );

date 就是刚刚的 map,封装的 map,包含那三个值的 map。然后获取 date 里面的 time,也就是结束时间的 list,结束时间的list获取到后给 setDate 的x 横坐标,也就是图表当中的横坐标。然后下面的 date value,value 是记录的每个批次 RDD 的总数,RDD 里面数据的总数,数量获取到后给了 series,这个值就是维度表里面的y轴,横坐标是时间上面是数值,然后后面就把数据给设置进去了 myChart 设置进去,设置完成后整个代码就完成了。这个也就是我实时流量转发从后台到前台的过程。


二、前端展示

接下来运行一下这个程序,同时爬虫也启动,看一下效果:

image.png

可以看到横坐标出现了时间,纵坐标看上图红点标有十二。

以上就是调用 ajax 到后台来读取数据,这个过程和前边类似,先到前边数据把所有 key 拿到,然后再去 get key 对应的数据,拿到后转化成 jsonVO,获取到 jsonVO 后再去把20分钟内的数据过滤出来,对其进行排序,排完序后再把相应的值截取出来,塞给相应的 list,然后返回。

以上就是实时流量转发从后台到展示的全过程。

相关文章
|
25天前
|
Java Docker 容器
美团大牛精心整理SpringBoot学习笔记,从Web入门到系统架构
近期慢慢复工,为了准备面试,各路码友们都开始磨拳擦脚,背面试题、知识点。小编最近得一良友赠送了一份关于SpringBoot的学习笔记,简直不要好用,理论解析言简意赅,每一步操作都有图片展示。这么好的东西肯定不能私藏,为了感谢大家在2023年里的支持,我现在将这份笔记赠送给大家,祝大家前程似锦,Offer不断!
|
1月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-1
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-1
18 0
|
3月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-1
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-1
541 0
|
3月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端学习-本章总结-下一步计划1
前端学习笔记202304学习笔记第八天-web前端学习-本章总结-下一步计划1
165 0
|
3月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端学习-写架构设计文档1
前端学习笔记202304学习笔记第八天-web前端学习-写架构设计文档1
192 0
|
3月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端学习-数据流转关系图2
前端学习笔记202304学习笔记第八天-web前端学习-数据流转关系图2
133 0
|
3月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端学习-数据流转关系图1
前端学习笔记202304学习笔记第八天-web前端学习-数据流转关系图1
143 0
|
3月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-2
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-2
103 0
|
3月前
|
机器学习/深度学习 前端开发
前端学习笔记202304学习笔记第八天-web前端学习-深度学习分析2
前端学习笔记202304学习笔记第八天-web前端学习-深度学习分析2
133 0
|
3月前
|
前端开发
前端学习笔记202304学习笔记第八天-web前端学习-作品数据结构设计2
前端学习笔记202304学习笔记第八天-web前端学习-作品数据结构设计2
122 0
推荐文章
更多