python实时显示数据_Tornado实现监控数据实时展示

最新推荐文章于 2023-06-29 16:34:42 发布
最新推荐文章于 2023-06-29 16:34:42 发布
阅读量582 收藏 2
点赞数
文章标签： python实时显示数据

前言：

It has been a while since I last updated my blogs.

使用Tornado开发一个实时监控信息系统，其中包括 CUP、内存、网卡、磁盘使用率。

涉及技术

编程语言：Python

关系型数据库：MySQL

Web框架：Tornado

数据库连接驱动：mysql-connector-python

数据库ORM：sqlalchemy

服务端websocket通信：sockjs-tornado

客户端websocket通信：sockejs-client

前端：HTML、CSS、JS

图表可视化：pyecharts==0.5.11 #新版本和旧版本差异较大

获取硬件信息工具：psutil模块

pip install -i https://pypi.douban.com/simple --trusted-host pypi.douban.com -r requirements.txt

-i:指定国内安装源 --trusted-host:指定信任主机 -r指定依赖文件

Tornado项目目录结构设计

Monitor

-------->app01

------>models

------>static

------->template

------->tools

------->views

manage.py

1122865-20190902165954964-1011891442.png

ContractedBlock.gif

ExpandedBlockStart.gif

from sqlalchemy.ext.declarative import declarative_base #模型继承的父类

from sqlalchemy.dialects.mssql import BIGINT,DECIMAL,DATE,TIME,DATETIME#导入数据库字段

from sqlalchemy import Column#用于创建字段的类

Base=declarative_base()#调用

metadata=Base.metadata#创建元类

classMem(Base):__tablename__='mem'id=Column(BIGINT,primary_key=True)

precent=Column(DECIMAL(6,2))#小数类型 保留6位数字 2位小数

total=Column(DECIMAL(8,2))#总量

used=Column(DECIMAL(8,2))#使用率

free=Column(DECIMAL(8,2))#剩余率

create_date=Column(DATE)#创建的日期

create_time=Column(TIME)#c创建的时间

create_dt=Column(DATETIME)#创建的日期+时间

classSwap(Base):__tablename__='swap'id= Column(BIGINT,primary_key=True)

precent= Column(DECIMAL(6,2)) #小数类型 保留6位数字 2位小数

total = Column(DECIMAL(8,2)) #总量

used = Column(DECIMAL(8,2)) #使用率

free = Column(DECIMAL(8,2)) #剩余率

create_date = Column(DATE) #创建的日期

create_time = Column(TIME) #c创建的时间

create_dt = Column(DATETIME) #创建的日期+时间

classCPU(Base):__tablename__ = 'cpu'id= Column(BIGINT, primary_key=True)

precent= Column(DECIMAL(6, 2)) #小数类型 保留6位数字 2位小数

create_date = Column(DATE) #创建的日期

create_time = Column(TIME) #c创建的时间

create_dt = Column(DATETIME) #创建的日期+时间

if __name__ == '__main__':from sqlalchemy importcreate_engine

mysql_configs={"db_host":'192.168.56.128',"db_name":"web","db_port":3306,"db_user":"web","db_pwd":"123.com"}

link="mysql+mysqlconnector://{db_user}:{db_pwd}@{db_host}:{db_port}/{db_name}".format(**mysql_configs)

engine=create_engine(link,encoding="utf-8",echo=True)

metadata.create_all(engine)#调用元类

models.py

一、前端（SockJS）与Tornado建立web socket连接

前端使用：sockejs-client插件

ContractedBlock.gif

ExpandedBlockStart.gif

//1.定义长连接

var conn=null;//2.定义连接函数

function connect() {

disconnect();//把之前的连接关闭掉,在创建新的连接//0.定义协议

var transports= ["websocket"];//1.创建连接对象

conn= new SockJS("http://" + window.location.host + "/real/time",transports);//2.建立连接

conn.onopen=function () {

console.log('连接成功')

};//3.建立发送消息

conn.onmessage=function (e) {

console.log(e.data);

};//4.建立关闭连接

conn.onclose=function (e) {

console.log("断开连接");

};

setInterval(function () {

conn.send("system")

},1000)

}

