数据基础离线 5_第1页
数据基础离线 5_第2页
数据基础离线 5_第3页
数据基础离线 5_第4页
数据基础离线 5_第5页
已阅读5页,还剩41页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

任务6实时计算结果可视化课程导览01任务概述与准备明确任务目标、技术栈与整体架构02Flask服务器构建创建SocketIO服务器,实现数据推送03前端可视化开发ECharts图表配置与实时数据绑定04系统集成调试全链路联调,实时数据可视化展示05知识链接拓展Flask-SocketIO、Flask、ECharts基础知识任务概述与准备01任务描述与整体架构技术栈介绍与任务目标PyFlask·Python使用Python编写的轻量级Web应用程序框架JSECharts·JavaScript基于JavaScript的数据可视化图表库,提供直观、生动、可交互、可个性化定制的数据可视化图表★本任务将使用

Flask

ECharts

完成实时计算结果的可视化任务实施路径STEP1安装Flask→STEP2借助Flask-SocketIO将工单5.4中计算得到的数据推送到前端→STEP3编写前端代码进行实时呈现Flask服务器构建02工单基本信息工单编号6.1工单名称创建Flask服务器建议学时2

学时所属任务实时计算结果可视化环境要求已搭建好的实时计算环境工单说明利用

Flask-SocketIO

创建Flask服务器,实现以下流程:›››1安装Flask-SocketIO2创建服务器处理连接请求3从

Kafka

接收消费数据4将数据推送至前端学习目标知识目标掌握Flask-SocketIO的基本概念掌握Flask-SocketIO服务器与前端的通信机制技能目标能够安装Flask-SocketIO能够创建Flask-SocketIO服务器素养目标培养异步编程与线程安全的意识培养解决实际问题的能力工单6.1基本信息与目标安装Flask-SocketIO安装命令在

master

节点执行安装命令:✓安装成功后,核心依赖包括

Flask2.2.5

flask-socketio5.3.6$

pip3installflask-socketio核心依赖包版本依赖包版本Flask2.2.5flask-socketio5.3.6python-socketio5.9.0python-engineio4.7.1Werkzeug2.2.3Jinja23.1.2⚡Flask-SocketIO服务器的主要功能1创建

Kafka

消费者,实时接收数据流2定义路由和模板,处理HTTP请求并渲染前端页面3建立

Socket

连接,支持前后端双向实时通信4启动后台线程,将Kafka消费的数据推送至前端📁创建项目目录在

/opt/example

目录中新建文件夹

task6:$cd/opt/example$mkdirtask6$cdtask6🐍在task6文件夹中新建Python文件

task6_flask.py,该文件将实现上述全部功能。服务器功能与目录创建模块导入·线程锁·创建服务器PythonimportjsonfromflaskimportFlask,render_templatefromflask_socketioimportSocketIOfromthreadingimportLockfromkafkaimportKafkaConsumer#线程锁thread=Nonethread_lock=Lock()#创建服务器app=Flask(__name__)app.config['SECRET_KEY']='secret!'socketio=SocketIO(app)Kafka消费者·路由定义Python#创建Kafka消费者consumer=KafkaConsumer(bootstrap_servers=[

':9092'

],auto_offset_reset='latest',group_id='testgroup',enable_auto_commit=False,value_deserializer=lambdam:json.loads(m.decode('utf-8')))consumer.subscribe(topics=(['distopic']))#定义路由和模板@app.route('/')defindex():

returnrender_template('idx.html')!关键配置提醒:bootstrap_servers

中的

IP地址

需要更换成实际使用的服务器地址服务器创建核心代码事件处理与数据推送server.py—SocketIO事件处理与后台推送线程#连接事件@socketio.on('test_connect')def

connect():

print("socket建立连接")

globalthread

ifthreadis

None:thread=socketio.start_background_task(target=background_thread)

print(thread)socketio.emit('connected',{'data':'Connected'})#断开连接事件@socketio.on('disconnect')def

disconnect_msg():

