如何在PHP中获取并展示Ubuntu服务器的网络流量信息

第一步：先确保服务器安装nload #

在终端执行命令完成安装：

sudo apt update && sudo apt install nload -y

安装后可以先测试命令，用机器易解析的格式输出流量数据：

nload -t 1000 -u M -U M eth0

参数说明：

• -t 1000：每1000毫秒（1秒）刷新一次数据
• -u M：下载速率单位设为MB/s
• -U M：上传速率单位设为MB/s
• eth0：指定监控的网卡（用ip link show可查看服务器实际网卡名称，比如ens33）

第二步：PHP编写流量数据接口 #

创建get_traffic.php文件，用来调用nload并解析输出为JSON格式：

<?php
// 替换为你的服务器实际网卡名称
$interface = 'eth0';
// 调用nload并截取有效输出行
$output = shell_exec("nload -t 1000 -u M -U M $interface 2>/dev/null | head -n3");
$lines = explode("\n", trim($output));

if (count($lines) >= 3) {
    // 解析下载流量数据
    preg_match('/Curr: (\d+\.\d+) MByte\/s/', $lines[1], $downCurr);
    preg_match('/Avg: (\d+\.\d+) MByte\/s/', $lines[1], $downAvg);
    // 解析上传流量数据
    preg_match('/Curr: (\d+\.\d+) MByte\/s/', $lines[2], $upCurr);
    preg_match('/Avg: (\d+\.\d+) MByte\/s/', $lines[2], $upAvg);

    $trafficData = [
        'download' => [
            'current' => $downCurr[1] ?? '0.00',
            'average' => $downAvg[1] ?? '0.00'
        ],
        'upload' => [
            'current' => $upCurr[1] ?? '0.00',
            'average' => $upAvg[1] ?? '0.00'
        ]
    ];

    header('Content-Type: application/json');
    echo json_encode($trafficData);
} else {
    header('HTTP/1.1 500 Internal Server Error');
    echo json_encode(['error' => '无法获取流量数据，请检查网卡名称或nload安装状态']);
}
?>

第三步：前端页面实时展示流量 #

创建index.html，通过AJAX定时拉取数据并渲染成可视化效果：

<!DOCTYPE html>
<html>
<head>
    <title>网络流量监控</title>
    <style>
        .monitor-box {
            width: 450px;
            margin: 30px auto;
            font-family: monospace;
        }
        .traffic-row {
            margin: 20px 0;
        }
        .traffic-label {
            font-weight: bold;
            font-size: 16px;
        }
        .traffic-value {
            color: #27ae60;
            margin-left: 10px;
        }
        .progress-bar {
            width: 100%;
            height: 22px;
            background: #f1f2f6;
            border-radius: 11px;
            margin-top: 8px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            transition: width 0.3s ease;
        }
        .down-fill {
            background: #3498db;
        }
        .up-fill {
            background: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="monitor-box">
        <h2>服务器网络流量监控</h2>
        <div class="traffic-row">
            <span class="traffic-label">下载：</span>
            <span class="traffic-value" id="down-curr">0.00</span> MB/s 
            <span class="traffic-value">(平均：<span id="down-avg">0.00</span> MB/s)</span>
            <div class="progress-bar">
                <div class="progress-fill down-fill" id="down-progress"></div>
            </div>
        </div>
        <div class="traffic-row">
            <span class="traffic-label">上传：</span>
            <span class="traffic-value" id="up-curr">0.00</span> MB/s 
            <span class="traffic-value">(平均：<span id="up-avg">0.00</span> MB/s)</span>
            <div class="progress-bar">
                <div class="progress-fill up-fill" id="up-progress"></div>
            </div>
        </div>
    </div>

    <script>
        // 每秒刷新一次数据
        setInterval(() => {
            fetch('get_traffic.php')
                .then(res => res.json())
                .then(data => {
                    // 更新下载数据
                    document.getElementById('down-curr').textContent = data.download.current;
                    document.getElementById('down-avg').textContent = data.download.average;
                    // 进度条按当前流量占比显示（假设最大带宽为100MB/s，可根据实际调整）
                    const downPercent = (parseFloat(data.download.current) / 100) * 100;
                    document.getElementById('down-progress').style.width = downPercent + '%';

                    // 更新上传数据
                    document.getElementById('up-curr').textContent = data.upload.current;
                    document.getElementById('up-avg').textContent = data.upload.average;
                    const upPercent = (parseFloat(data.upload.current) / 100) * 100;
                    document.getElementById('up-progress').style.width = upPercent + '%';
                })
                .catch(err => console.log('数据获取失败：', err));
        }, 1000);
    </script>
</body>
</html>

注意事项 #

• 确保PHP运行用户（如www-data）有执行nload的权限，一般全局安装后默认有权限
• 前端进度条的最大带宽值可根据你的服务器实际带宽调整，让进度展示更准确
• 生产环境使用时建议添加权限验证（如IP白名单、密码验证），避免接口被恶意调用

内容的提问来源于stack exchange，提问作者Redov