用nodejs和IgniteUI监控cpu和内存变化

最新推荐文章于 2024-05-30 11:27:58 发布

iteye_3843

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量942

点赞数 1

分类专栏： nodejs jQuery JS 文章标签： javascript ui ViewUI

本文链接：https://blog.csdn.net/iteye_3843/article/details/82636160

版权

nodejs 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

css代码


#chart
{
    width: 700px;
    height: 500px;
    float: left;
}
#legend
{
    float: left;
}

html代码


<head>
    <title>cpu和内存使用监控</title>

    <script src="jquery/jquery-1.11.1.min.js"></script>
    <script src="jquery-ui-1.11.1/jquery-ui.min.js"></script>
    <script src="/node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>

    <link rel="stylesheet" href="IgniteUI/css/themes/infragistics/infragistics.theme.css" />
    <link rel="stylesheet" href="IgniteUI/css/structure/infragistics.css" />
    <link rel="stylesheet" href="IgniteUI/css/structure/modules/infragistics.ui.chart.css" />
    <script src="IgniteUI/js/infragistics.core.js"></script>
    <script src="IgniteUI/js/infragistics.dv.js"></script>

    <link rel="stylesheet" href="chart.css" />
</head>
<body>
    <div id="chart"></div>
    <div id="legend"></div>

    <script type="text/javascript" src="chart.js">
    </script>

</body>

chart.js


$(function () {
    var cpuData = [];

    function toDisplayCPU(v) {
        return v.toFixed(2);
    }

    function toDisplayMem(v) {
        if (v >= (1024 * 1024 * 1024)) {
            v /= (1024 * 1024 * 1024);
            return v.toFixed(2) + "GB";
        }

        if (v >= (1024 * 1024)) {
            v /= (1024 * 1024);
            return v.toFixed(2) + "MB";
        }

        if (v >= (1024)) {
            v /= (1024);
            return v.toFixed(2) + "KB";
        }

        return v;
    }

    function renderChart() {
        var chartOptions = {
            dataSource: cpuData,
            width: "700px",
            height: "500px",
            title: "System Performance",
            subtitle: "CPU utilization over time until present",
            horizontalZoomable: true,
            verticalZoomable: true,
            rightMargin: 30,
            legend: { element: "legend" },
            axes: [{
                type: "categoryX",
                name: "xAxis",
                label: "displayTime",
                labelAngle: 45
            }, {
                type: "numericY",
                name: "yAxis",
                title: "CPU Utilization",
                minimumValue: 0,
                maximumValue: 100,
                formatLabel: toDisplayCPU
            }, {
                type: "numericY",
                name: "yAxisMemory",
                title: "Memory Utilization",
                labelLocation: "outsideRight",
                minimumValue: 0,
                maximumValue: 8 * 1024 * 1024 * 1024,
                interval: 1024 * 1024 * 1024,
                formatLabel: toDisplayMem,
                majorStroke: "transparent"
            }],
            series: [{
                name: "cpu",
                type: "line",
                xAxis: "xAxis",
                yAxis: "yAxis",
                valueMemberPath: "cpuUsage",
                showTooltip: true,
                tooltipTemplate:
        "<div><em>CPU:</em>&nbsp<span>${item.displayCPU}</span></div>",
                title: "CPU Utilization"
            }, {
                name: "mem",
                type: "line",
                xAxis: "xAxis",
                yAxis: "yAxisMemory",
                valueMemberPath: "usedMem",
                showTooltip: true,
                tooltipTemplate:
        "<div><em>Memory:</em>&nbsp<span>${item.displayMem}</span></div>",
                title: "Memory Utilization"
            }, {
                name: "itemToolTips",
                type: "itemToolTipLayer",
                useInterpolation: false,
                transitionDuration: 300
            }]
        };

        $("#chart").igDataChart(chartOptions);

    }

    renderChart();

    var socket = io.connect("http://localhost:8080");

    socket.on("cpuUpdate", function (update) {
        var currTime = new Date();
        var displayString = currTime.toLocaleTimeString();
        update.displayCPU = toDisplayCPU(update.cpuUsage);
        update.displayMem = toDisplayMem(update.usedMem);
        update.displayTime = displayString;
        cpuData.push(update);
        $("#chart").igDataChart("notifyInsertItem",
            cpuData, cpuData.length - 1, update);
    });
});

后台用nodejs、express和socket.io获取系统的cpu和内存使用


var express = require("express");
var app = express();
var server = require("http").createServer(app);
var io = require("socket.io").listen(server);
var os = require("os");
var osUtils = require("os-utils");
var interval = -1;
var currCPU = 0;

app.use(express.static(__dirname));

server.listen(8080);

io.sockets.on('connection', function () {//连接事件
    if (interval < 0) {
        interval = setInterval(function () {
            var freeMem = os.freemem();
            var totalMem = os.totalmem();
            io.sockets.emit("cpuUpdate", {
                cpuUsage: currCPU * 100.0,
                freeMem: freeMem,
                totalMem: totalMem,
                usedMem: totalMem - freeMem
            });
        }, 10);//每隔10ms取系统数据
    }
});

function updateCPU() {
    setTimeout(function () {
        osUtils.cpuUsage(function (value) {
            currCPU = value;

            updateCPU();
        });
    }, 0);
}
updateCPU();
console.log("服务器已启动");

启动server

[img]http://dl2.iteye.com/upload/attachment/0109/5223/73621274-8790-3405-96de-ad67b2d43ad3.jpg[/img]

效果如下：

[img]http://dl2.iteye.com/upload/attachment/0109/5225/fe7aa99d-5de3-3a6b-af48-71ab5a221e54.jpg[/img]

iteye_3843

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
用nodejs和IgniteUI监控cpu和内存变化

css代码[code="css"]#chart{ width: 700px; height: 500px; float: left;}#legend{ float: left;}[/code]html代码[code="html"] cpu和内存使用监控 ...
复制链接

扫一扫