print('clientdisconnected!')#核心函数:获取Kafka数据并推送至前端def

background_thread():

print('hereisbkgthread')

formsginconsumer:consumerrecord=msg.value

ifconsumerrecord!=None:element=consumerrecord[0]male=element.get('M',0)female=element.get('F',0)result=str(male)+':'+str(female)socketio.emit('sendmsg',{'data':result})

else:

continueif__name__=='__main__':socketio.run(app,host='',port=5000)核心流程连接事件→后台线程→Kafka数据消费→解析性别统计→SocketIO推送前端工单6.1小结工单小结从安装框架到服务器创建,完成后端实时通信基础搭建1安装

Flask-SocketIO

框架2创建Flask-SocketIO服务器3实现实时数据推送到前端,奠定可视化基础“素养课堂:科技自立自强全国领先人工智能专利申请量9364件核心数据·"十四五"期间全国领先人工智能专利授权量2682件核心数据·"十四五"期间"

"十四五"规划

提出,要把

科技自立自强

作为国家发展的战略支撑。我们都是科技强国征程中的赶路人,今天在学校磨炼本领,明天就能在

"科技大舞台"

上绽放光彩。——来源:《2020人工智能中国专利技术分析报告》(国家工业信息安全发展中心、工业和信息化部电子知识产权中心)前端可视化开发03工单6.2基本信息与目标实时计算结果可视化工单6.2基本信息6.2编写前端代码所属任务:实时计算结果可视化建议学时2学时环境要求已经搭建好的实时计算环境注接收

Flask-SocketIO

服务器推送的数据,使用

ECharts

编写HTML和JavaScript代码实现可视化。学习目标知识目标1掌握ECharts绘制基本图形的方法2掌握动态数据驱动图表更新的机制技能目标1能够使用ECharts绘制基本图形2能够连接Flask-SocketIO服务器并处理实时数据素养目标1培养构建前后端分离的实时应用架构的能力2培养解决实际问题的能力掌握方法应用能力综合能力代码演示:创建目录结构,编写idx.html页面框架目录创建命令$cdtask6$mkdirtemplates$mkdir-pstatic/jsidx.html核心结构核心功能:接收

Flask-SocketIO

推送数据,借助

ECharts

实现可视化<!DOCTYPEhtml><html

lang="en"><head><meta

charset="UTF-8"><title>Document</title><script

src="static/js/socket.io.js"></script><script

src="static/js/jquery-3.1.1.min.js"></script><script

src="static/js/echarts.min.js"></script></head><body><div

style="width:600px;height:600px;margin:0auto;"><div

id="main"

style="width:600px;height:400px;"></div><div>male:<em

id="male"></em>female:<em

id="female"></em></div></div></body></html>1引入3个核心库socket.io.js/jquery-3.1.1.min.js/echarts.min.js2定义可视化容器main

区域

600×400px,male/female

数据展示位目录创建与HTML页面结构ECharts初始化与数据准备<scripttype="text/javascript">constdom=document.getElementById("main")

varchart=echarts.init(dom)

constmytime=(function(){

letnow=newDate();

letres=[];

letlen=5;

while(len--){res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));now=newDate(+now-1000);}

returnres;})();//横轴标签数组varmdata=[0,0,0,0,0];//男性数量varfdata=[0,0,0,0,0];//女性数量初始化三要素1容器绑定document.getElementById("main")▼2时间标签生成mytime横轴标签数组(len=5)▼3数据数组初始化mdata男性数量/fdata女性数量index.html—<div>绑定与参数设置ECharts配置项设置chart.setOption({...})//标题配置title:{

text:"按性别分别计算观影次数",

left:'center'},//坐标轴配置xAxis:{

type:"category",

data:mytime},yAxis:{

type:"value",

splitLine:{show:true}},//工具栏配置toolbox:{

feature:{

saveAsImage:{}}},//数据系列绑定series:[{

name:'male',

type:'line',

data:mdata,