function disconnect() {if (conn !=null) {

conn.close();

conn=null;

}

}if (conn ==null) {

connect();

}else{

disconnect();

}

monitor.js

Tornado使用：sockjs

ContractedBlock.gif

ExpandedBlockStart.gif

from sockjs.tornado import SockJSConnection#专门生成web_socket服务

classRealTimeHandler(SockJSConnection):

waiters=set()#定义1个客户端连接池，所有客户端共用1个集合

#1.建立连接（不存在重复的连接)

defon_open(self, request):try:

self.waiters.add(self)exceptException as e:print(e)#2.发送消息

def on_message(self, message):#接收客户端消息

try:

self.broadcast(self.waiters,message)#把消息广播给所有连接的客户端

exceptException as e:print(e)#3.关闭连接

defon_close(self):try:

self.waiters.remove(self)exceptException as e:print(e)

views_real_time.py

二、前端数据实时更新

1.CPU信息实时更新（水球图）

Tornado调用pyecharts生成前端代码（html+js+css）；

ContractedBlock.gif

ExpandedBlockStart.gif

importdatetimefrom pyecharts import Liquid, Gauge, Pie, Line #水球图、

classChart(object):def liquid_html(self,chart_id,title,val):#水球图

liquid =Liquid(

title="{}-{}".format(self.dt, title),

title_pos="center",

width="100%",

title_color="white",

title_text_size=14,

height=300)

liquid.chart_id=chart_id#指定 chart_id

liquid.add("",[round(val/100,4)])#添加数据

return liquid.render_embed()#返回html图表代码

@propertydefdt(self):return datetime.datetime.now().strftime('%Y%m%dT%H:%M:%S')

chart.py

Tornado把pyecharts生成的前端代码（html+js+css），响应给浏览器渲染；

ContractedBlock.gif

ExpandedBlockStart.gif

varmyChart_cpu_avg=echarts.init(document.getElementById('cpu_avg'),'light', {renderer:'canvas'});varoption_cpu_avg={"title": [

{"text":"20190910T15:13:19-cpu\u5e73\u5747\u4f7f\u7528\u7387","left":"center","top":"auto","textStyle": {"color":"white","fontSize":14},"subtextStyle": {"fontSize":12}

}

],"toolbox": {"show":true,"orient":"vertical","left":"95%","top":"center","feature": {"saveAsImage": {"show":true,"title":"save as image"},"restore": {"show":true,"title":"restore"},"dataView": {"show":true,"title":"data view"}

}

},"series_id":8147274,"tooltip": {"trigger":"item","triggerOn":"mousemove|click","axisPointer": {"type":"line"},"textStyle": {"fontSize":14},"backgroundColor":"rgba(50,50,50,0.7)","borderColor":"#333","borderWidth":0},"series": [

{"type":"liquidFill","data": [0.167],"waveAnimation":true,"animationDuration":2000,"animationDurationUpdate":1000,"color": ["#294D99","#156ACF","#1598ED","#45BDFF"],"shape":"circle","outline": {"show":true}

}

],"legend": [

{"data": [],"selectedMode":"multiple","show":true,"left":"center","top":"top","orient":"horizontal","textStyle": {"fontSize":12}

}

],"animation":true,"color": ["#c23531","#2f4554","#61a0a8","#d48265","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3","#f05b72","#ef5b9c","#f47920","#905a3d","#fab27b","#2a5caa","#444693","#726930","#b2d235","#6d8346","#ac6767","#1d953f","#6950a1","#918597","#f6f5ec"]

};

myChart_cpu_avg.setOption(option_cpu_avg);

tornado调用pyechart生成的前端代码

浏览器发送web socket请求给Tornado server端

Tornado不断响应浏览器pyecharts生成前端代码（html+js+css）

ContractedBlock.gif

ExpandedBlockStart.gif

importjsonfrom sockjs.tornado import SockJSConnection#专门生成web_socket服务

