数据预处理﹣系统监控 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,然后返回。

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

相关文章
|
14天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
32 3
|
1月前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
66 0
|
28天前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
78 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
10天前
|
移动开发 数据可视化 前端开发
可视化设计web界面的工具
有什么可视化设计web界面的工具
27 0
|
25天前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
47 5
|
11天前
|
消息中间件 监控 Kafka
Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面
随着大数据技术的发展,Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面,方便管理和监控 Kafka 集群。本文详细介绍了 Kafka Manager 的部署步骤和基本使用方法,包括配置文件的修改、启动命令、API 示例代码等,帮助你快速上手并有效管理 Kafka 集群。
34 0
|
23天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
74 0
|
25天前
|
存储 JSON 前端开发
JSON与现代Web开发:数据交互的最佳选择
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。
37 0
|
2月前
|
开发框架 JSON 缓存
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
在数字化浪潮推动下,RESTful API成为Web开发中不可或缺的部分。本文详细介绍了在Python环境下如何设计并实现高效、可扩展的RESTful API,涵盖框架选择、资源定义、HTTP方法应用及响应格式设计等内容,并提供了基于Flask的示例代码。此外,还讨论了版本控制、文档化、安全性和性能优化等最佳实践,帮助开发者实现更流畅的数据交互体验。
74 1
|
28天前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
24 0
下一篇
无影云桌面