smooth:true},{

name:'female',

type:'line',

data:fdata,

smooth:true}]图表类型:折线图(line)male系列绑定数据

mdata,平滑曲线female系列绑定数据

fdata,平滑曲线smooth:true两个系列均开启平滑曲线绘制,使折线过渡更加柔和流畅标题title坐标轴xAxis/yAxis工具栏toolbox数据系列series每秒动态更新图表setInterval每秒轮询+SocketIO事件驱动,双通道保障数据实时性双通道实现对比通道技术数据流向核心代码本地轮询setInterval页面DOM→图表更新window.setInterval(fn,1000)服务端推送SocketIOFlask→前端→DOM更新socket.on('sendmsg',fn)每秒动态更新图表数据//每秒添加一个数据,形成动态显示效果window.setInterval(function(){

letnowtime=new

Date().toLocaleTimeString().replace(/^\D*/,'');mytime.shift();mytime.push(nowtime);count1=$('#male').text();y=parseInt(count1);mdata.shift();mdata.push(y);count2=$('#female').text();z=parseInt(count2);fdata.shift();fdata.push(z);chart.setOption({xAxis:[{data:mytime}],series:[{data:mdata},{data:fdata}]});},1000);Socket连接与实时数据从Flask-SocketIO服务器获取实时数据·JavaScriptvarsocket=io.connect(tocol+'//'+document.domain+':'+location.port);//连接服务器socket.on('connect',function(){socket.emit('test_connect');});//连接成功socket.on('connected',function(){console.log('connected');});//获取实时数据并更新前端socket.on('sendmsg',function(message){

varobj=eval(message);

varresult=obj["data"].split(":");$('#male').html(result[0]);$('#female').html(result[1]);});SocketIO三步流程1连接服务器io.connect()·emit('test_connect')2监听事件on('connected')·on('sendmsg')3更新DOM$('#male').html()·$('#female').html()实时数据来源:Flask-SocketIO服务器静态资源部署复制前端依赖库至项目静态目录3将

3

.js

文件复制至

static/js

目录前端页面依赖的三个核心库文件,缺一不可echarts.min.js.jsECharts图表库核心图表渲染jquery-3.1.1.min.js.jsDOM操作与事件处理页面交互socket.io.js.js实时通信客户端实时通信系统集成与调试04工单6.3基本信息与目标工单6.3·实时数据可视化利用工单

6.1

和工单

6.2

的结果,实现实时数据可视化基本信息工单编号6.3建议学时2

课时所属任务实时计算结果可视化环境要求已搭建好的实时计算环境任务目标学习目标知识目标掌握实时数据可视化的完整流程技能目标能够完成数据可视化前端页面的展示素养目标培养构建完整实时数据产品的能力

培养解决实际问题的能力启动Hadoop与Spark集群使用

Xshell

新建

3

个终端,分别连接:1master2slave013slave02依次启动集群1启动Hadoop集群master节点运行

start-all.shmaster—Xshell$start-all.shStartingnamenodeson[master]StartingdatanodesStartingsecondarynamenodes[master]StartingresourcemanagerStartingnodemanagers2启动Spark集群master节点运行

start-master.sh

start-workers.shmaster/slave01/slave02—Xshell$start-master.shstartingorg.apache.spark.deploy.master.Master$start-workers.shslave01:startingorg.apache.spark.deploy.worker.Workerslave02:startingorg.apache.spark.deploy.worker.Worker✓分别在三个节点运行

jps

命令验证,确保各集群成功启动启动ZooKeeper与Kafka集群③启动ZooKeeper集群在

master、slave01、slave02

三个节点分别启动:masterslave01slave02三个节点均显示:STARTED④启动Kafka集群在三个节点分别运行启动命令:START·KAFKAkafka-server-start.sh-daemon/opt/kafka/config/pertiesmasterslave01slave02分别在三个节点运行

jps

命令验证,确保

