[开源]基于WebSocket的实时监控(CPU,内存,磁盘等)

image alt text

# 前言

Websocket技术的强大之处在于,打通了浏览器和服务器的双向通信的高速通道。我们可以把Linux系统(CPU,IO)信息,时时返回到web端,通过Highcharts生成系统监控图,然后就成了实时监控系统。

大概实现如下几步


# 获取实时系统信息

  1. running time

    [root@linsirpi ~]# uptime 
    17:57:53 up 16 days,  1:19,  2 users,  load average: 1.25, 2.25, 2.22
    
  2. 实时cpu及内存

    [root@linsirpi ~]# vmstat 
    procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu-----
    r  b   swpd   free   buff  cache   si   so    bi    bo   in   cs us sy id wa st
    3  0      0  72904  46764 164788    0    0     0     0   26    7 37  9 54  0  0
    
  3. 温度

    [root@linsirpi ~]# cat /sys/class/thermal/thermal_zone0/temp
    49768
    [root@linsirpi ~]# cat /opt/vc/bin/vcgencmd measure_temp
    
  4. 磁盘

    [root@linsirpi ~]# df -h
    Filesystem      Size  Used Avail Use% Mounted on
    /dev/root        14G  3.5G  9.3G  27% /
    

实际上都是些常用的命令


# WebSocket Server

做过之前的在线聊天室,我们知道Tornado 的用法很简单.

class MonitorHandler(tornado.websocket.WebSocketHandler):
    clients = set()

    def check_origin(self, origin):
        return True
    def open(self):
        MonitorHandler.clients.add(self)
        print('clients: %s online.' % len(MonitorHandler.clients))
    def on_message(self, message):
        pass
    def on_close(self):
        MonitorHandler.clients.remove(self)
        print('clients: ', len(MonitorHandler.clients))

然后再通过 tornado

io_loop = tornado.ioloop.IOLoop.instance()
io_loop.add_callback(client.write_message, result)

不断发送信息给前端的Clients.


# 前端

前端很简单了,将数据整理后,再通过SmoothieChart对应的API就可以生成对应的实时图表了。

var CPUSeries = new TimeSeries();
var MEMSeries = new TimeSeries();
var smoothieChart = new SmoothieChart({
    minValue: 0.0,
    maxValue: 100.0,
    grid: {
        strokeStyle: 'rgb(223, 223, 223)',
        fillStyle: 'rgb(44,75,95)',
        lineWidth: 1,
        millisPerLine: 1000,
        verticalSections: 4
    }
});
smoothieChart.addTimeSeries(CPUSeries, {
    strokeStyle:'rgb(0, 220, 0)',
    fillStyle:'rgba(0, 220, 0, 0.4)',
    lineWidth:3
});
smoothieChart.addTimeSeries(MEMSeries, {
    strokeStyle:'rgb(171, 24, 82)',
    fillStyle:'rgba(171, 24, 82, 0.4)',
    lineWidth:3
});
smoothieChart.streamTo(document.getElementById("Chart"), 1000);

# 总结

完成后,我发现这种频繁的采集数据的方式对于性能弱小的raspberry pi有很大的资源占用。更好的方式应该是隔一定的时间采集,定期更新即可,磁盘,温度这种比较平稳采集不用实时。唉,练水项目,有空再修改吧。

最后上代码地址:

https://github.com/vi5i0n/rsp-monitor

--EOF--


>看不到评论?GFW!!!