from app01.tools.monitor_tools importMonitorclassRealTimeHandler(SockJSConnection):

waiters=set()#定义1个客户端连接池，所有客户端共用1个集合

#1.建立连接（不存在重复的连接)

defon_open(self, request):try:

self.waiters.add(self)exceptException as e:print(e)#2.发送消息

def on_message(self, message):#接收客户端消息，根据客户端发送过来的消息返回一些数据！

try:if message =="system":

m=Monitor()

data={"mem":m.mem(),"swap":m.swap(),"cpu":m.cpu(),"disk":m.disk(),"net":m.net(),'dt':m.dt}

self.broadcast(self.waiters,json.dumps(data,ensure_ascii=False))#把消息广播给所有连接的客户端

exceptException as e:print(e)#3.关闭连接

defon_close(self):try:

self.waiters.remove(self)exceptException as e:print(e)

views_real_time.py

浏览器通过JS代码不断修改pyechart生成的前端代码

ContractedBlock.gif

ExpandedBlockStart.gif

//进度条变化

functionprogress_status(val) {var data = "";if (val >= 0 && val < 25) {

data= " bg-success";

}else if (val >= 25 && val < 50) {

data= "";

}else if (val >= 50 && val < 75) {

data= " bg-warning";

}else if (val >= 75 && val <= 100) {

data= " bg-success";

}returndata

}functionupdate_ui(e) {var data=JSON.parse(e.data);//因为pyechart 声明了变量option_cpu_avg所有我们只需要修改现有的变量option_cpu_avg即可

option_cpu_avg.series[0].data[0]=(data['cpu']['percent_avg']/100).toFixed(4); //保留4位小数

option_cpu_avg.title[0].text=data['dt']+'CPU平均使用率';//保证对option_cpu_avg的修改生效

myChart_cpu_avg.setOption(option_cpu_avg);//-------------------------------------------------------

var cpu_per = "";for (var k in data['cpu']['percent_per']) {var num =parseInt(k);

cpu_per+= "

CPU" + num + "

cpu_per+= "

" + data['cpu']['percent_per'][k] + "%
";

}

document.getElementById("tb_cpu_per").innerHTML =cpu_per;

}//1.定义长连接

var conn = null;//2.定义连接函数

functionconnect() {

disconnect();//把之前的连接关闭掉,在创建新的连接

//0.定义协议

var transports = ["websocket"];//1.创建连接对象

conn = new SockJS("http://" + window.location.host + "/real/time",transports);//2.建立连接

conn.onopen = function() {

console.log('连接成功')

};//3.建立接收消息

conn.onmessage = function(e) {//console.log(e.data);

update_ui(e)

};//4.建立关闭连接

conn.onclose = function(e) {

console.log("断开连接");

};

setInterval(function() {//2.1 建立连接发送消息

conn.send("system")

},1000)

}functiondisconnect() {if (conn != null) {

conn.close();

conn= null;

}

}if (conn == null) {

connect();

}else{

disconnect();

}

monitor.js

2.内存+交互分区信息实时展示（仪表图）

ContractedBlock.gif

ExpandedBlockStart.gif

importtornado.webfrom app01.views.views_commen importCommnHardlerfrom app01.tools.monitor_tools importmonitor_objfrom app01.tools.chart importChart#定义1个首页的视图

classIndexHandler(CommnHardler):def get(self,*args,**kwargs):

cpu_info=monitor_obj.cpu()

cpu_percent_avg_info=cpu_info ['percent_avg']#CPU平均使用率

cpu_percent_per=cpu_info ['percent_per'] #每个CPU使用率

mem_info=monitor_obj.mem()

swap_info=monitor_obj.swap()print(swap_info)

c=Chart()

liquid_html=c.liquid_html(chart_id='cpu_avg',title="cpu平均使用率",val=cpu_percent_avg_info)

self.render("index.html",**{"liquid_html":liquid_html,"cpu_percent_per_info":cpu_percent_per,"mem_html":c.guage_html("mem","内存使用率",mem_info['percent']),"swap_html":c.guage_html('swap',"交互分区使用率",swap_info['percent']),"mem_info":mem_info,"swap_info": swap_info

})