各集群成功启动四终端协作架构1终端1模拟产生评分数据运行Python脚本→2终端2启动Flume监听转发启动FlumeAgent→3终端3SparkStreaming计算运行流式计算任务→4终端4Flask-SocketIO推送连接前端实时推送1终端1:数据模拟$python/opt/example/task5_gendata_2.py运行结果:

filedeleted

(清除旧数据,开始产生新数据)2终端2:Flume监听$flume-ngagent-cconf-f/opt/example/task5_flume_2.conf-namea1-Dflume.root.logger=INFO,consoleFlume监听终端1数据,实时发送至Kafka主题

ssc2终端配置与数据产生终端命令spark-submit$spark-submit/opt/example/task5_streaming_2.py

master:9092

ssc2关键输出原始数据含义b'[{"M":"1"}]'男性观影1次b'[{"F":"6"}]'女性观影6次b'[{"M":"6"}]'男性观影6次每条记录:性别标识(M/F)+对应观影次数SparkStreaming实时计算Flask-SocketIO数据推送终端命令$python/opt/example/task6/task6_flask.py关键日志日志输出解析结果*Runningon:5000服务启动[{'F':'4'}]→0:4女性4次→男0:女4[{'M':'3'}]→3:0男性3次→男3:女0[{'M':'6'}]→6:0男性6次→男6:女0从Kafka主题

distopic

消费

解析性别统计

→SocketIO实时推送前端浏览器实时可视化效果在浏览器中实时呈现按性别统计的观影次数曲线,随数据流入动态更新master节点IP:5000实时折线图随数据流入动态更新,male与female两条曲线分别展示性别维度的观影次数变化访问方式浏览器地址栏输入

master节点IP:5000

即可访问可视化页面按性别计算的观影次数曲线male与female两条曲线,分别展示性别维度的观影次数变化实时更新截取两个不同时间的状态,曲线随数据实时更新工单小结与素养课堂工单小结通过

集成调试

实现实时数据可视化,四大技术组件无缝串联:组件作用Flask-SocketIO实时通信服务器ECharts前端图表渲染Kafka消息队列传输SparkStreaming实时计算处理素养课堂大数据来源于网络,既包含用户行为、社交互动、交易记录等结构化数据,也涵盖图片、音频、视频等非结构化数据。利用这些数据时面临三大挑战:隐私安全数据的收集和处理可能涉及个人隐私和商业机密真实可靠数据的真实性和可靠性需要经过严格验证专业门槛数据的处理和分析需要专业知识和技能秉持科学精神和批判思维,不断提升思考能力,准确分析数据,发现数据背后的规律和趋势。知识链接拓展05推荐优先级:Eventlet>Gevent>Flask开发服务器(自动备选)什么是Flask-SocketIOFlask-SocketIO

赋予Flask应用实时双向通信能力,确保低延迟传输。客户端可通过以下语言的SocketIO库建立持久连接:JavaScriptPythonC++JavaSwift三种异步服务方案方案核心特点适用场景Eventlet高性能首选,支持长轮询与WebSocket生产环境推荐Gevent配置灵活,原生仅支持长轮询(WebSocket需额外配置)中等规模部署Flask开发服务器仅支持长轮询,性能较弱开发调试阶段Flask-SocketIO简介核心概念与三种异步服务方案服务器端代码(app.py)Python·Flask-SocketIOfromflaskimportFlask,render_templatefromflask_socketioimportSocketIO,emitapp=Flask(__name__)app.config['SECRET_KEY']='secret_key'socketio=SocketIO()socketio.init_app(app,cors_allowed_origins='*')name_space='/dcenter'@app.route('/')def

index():

returnrender_template('index.html')@app.route('/push')def

push_once():event_name='dcenter'broadcasted_data={'data':

"testmessage!"

}

socketio.emit

(event_name,broadcasted_data,broadcast=False,

namespace

=name_space)

return

'done!'@socketio.on('connect',namespace=name_space)def

connected_msg():

print('clientconnected.')@socketio.on('disconnect',namespace=name_space)def

