怎样用JS监控Linux服务器状态 - 问答

要使用JavaScript监控Linux服务器状态，您可以通过以下几种方法实现：

使用Ajax定期请求服务器端脚本：

创建一个服务器端脚本（例如：server_status.php），用于检查Linux服务器的状态信息，如CPU使用率、内存使用情况、磁盘空间等。然后在前端页面中使用JavaScript通过Ajax定期请求这个脚本，获取服务器状态数据并更新页面。

示例 server_status.php:

<?php
header('Content-Type: application/json');

// 获取服务器状态信息
$cpu_usage = shell_exec('top -bn1 | grep load | awk \'{printf("%.2f"), $(NF-2)}\'');
$memory_usage = shell_exec('free | grep Mem | awk \'{printf("%.2f"), $3/$2 * 100}\'');
$disk_usage = shell_exec('df -h / | grep / | awk \'{print $5}\'');

// 输出JSON格式的服务器状态数据
echo json_encode(array(
    'cpu_usage' => $cpu_usage,
    'memory_usage' => $memory_usage,
    'disk_usage' => $disk_usage
));
?>

示例 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server Status Monitor</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function updateServerStatus() {
            $.getJSON('server_status.php', function(data) {
                $('#cpu_usage').text(data.cpu_usage + '%');
                $('#memory_usage').text(data.memory_usage + '%');
                $('#disk_usage').text(data.disk_usage);
            });
        }

        setInterval(updateServerStatus, 5000); // 每5秒更新一次服务器状态
    </script>
</head>
<body>
    <h1>Server Status Monitor</h1>
    <p>CPU Usage: <span id="cpu_usage">-</span></p>
    <p>Memory Usage: <span id="memory_usage">-</span></p>
    <p>Disk Usage: <span id="disk_usage">-</span></p>
</body>
</html>

使用WebSockets：

WebSockets提供了一种在单个TCP连接上进行全双工通信的协议。您可以在服务器端创建一个WebSocket服务器，用于实时发送Linux服务器的状态信息。然后在前端页面中使用JavaScript连接WebSocket服务器，接收并显示服务器状态数据。

示例 WebSocket 服务器（使用Node.js和ws库）：

const WebSocket = require('ws');
const os = require('os');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', function(socket) {
    setInterval(() => {
        const cpu_usage = os.loadavg()[0];
        const memory_usage = (os.totalmem() - os.freemem()) / os.totalmem();
        const disk_usage = os.freemem() / os.totalmem();

        socket.send(JSON.stringify({
            cpu_usage: cpu_usage,
            memory_usage: memory_usage,
            disk_usage: disk_usage
        }));
    }, 5000); // 每5秒发送一次服务器状态数据
});

示例 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server Status Monitor</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var socket = new WebSocket('ws://localhost:8080');

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            $('#cpu_usage').text(data.cpu_usage.toFixed(2) + '%');
            $('#memory_usage').text((data.memory_usage * 100).toFixed(2) + '%');
            $('#disk_usage').text((data.disk_usage * 100).toFixed(2) + '%');
        };
    </script>
</head>
<body>
    <h1>Server Status Monitor</h1>
    <p>CPU Usage: <span id="cpu_usage">-</span></p>
    <p>Memory Usage: <span id="memory_usage">-</span></p>
    <p>Disk Usage: <span id="disk_usage">-</span></p>
</body>
</html>

请注意，这些示例仅用于演示目的。在实际应用中，您可能需要根据具体需求对代码进行调整和优化。

0 赞

0 踩