view_index.py

ContractedBlock.gif

ExpandedBlockStart.gif

//进度条变化

functionprogress_status(val) {var data = "";if (val >= 0 && val < 25) {

data= " bg-success";

}else if (val >= 25 && val < 50) {

data= "";

}else if (val >= 50 && val < 75) {

data= " bg-warning";

}else if (val >= 75 && val <= 100) {

data= " bg-success";

}returndata

}functionupdate_ui(e) {var data=JSON.parse(e.data);//因为pyechart 声明了变量option_cpu_avg所有我们只需要修改现有的变量option_cpu_avg即可

option_cpu_avg.series[0].data[0]=(data['cpu']['percent_avg']/100).toFixed(4); //保留4位小数

option_cpu_avg.title[0].text=data['dt']+'CPU平均使用率';//保证对option_cpu_avg的修改生效

myChart_cpu_avg.setOption(option_cpu_avg);//-------------------------------------------------------

var cpu_per = "";for (var k in data['cpu']['percent_per']) {var num =parseInt(k);

cpu_per+= "

CPU" + num + "

cpu_per+= "

" + data['cpu']['percent_per'][k] + "%
";

}

document.getElementById("tb_cpu_per").innerHTML =cpu_per;/*内存实时更新*/option_mem.series[0].data[0].value = data['mem']['percent'];

option_mem.title[0].text = data["dt"] + "-内存使用率";

myChart_mem.setOption(option_mem);

document.getElementById("mem_percent").innerText = data['mem']['percent'];

document.getElementById("mem_total").innerText = data['mem']['total'];

document.getElementById("mem_used").innerText = data['mem']['used'];

document.getElementById("mem_free").innerText = data['mem']['free'];/*交换分区实时更新*/option_swap.series[0].data[0].value = data['swap']['percent'];

option_swap.title[0].text = data["dt"] + "-交换分区使用率";

myChart_swap.setOption(option_swap);

document.getElementById("swap_percent").innerText = data['swap']['percent'];

document.getElementById("swap_total").innerText = data['swap']['total'];

document.getElementById("swap_used").innerText = data['swap']['used'];

document.getElementById("swap_free").innerText = data['swap']['free'];

}//1.定义长连接

var conn = null;//2.定义连接函数

functionconnect() {

disconnect();//把之前的连接关闭掉,在创建新的连接

//0.定义协议

var transports = ["websocket"];//1.创建连接对象

conn = new SockJS("http://" + window.location.host + "/real/time",transports);//2.建立连接

conn.onopen = function() {

console.log('连接成功')

};//3.建立接收消息

conn.onmessage = function(e) {//console.log(e.data);

update_ui(e)

};//4.建立关闭连接

conn.onclose = function(e) {

console.log("断开连接");

};

setInterval(function() {//2.1 建立连接发送消息

conn.send("system")

},1000)

}functiondisconnect() {if (conn != null) {

conn.close();

conn= null;

}

}if (conn == null) {

connect();

}else{

disconnect();

}

monitor.js

ContractedBlock.gif

ExpandedBlockStart.gif

{% extends "layout.html" %}{% block head %}{% end %}

{% block content %}

CPU信息

所有CPU使用率

{% for k,v in enumerate(cpu_percent_per_info) %}

CPU{{ k }}

{{ v }}%

{% end %}

{% raw liquid_html%}

内存/交互分区信息

{% raw mem_html %}

使用率（%）

{{ mem_info['percent'] }}

总量（GB）

{{ mem_info['total'] }}

使用量（GB）

{{ mem_info['used'] }}

剩余量（GB）

{{ mem_info['free'] }}

{% raw swap_html %}

使用率（%）

{{swap_info['percent']}}

总量（GB）

{{swap_info['total']}}

使用量（GB）

{{swap_info[ 'used']}}

剩余量（GB）

{{swap_info['free']}}

{% end %}