disconnect_msg():

print('clientdisconnected.')if__name__=='__main__':socketio.run(app,host='',port=5000,debug=True)功能说明访问路由

/push

时,推送消息

"testmessage!"

到路由

/,并在前端网页显示。1访问路由

/push2推送消息

"testmessage!"3路由

/

前端网页显示核心机制socketio.emit()实现消息传递namespace隔离不同业务通道Flask-SocketIO使用示例(一)Flask-SocketIO使用示例(二)启动与验证1运行

pythonapp.py

启动服务预期服务就绪2浏览器访问

:5000预期看到

"DemoofSocketIO"

页面3新开页面访问

:5000/push预期触发消息推送4返回原页面预期显示新消息

"testmessage!"前端代码index.html<!DOCTYPEhtml><html

lang="en"><head><meta

charset="UTF-8"><title>SocketIODemo</title><script

type="text/javascript"

src="///jquery/3.1.1/jquery.min.js"></script><script

type="text/javascript"

src="///socket.io/1.5.1/socket.io.min.js"></script></head><body><h2>DemoofSocketIO</h2><div

id="test"></div><script>$(document).ready(function(){namespace='/dcenter';

varsocket=io.connect(tocol+'//'+document.domain+':'+location.port+namespace);socket.on('dcenter',function(res){

varval=res.data;

if(val){$("#test").append(val).append('<br/>');}});});</script></body></html>Flask的组成Flask的强大之处在于功能的

丰富性、使用的

便捷性、高度的

可扩展性

以及

灵活性。包含以下核心组成部分:应用程序对象Flask的核心,负责接收HTTP请求并生成响应。包括路由管理、错误处理和上下文维护路由系统通过装饰器将URL路径映射到对应的视图函数,实现从请求到处理函数的定向视图函数处理具体的HTTP请求,生成响应内容。支持返回HTML页面或JSON等数据格式模板系统集成Jinja2模板引擎,提供灵活的HTML生成功能。包含模板继承、变量替换等特性数据库支持可通过Flask-SQLAlchemy等扩展实现,支持MySQL、PostgreSQL等数据库需单独安装表单处理Flask-WTF(WTForms)扩展提供表单验证、CSRF防护等功能需单独安装扩展系统提供邮件发送、缓存管理、认证等功能的扩展库,如Flask-Mail、Flask-Caching等Flask基本语法(一)1应用初始化fromflaskimport

Flaskapp=Flask(__name__)Flask应用是

Flask类

的实例,负责处理所有客户端请求2启动服务器if__name__=='__main__':app.run(debug=True)run()

启动开发服务器,进入

轮询等待

状态,处理请求直至停止(Ctrl+C)3run()函数参数开发服务器的常用配置参数如下:参数说明默认值Host服务器监听主机名,外部访问设为

""Port服务器监听端口号5000Debug调试模式开关,True

开启调试信息输出FalseOptions传递给底层Werkzeug服务器的附加选项—路由route()

装饰器用于将URL绑定到函数:@app.route('/hello')defhello_world():return

'helloworld'访问

http://localhost:5000/hello

时,hello_world()

的输出将呈现在浏览器中。模板模板提取视图函数的数据结果进行展示,使代码结构清晰、耦合度低。模板包含响应文本的文件,用占位符表示动态部分渲染使用真实值替换变量,返回响应文本的过程模板引擎Flask通常使用

Jinja2

渲染模板Flask基本语法(二)Flask基本语法(三)——模板渲染:向页面传递数据render_template()将Python数据注入HTML模板并渲染输出核心机制render_template()

将Python字典数据注入HTML模板,通过

{{}}

语法在页面中渲染输出app.py·Flask后端fromflaskimportFlask,render_templateapp=Flask(__name__)@app.route('/')def

index():myDict={

'name':'zhangsan',

'age':28}

return

render_template(

'hello.html',my_dict=myDict)if__name__=='__main__':app.run(debug=True)hello.html·HTML模板<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><h2>我是模板</h2>

