用python 10min手写一个简易的实时内存监控系统 - 爱蘑菇的狗(2)_H5之家

前端,3秒查一次增量数据

$.getJSON('/data', function (data) { // Create the chart $('#container').highcharts('StockChart', { chart:{ events:{ load:function(){ var series = this.series[0] setInterval(function(){ $.getJSON('/data',function(res){ $.each(res,function(i,v){ series.addPoint(v) }) }) },3000) } } }, rangeSelector : { selected : 1 }, title : { text : 'AAPL Stock Price' }, series : [{ name : 'AAPL', data : data, tooltip: { valueDecimals: 2 } }] }); });

done！两个文件都搞定，double kill！效果

最终代码直接下载那个木看也行

监控文件monitor.py

import time import MySQLdb as mysql db = mysql.connect(user="reboot",passwd="reboot123",db="memory",host="localhost") db.autocommit(True) cur = db.cursor() def getMem(): f = open('/proc/meminfo') total = int(f.readline().split()[1]) free = int(f.readline().split()[1]) buffers = int(f.readline().split()[1]) cache = int(f.readline().split()[1]) mem_use = total-free-buffers-cache t = int(time.time()) sql = 'insert into memory (memory,time) value (%s,%s)'%(mem_use/1024,t) cur.execute(sql) print mem_use/1024 #print 'ok' while True: time.sleep(1) getMem()

flask

from flask import Flask,render_template,request import MySQLdb as mysql con = mysql.connect(user='reboot',passwd='reboot123',host='localhost',db='memory') con.autocommit(True) cur = con.cursor() app = Flask(__name__) import json @app.route('/') def index(): return render_template('index.html') tmp_time = 0 @app.route('/data') def data(): global tmp_time if tmp_time>0: sql = 'select * from memory where time>%s' % (tmp_time/1000) else: sql = 'select * from memory' cur.execute(sql) arr = [] for i in cur.fetchall(): arr.append([i[1]*1000,i[0]]) if len(arr)>0: tmp_time = arr[-1][0] return json.dumps(arr) if __name__=='__main__': app.run(host='0.0.0.0',port=9092,debug=True)

前端

<html> <head> <title>51reboot</title> <meta charset='utf-8'> </head> <body> hello world <div id="container" style="height: 400px; min-width: 310px"></div> <script src='/static/jquery.js'></script> <script src='/static/highstock.js'></script> <script src='/static/exporting.js'></script> <script> $(function () { // 使用当前时区，否则东八区会差八个小时 Highcharts.setOptions({ global: { useUTC: false } }); $.getJSON('/data', function (data) { // Create the chart $('#container').highcharts('StockChart', { chart:{ events:{ load:function(){ var series = this.series[0] setInterval(function(){ $.getJSON('/data',function(res){ $.each(res,function(i,v){ series.addPoint(v) }) }) },3000) } } }, rangeSelector : { selected : 1 }, title : { text : '内存数据' }, series : [{ name : '本机内存', data : data, tooltip: { valueDecimals: 2 } }] }); }); }); </script> </body> </html>

代码没有特别注意细节，希望大家喜欢。

最后 github原地址继续求star哇欢迎大家关注个人公共号,高品质运维开发

posted @