index.html

--------------支持web socket的协议

ContractedBlock.gif

ExpandedBlockStart.gif

importjsonfrom sockjs.tornado import SockJSConnection#专门生成web_socket服务

from app01.tools.monitor_tools importMonitorclassRealTimeHandler(SockJSConnection):

waiters=set()#定义1个客户端连接池，所有客户端共用1个集合

#1.建立连接（不存在重复的连接)

defon_open(self, request):try:

self.waiters.add(self)exceptException as e:print(e)#2.发送消息

def on_message(self, message):#接收客户端消息，根据客户端发送过来的消息返回一些数据！

try:if message =="system":

m=Monitor()

data={"mem":m.mem(),"swap":m.swap(),"cpu":m.cpu(),"disk":m.disk(),"net":m.net(),'dt':m.dt}

self.broadcast(self.waiters,json.dumps(data,ensure_ascii=False))#把消息广播给所有连接的客户端

exceptException as e:print(e)#3.关闭连接

defon_close(self):try:

self.waiters.remove(self)exceptException as e:print(e)

view_real_time.py

weixin_39869378
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tornado学习之——formdata格式数据传输
小米mm修仙路
03-15 1647
server.py tornado 是顺序调用的，当其中一个handler(比如post)正在运行还没返回结果的时候。调用其它handler是没有反应的，如果需要就得用携程编程 from tornado import web, ioloop, httpserver import json import numpy as np import cv2 # tornado 是顺序调用的，当其中...
PYTHONtornado全链路监控方案
01-27
随着搜索系统的扩大和微服务的流行，一次请求涉及的服务往往是很多次调用，这些模块，通常是由不同团队，甚至是不同语言编写的，所以，可能部署在数十台服务器、横跨多个数据中心。因此，在排查问题时，就不能人工对...
Tornado数据分析及数据可视化（一）
weixin_34128534的博客
04-25 809
前面的话 今天公司突然有个紧急任务是读取excel表格，然后清洗并展示里面的数据。 分配给我的任务是！！！ 写网页前端表单=。= 妈蛋，可是我很想分析一下数据啊！！！ 然后突然想起来协会（大学的社团）的指纹考勤机一直没怎么用好，要不就把打卡数据拷出来分析吧！！做成每天、每周、每月、每年的考勤记录分析！！！ 恰好前几天上级让我学习可...
Python搭建一个系统信息实时监控数据可视化大屏
weixin_43373042的博客
07-31 4740
本文分享使用python搭建服务器应用的监控系统面板，主要流程如下：1、数据库中创建数据表2、建立数据库连接实时数据插入数据表，实时查询更新面板数据准备3、监控中心大屏制作具体步骤：1、...
如何用 python 获取实时的股票数据？
m0_59162248的博客
05-08 4027
最近，一位常年研究股票系统的[开发者] pythonstock 用 Python 写了一个股票分析系统，发布数天就获得了不少关注。于是我们就推荐给大家，既能学习 python 又能练习炒股。但正如项目作者所说，「本项目只能用于 Python 代码学习，股票分析，投资失败亏钱不负责，不算 BUG。」如果真亏了，我们也不背锅呀，毕竟大家都是韭菜。pythonstock 的项目页面总之，分析得准不准先不说，我们先来偷个师，看看这个用 Python 代码进行股票分析的项目到底是怎么实现的吧。
Python如何随数据更新实时画图？Python实时动态绘图
devid008的博客
05-03 5441
在数据分析和可视化场景中，我们常常需要实现实时动态图表，比如每分钟读取数据库新的记录，及时更新图表显示最新数据，而不是静态显示某个时间点的数据。本文将介绍使用Python matploblib库的animation功能实现实时动态绘图的方法。
Python实时显示数据
07-21
实时显示数据对于数据采集，分析系统都是非常必要的。Python作为一种非常常用的语言，能够在各种不同平台上方便的使用。 在这个例子中，我使用简单的基础函数实现数据的实时显示。
Python之Tornado开发硬件实时监控系统视频教程
xk686的博客
04-05 417
  内容目录：   1-1_实战项目概述.mp4   1-2_http原理介绍.mp4   1-3_websocket原理介绍.mp4   1-4_硬件信息介绍.mp4   1-5_技术架构介绍.mp4   1-6_开发环境介绍.mp4   2-1_安装依赖包.mp4   2-2_构建项目目录.mp4   2-3_设计内存统计模型.mp4   2-4_设计交换分区统计模型.mp4   2-5_设计CPU统计模型.mp4   2-6_模型生成数据表.mp4   3-1_获取CPU信息.mp4   3-2_获取