{{my_dict}}<hr><h2>字典数据获取</h2><hr>

{{my_dict['name']}}<br>

{{my_dict.age}}</body></html>运行

pythonapp.py

启动服务,浏览器访问即可查看渲染效果。模板中通过

{{}}

语法访问变量,支持

对象.属性

字典['键']

两种取值方式ECharts

是一款强大的JavaScript数据可视化图表库,图表展示直观生动,具备交互性与高度个性化定制特性。最初由百度团队开发并开源,2018年初捐赠给

Apache软件基金会,成为其孵化器项目。安装方式四种获取ECharts的常用途径1源代码安装从GitHubApache/ECharts项目的Release页面下载

Sourcecode

压缩包,解压后

dist

目录下的

echarts.js

包含完整功能。2npm安装在VSCode终端中运行

npminstallecharts

命令完成安装3CDN获取推荐使用镜像网站,提供不同版本的ECharts压缩包StaticfileCDNjsDelivrcdnjs4在线定制可根据需求选择模块,生成定制化版本,优化项目性能ECharts简介与安装ECharts图表容器的初始化与自适应大小配置1图表容器初始化通过

echarts.init()

创建图表,需为容器指定

宽度

高度:<div

id="main"

style="width:600px;height:400px;"></div><script

type="text/javascript">varmyChart=echarts.init(document.getElementById('main'));</script>!调用

echarts.init()

时需保证已指定容器的宽度和高度2响应式自适应配置容器大小变化时,监听

resize

事件实现图表同步调整:<style>#main,html,body{width:100%;}#main{height:400px;}</style><div

id="main"></div><script

type="text/javascript">varmyChart=echarts.init(document.getElementById('main'));window.addEventListener('resize',function(){myChart.resize();});</script>!核心方法:echartsInstance.resize()

实现图表尺寸的动态调整图表容器及大小传统方式

series.data数据分散在各series中每个series单独定义复用困难,维护成本高//传统方式:数据分散series:[{type:'bar',name:'2015',data:[89.3,92.1,94.4,85.4]},{type:'bar',name:'2016',data:[95.8,89.4,91.2,76.9]},{type:'bar',name:'2017',data:[97.7,83.1,92.5,78.1]}]推荐方式

dataset数据集中统一管理数据与配置分离多组件复用,降低转换成本//推荐方式:数据集中dataset:{source:[['product','2015','2016','2017'],['MatchaLatte',43.3,85.8,93.7],['MilkTea',83.1,73.4,55.1],['CheeseCocoa',86.4,65.2,82.5],['WalnutBrownie',72.4,53.9,39.1]]}dataset三大优势01多组件复用数据与配置分离,一处定义多处使用02格式兼容强支持二维数组、对象数组等常用格式03直观易维护贴合常规思维,图表生成更高效数据集事件分类ECharts中用户操作触发事件,开发者可监听并回调处理:事件类别触发场景鼠标操作事件单击或Hover图表图形时触发交互式组件事件

legendselectchanged(图例切换)、

datazoom

(区域缩放)单击事件绑定myChart.on('click',function(params){window.open('/s?wd='+encodeURIComponent());});EventParams参数对象componentTypestring'series'、'markLine'、'markPoint'等seriesTypestring'line'、'bar'、'pie'等seriesIndexnumberseries中的索引seriesNamestring系列名称namestring数据名称或类目名称dataIndexnumberdata数组中的索引dataObject原始数据项dataTypestring'node'或'edge'valuenumber|Array数据值colorstring图形颜色事件与行为ECharts事件分类、单击绑定与EventParams参数体系柱状图(Bar)二维数据集option={

xAxis:{data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},

yAxis:{},

series:[{type:'bar',data:[23,24,18,25,27,28,25]}]};适用于二维数据集,直观反映数据差异;适合中小规模数据折线图(Line)二维大数据集option={

xAxis:{type:'category',data:['A','B','C']},

yAxis:{type:'value'},

series:[{

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论