基于web的资源视图（cpu、内存、流量）显示方案
2012-08-08 12:35
375 查看
本人第一次写blog，努力中。
言归正传。这篇博客完成的工作是在网页上以图表的方式，显示cpu、内存、流量等资源信息。先上一副效果图：
使用工具与环境：
web架构：基于python的django
画图工具：基于js的画图工具 highcharts 链接http://www.highcharts.com/
页面的基本显示由html代码负责，没啥可说的。html代码如下：
本文出自 “说话的白菜” 博客，请务必保留此出处http://speakingbaicai.blog.51cto.com/5667326/958314
言归正传。这篇博客完成的工作是在网页上以图表的方式，显示cpu、内存、流量等资源信息。先上一副效果图：
使用工具与环境：
web架构：基于python的django
画图工具：基于js的画图工具 highcharts 链接http://www.highcharts.com/
页面的基本显示由html代码负责，没啥可说的。html代码如下：
<!DOCTYPE html> <htmllang="en"> <head> <title>计算机资源视图</title> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <linkrel="stylesheet"type="text/css"href="/media/css/basic.css"/> <scripttype="text/javascript"src="/media/js/jquery-1.4.2.min.js"></script> <scripttype="text/javascript"src="/media/jschart/highcharts.js"></script> <scripttype="text/javascript"src="/media/jschart/modules/exporting.js"></script> <scripttype="text/javascript"src="/media/mjs/physical.js"></script> </head> <body> <!-- #charts --> <charts> <divclass="charts"> <divclass="chartshead"><span>主控节点 资源视图</span></div> <divid="cpu"></div> <divid="mem"></div> <divid="rx"></div> <divid="tx"></div> <brstyle="clear:both"/> </div> </charts> </body> </html>画图主要是使用js代码，使用ajax机制定时异步获得数据，然后在图上添加数据点。每5秒添加一个新点。js代码如下：
var chart_cpu;
var chart_mem;
var chart_rx;
var chart_tx;
var maxmem;
var mem;
var pre_cpu = 0
var pre_cpu_total = 0
var pre_rb = 0
var pre_tb = 0
var flag = 1
var timeout = 5000
//var para = window.location.search;
//更新
function requestData() {
var stime = new Date();
$.ajax({
//async: false,
url:'/ajax/jsonmgt',
success: function(point) {
// add 4 points
var x = (new Date()).getTime() + 8*3600*1000; // 当前时间
var out = eval("(" + point + ")")
//var out = eval( point )
maxmem = out[0]
mem = out[1]
cpu_use = out[2]
cpu_total = out[3]
rb = out[4]
tb = out[5]
memrate = mem/maxmem * 100
//cpu
d_cpu = cpu_use - pre_cpu
d_cpu_total = cpu_total - pre_cpu_total
pre_cpu = cpu_use
pre_cpu_total = cpu_total
cpurate = d_cpu/d_cpu_total *100
if(cpurate == 100)
cpurate = 99.9
//rb tb
d_rb = rb - pre_rb
d_tb = tb - pre_tb
pre_rb = rb
pre_tb = tb
rkb = d_rb/1024
tkb = d_tb/1024
if(flag == 1){
rkb = 0
tkb = 0
cpurate = 0
memrate = 0
flag =0
}
//add points
chart_cpu.series[0].addPoint([x,cpurate], true, true);
chart_mem.series[0].addPoint([x,memrate], true, true);
chart_rx.series[0].addPoint([x,rkb], true, true);
chart_tx.series[0].addPoint([x,tkb], true, true);
var etime = new Date();
d_date=etime.getTime()-stime.getTime();
setTimeout(requestData, timeout - d_date);
},
cache: false
});
}
//cpu
$(document).ready(function(){
chart_cpu = new Highcharts.Chart({
chart: {
renderTo: 'cpu', //图表放置的容器，DIV
defaultSeriesType: 'spline', //图表类型为曲线图
backgroundColor:'#DFFDFD',
events: {
//load: requestData
}
},
title: {
text: 'CPU负载'//图表标题
},
xAxis: { //设置X轴
title: { text: '时间' },
type: 'datetime', //X轴为日期时间类型
tickPixelInterval: 150 //X轴标签间隔
},
yAxis: { //设置Y轴
title: { text: 'CPU使用率' },
labels: {
formatter: function() {
returnthis.value +'%';
}
},
max: 100, //Y轴最大值
min: 0 //Y轴最小值
},
tooltip: {//当鼠标悬置数据点时的提示框
formatter: function() { //格式化提示信息
return Highcharts.dateFormat('%H:%M:%S', this.x) +' '+
Highcharts.numberFormat(this.y, 2)+'%';
}
},
legend: {
enabled: false//设置图例不可见
},
exporting: {
enabled: false//设置导出按钮不可用
},
series: [{
data: (function() { //设置默认数据，
var data = [],
time = (new Date()).getTime() + 8*3600*1000,
i;
for (i = -19; i < 0; i++) {
data.push({
x: time + i * timeout,
y: 0 * 100
});
}
return data;
})()
}]
});
});
//mem
$(function() {
chart_mem = new Highcharts.Chart({
chart: {
renderTo: 'mem', //图表放置的容器，DIV
defaultSeriesType: 'spline', //图表类型为曲线图
backgroundColor:'#DFFDFD',
events: {
}
},
title: {
text: '内存负载'//图表标题
},
xAxis: { //设置X轴
title: { text: '时间' },
type: 'datetime', //X轴为日期时间类型
tickPixelInterval: 150 //X轴标签间隔
},
yAxis: { //设置Y轴
title: { text: '内存使用记录' },
labels: {
formatter: function() {
returnthis.value + '%';
}
},
max: 100, //Y轴最大值
min: 0 //Y轴最小值
},
tooltip: {//当鼠标悬置数据点时的提示框
formatter: function() { //格式化提示信息
return Highcharts.dateFormat('%H:%M:%S', this.x) +' '+
Highcharts.numberFormat(this.y, 2) + '%' + ' ' +
Highcharts.numberFormat(mem,0) + 'MB';
}
},
legend: {
enabled: false//设置图例不可见
},
exporting: {
enabled: false//设置导出按钮不可用
},
series: [{
data: (function() { //设置默认数据，
var data = [],
time = (new Date()).getTime()+8*3600*1000,
i;
for (i = -19; i < 0; i++) {
data.push({
x: time + i * timeout,
y: 0
});
}
return data;
})()
}]
});
});
//rx
$(function() {
chart_rx = new Highcharts.Chart({
chart: {
renderTo: 'rx', //图表放置的容器，DIV
defaultSeriesType: 'spline', //图表类型为曲线图
backgroundColor:'#DFFDFD', //背景颜色
events: {
}
},
title: {
text: '网络接收流量'//图表标题
},
xAxis: { //设置X轴
title: { text: '时间' },
type: 'datetime', //X轴为日期时间类型
tickPixelInterval: 150 //X轴标签间隔
},
yAxis: { //设置Y轴
title: { text: '接收网络流量' },
labels: {
formatter: function() {
returnthis.value +'kb/s';
}
},
//max: 200, //Y轴最大值
min: 0 //Y轴最小值
},
tooltip: {//当鼠标悬置数据点时的提示框
formatter: function() { //格式化提示信息
return Highcharts.dateFormat('%H:%M:%S', this.x) +' '+
Highcharts.numberFormat(this.y, 2)+'kb/s';
}
},
legend: {
enabled: false//设置图例不可见
},
exporting: {
enabled: false//设置导出按钮不可用
},
series: [{
data: (function() { //设置默认数据，
var data = [],
time = (new Date()).getTime() + 8*3600*1000,
i;
for (i = -19; i < 0; i++) {
data.push({
x: time + i * timeout,
y: 0
});
}
return data;
})()
}]
});
});
//tx
$(function() {
chart_tx = new Highcharts.Chart({
chart: {
renderTo: 'tx', //图表放置的容器，DIV
defaultSeriesType: 'spline', //图表类型为曲线图
backgroundColor:'#DFFDFD',
events: {
load: requestData
}
},
title: {
text: '网络发送流量'//图表标题
},
xAxis: { //设置X轴
title: { text: '时间' },
type: 'datetime', //X轴为日期时间类型
tickPixelInterval: 150 //X轴标签间隔
},
yAxis: { //设置Y轴
title: { text: '发送网络流量' },
labels: {
formatter: function() {
returnthis.value +'kb/s';
}
},
//max: 200, //Y轴最大值
min: 0 //Y轴最小值
},
tooltip: {//当鼠标悬置数据点时的提示框
formatter: function() { //格式化提示信息
return Highcharts.dateFormat('%H:%M:%S', this.x) +' '+
Highcharts.numberFormat(this.y, 2)+'kb/s';
}
},
legend: {
enabled: false//设置图例不可见
},
exporting: {
enabled: false//设置导出按钮不可用
},
series: [{
data: (function() { //设置默认数据，
var data = [],
time = (new Date()).getTime() + 8*3600*1000,
i;
for (i = -19; i < 0; i++) {
data.push({
x: time + i * timeout,
y: 0
});
}
return data;
})()
}]
});
})使用ajax，就需要有数据源定期提供数据。使用c语言写一个程序（取名mgtinfo.c）抓取瞬时的cpu、内存、流量。代码如下：#include <stdlib.h>
#include <stdio.h>
#include <sys/stat.h>
typedefstruct//定义一个cpu occupy的结构体
{
char name[20]; //定义一个char类型的数组名name有20个元素
long user; //定义一个无符号的int类型的user
long nice; //定义一个无符号的int类型的nice
long system;//定义一个无符号的int类型的system
long idle; //定义一个无符号的int类型的idle
}CPU_OCCUPY;
typedefstruct//定义一个mem occupy的结构体
{
char name[20]; //定义一个char类型的数组名name有20个元素
long total;
//char name2[20];
char unit[20];
long free;
long buffers;
long cached;
}MEM_OCCUPY;
typedefstruct//定义一个cpu occupy的结构体
{
char name[20]; //定义一个char类型的数组名name有20个元素
long rb, rpkt, r_err, r_drop, r_fifo, r_frame, r_compr, r_mcast;
long tb, tpkt, t_err, t_drop, t_fifo, t_coll, t_carrier, t_compr;
}NET_OCCUPY;
int get_memoccupy (MEM_OCCUPY *mem) //对无类型get函数含有一个形参结构体类弄的指针O
{
FILE *fd;
int n;
char buf[256];
MEM_OCCUPY *m;
m=mem;
long MemFree, Buffers, Cached;
fd = fopen ("/proc/meminfo", "r");
fgets (buf, sizeof(buf), fd);
sscanf (buf, "%s %ld %s", &m->name, &m->total, &m->unit);
fgets (buf, sizeof(buf), fd);
sscanf (buf, "%s %ld %s", m->name, &m->free, m->unit);
fgets (buf, sizeof(buf), fd);
sscanf (buf, "%s %ld %s", m->name, &m->buffers, m->unit);
fgets (buf, sizeof(buf), fd);
sscanf (buf, "%s %ld %s", m->name, &m->cached, m->unit);
fclose(fd); //关闭文件fd
return 0;
}
int get_cpuoccupy (CPU_OCCUPY *cpust) //对无类型get函数含有一个形参结构体类弄的指针O
{
FILE *fd;
int n;
char buf[256];
CPU_OCCUPY *cpu_occupy;
cpu_occupy=cpust;
if ((fd = fopen ("/proc/stat", "r")) != NULL){
while (fgets (buf, sizeof(buf), fd)){
if( *buf == 'c' && *(buf + 1) == 'p') break;
}
fclose (fd);
}
else
printf("read file failed\n");
sscanf (buf, "cpu %ld %ld %ld %ld", &cpu_occupy->user, &cpu_occupy->nice,&cpu_occupy->system, &cpu_occupy->idle);
//printf("%ld\n", cpu_occupy->user);
return 0;
}
int get_netoccupy (NET_OCCUPY *net) //对无类型get函数含有一个形参结构体类弄的指针O
{
FILE *fd;
char buf[256];
NET_OCCUPY *net_occupy;
net_occupy = net;
//long MemFree, Buffers, Cached;
fd = fopen ("/proc/net/dev", "r");
fgets (buf, sizeof(buf), fd);
fgets (buf, sizeof(buf), fd);
fgets (buf, sizeof(buf), fd);
fgets (buf, sizeof(buf), fd);
//printf("%s",buf);
sscanf (buf, "%s %ld %ld %ld %ld %ld %ld %ld %ld %ld %ld", &net_occupy->name, &net_occupy->rb ,&net_occupy->rpkt, &net_occupy->r_err, &net_occupy->r_drop, &net_occupy->r_fifo ,&net_occupy->r_frame, &net_occupy->r_compr, &net_occupy->r_mcast, &net_occupy->tb, &net_occupy->tpkt);
fclose(fd); //关闭文件fd
return 0;
}
int cal_cpuoccupy (CPU_OCCUPY *o, CPU_OCCUPY *n)
{
unsigned long od, nd;
unsigned long id, sd;
int cpu_use = 0;
od = (unsigned long) (o->user + o->nice + o->system +o->idle);//第一次(用户+优先级+系统+空闲)的时间再赋给od
nd = (unsigned long) (n->user + n->nice + n->system +n->idle);//第二次(用户+优先级+系统+空闲)的时间再赋给od
id = (unsigned long) (n->user - o->user); //用户第一次和第二次的时间之差再赋给id
sd = (unsigned long) (n->system - o->system);//系统第一次和第二次的时间之差再赋给sd
if((nd-od) != 0)
cpu_use = (int)((sd+id)*10000)/(nd-od); //((用户+系统)乖100)除(第一次和第二次的时间差)再赋给g_cpu_used
else cpu_use = 0;
return cpu_use;
}
int main()
{
CPU_OCCUPY cpu_stat;
MEM_OCCUPY mem_stat;
NET_OCCUPY net_stat;
long cpu_use, cpu_total;
//获取内存
get_memoccupy ((MEM_OCCUPY *)&mem_stat);
//第一次获取cpu使用情况
get_cpuoccupy((CPU_OCCUPY *)&cpu_stat);
cpu_use = cpu_stat.user + cpu_stat.nice + cpu_stat.system;
cpu_total=cpu_stat.user + cpu_stat.nice + cpu_stat.system + cpu_stat.idle;
//printf("%ld,%ld,%ld,%ld\n",cpu_stat.user,cpu_stat.nice,cpu_stat.system,cpu_stat.idle);
get_netoccupy((NET_OCCUPY *)&net_stat);
printf("%ld,%ld,%ld,%ld,%ld,%ld\n",mem_stat.total/1024,(mem_stat.total-mem_stat.free-mem_stat.buffers-mem_stat.cached)/1024,cpu_use,cpu_total,net_stat.rb,net_stat.tb);
return 0;
}在django中，需要写一个函数jsonmgt，作为ajax请求的响应。每次执行，jsonmgt调用mgtinfo.c，获得瞬时cpu、内存、流量后，以json数据形式返回给页面。页面再用上面贴的js代码添加数据点绘图。# time data
def jsonmgt( request ):
print"calulate data"
cmd="cmd/./mgtinfo"
output = os.popen(cmd,'r')
ret = output.read()
info = ret.split(',')
maxmem = string.atof(info[0])
mem = string.atof(info[1])
cpu_use = string.atof(info[2])
cpu_total = string.atof(info[3])
rb = string.atof(info[4])
tb = string.atof(info[5])
output.close()
data = [maxmem,mem,cpu_use,cpu_total,rb,tb]
data = simplejson.dumps( data, cls = QuerySetEncoder )
return HttpResponse( data )
# django ajax
class QuerySetEncoder( simplejson.JSONEncoder ):
"""
Encoding QuerySet into JSON format.
"""
def default( self, object ):
try:
return serializers.serialize( "python", object,ensure_ascii = False )
except:
return simplejson.JSONEncoder.default( self, object )本文出自 “说话的白菜” 博客，请务必保留此出处http://speakingbaicai.blog.51cto.com/5667326/958314
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Hadoop Yarn内存资源隔离实现原理——基于线程监控的内存隔离方案
- 基于nagios的监控环境（四）：第三方插件监控流量、CPU、内存、进程
- Hadoop Yarn内存资源隔离实现原理——基于线程监控的内存隔离方案
- 深入剖析Spring Web源码（十七） - 视图解析和视图显示 - 基于URL的视图解析器和视图
- 基于纯Java代码的Spring容器和Web容器零配置的思考和实现（2） - 静态资源、视图和消息器
- Hadoop Yarn内存资源隔离实现原理——基于线程监控的内存隔离方案
- Emmagee是监控指定被测应用在使用过程中占用机器的CPU、内存、流量资源的性能测试小工具
- Java实现查看Web部署在Linux所在机的CPU、内存、I/O运行情况
- Ubuntu 15.1 unity在顶部面板显示系统CPU/内存/网络速度
- 【问底】徐汉彬：高并发Web服务的演变——节约系统内存和CPU
- Android开发中使用WebView视图显示网页的注意点
- android--- Linux Proc虚拟文件系统—Android CPU、内存、网络流量获取
- 关于Android的查询CPU、流量、内存以及获取一个app的启动activity
- 基于淘宝Tengine和Scribe的WEB日志收集方案
- iphone打开文本视图中的超连接显示在网页视图中。opening links in a UITextView in a web view
- ubuntu查看系统资源占用（内存,cpu和进程)
- 查看基于Android 系统单个进程内存、CPU使用情况的几种方法
- 【问底】徐汉彬：高并发Web服务的演变——节约系统内存和CPU
- 徐汉彬：高并发Web服务的演变——节约系统内存和CPU