python tornado 实现websocket 实时消息传递
静待花开时，终有重逢日。
10-31 2235
大家都知道股票交易所和聊天类软件都是实时消息传递的 建一个 tornado_websocket.py # -*- coding: utf-8 -*- from __future__ import unicode_literals, print_function from datetime import datetime import os import tornado from tornado...
该项目为硬件实时监控系统.zip
01-11
该项目为硬件实时监控系统，应用python、mysql、tornado、sqlalchemy、psutil、pyecharts等技术打造！ 软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目...
基于Tornado实现的一套资产管理系统、支持AWS、阿里云、腾讯云、华为云自动拉取资产信息等.zip
01-21
管理系统是一种通过计算机技术实现的用于组织、监控和控制各种活动的软件系统。这些系统通常被设计用来提高效率、减少错误、加强安全性，同时提供数据和信息支持。以下是一些常见类型的管理系统： 学校管理系统： ...
servermonitor:几个简单的Web图表可实时显示服务器CPU和带宽使用情况
05-16
服务器监控器servermonitor是一个小项目，提供一些简单的网络图来显示服务器CPU和带宽使用情况关于servermonitor是一个小型项目，利用Python，PHP和javascript提供一些有关CPU和带宽使用情况的简单图形。 它通过使用...
python 用psutil、pymysql和flask快速打造简易实时网络监控系统
wh的博客
05-23 2374
文章目录快速打造简易实时监控系统一、为什么要监控服务器数据二、准备工作1. 获取网卡实时流量信息 - psutil2.存储信息 - mysql (可用mariadb或者mysql)练习：将所有的web日志都 插入到数据库中三、数据展示1.创建数据库表2.获取网卡流量并入库3.web显示4.运行三个脚本，根据提示的ip和端口信息访问页面看效果5.遇到的问题 快速打造简易实时监控系统 一、为什么要监控服务器数据 监控为什么会如此重要？ 提前预防故障发生（磁盘、内存、CPU） 发生故障及时了解，并通过历史数据回
38【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 全国图书零售监测数据
YYDataV的博客
05-16 2490
本可视化大屏案例基于16:9 屏宽比，F11全屏显示。浏览器打开播放，Chrome浏览器、360浏览器等。
Tornado实现监控数据实时展示
agurt80004的专栏
08-27 964
前言： IthasbeenawhilesinceIlastupdated my blogs. 使用Tornado开发一个实时监控信息系统，其中包括 CUP、内存、网卡、磁盘使用率。 涉及技术 编程语言：Python 关系型数据库：MySQL Web框架：Tornado 数据库连接驱动：mysql-connector-python 数据库ORM：sql...
Python-使用matplotlib.pyplot实现实时数据动态显示
艽野尘梦的博客
06-29 9711
用python做仿真一个痛点就是不能像netlogo等一些其他软件可以很方便的实现实时数据可视化，也正是由于这一点，调试仿真系统时不够直观。因此，掌握如何根据仿真系统即时生成的数据绘制动态图形很重要。已经有几位博主给出了详细的博文，这里给大家列举出来。为了增加点新东西，，方便大家读懂代码。
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
python 如何传递echart 实时数据
01-14
要传递 ECharts 实时数据，首先需要使用 Python 中的相关库来实现与 ECharts 的通信。一种常见的方法是使用 WebSocket 来实现实时数据的传递。以下是一个简单的步骤： 1. 安装相应的 Python 库： 首先，你需要安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值