ubuntu用vnstat统计流量

安装vnstat

注意，系统时间要和客户端保持一致小时流量才是标准流量

sudo apt-get install vnstat

ifconfig  //或者 ip a 查看网卡名称是eth0还是ens3或venet0

假如你的网卡名称是venet0，修改vnstat配置文件

vi /etc/vnstat.conf

//把interface配置为venet0
# default interface
Interface "venet0"

接下来给这个网卡生成流量统计数据库

vnstat -u -i venet0  //如果是venet0则改为eth0

有可能没有权限写入数据赋权

chmod 666 /var/lib/vnstat/.venet0 
chmod 666 /var/lib/vnstat/venet0

//查看vnstat命令

vnstat --help 或 vnstat --longhelp

简单配置web端UI

sudo apt-get install apache2

//开启cgi模块

cp /etc/apache2/mods-available/cgid.load /etc/apache2/mods-enabled/cgid.load

//配置虚拟主机

vi /etc/apache2/sites-enabled/000-default.conf

<VirtualHost *:80>
ServerAdmin webmaster@localhost

serverName 127.0.0.1
#修改"serverName"
DocumentRoot /var/www
#修改"DocumentRoot"

</VirtualHost>

//重启apache

sudo service apache2 restart

在/usr/lib/cgi-bin目录下写入一个sh文件

vi /usr/lib/cgi-bin/vn.sh

#!/bin/bash
echo Content-type: text/html
echo ""
vn=$(vnstat --json)
echo $vn

修改vn.sh访问权限

chmod +x /usr/lib/cgi-bin/vn.sh

在/var/www/目录下创建一个vnstat文件

touch /var/www/vnstat

编辑index.html

vi /var/www/vnstat/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8"/>
    <title>VNstat</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}
    .header{display: flex;flex-direction:row;justify-content:center;background:#555}
    .header li{width:25%;height:50px;line-height:50px;font-size:16px;font-weight:bold;text-align:center;cursor:pointer;color:#cccccc}
    .header li.active{background:#c90024;color:#dfdfdf}
    .list li{display:none;}
    .list li.sum-info{display:block;}
    th,td{text-align:center}
    
</style>
<body>
    <div>
        <ul class="header">
            <li class="sum active">流量汇总</li>
            <li class="month">月流量</li>
            <li class="days">日流量</li>
            <li class="hours">时流量</li>
        </ul>
        <ul class="list">
            <li class="sum-info">
                <table class="table table-bordered table-hover">
                    <tr>
                        <th></th><th>更新时间</th><th>接收流量</th><th>发送流量</th><th>总流量</th>
                    </tr>
                    <tr class="sumall">
                        <td class="start"></td><td class="end"></td><td class="rx"></td><td class="tx"></td><td class="total"></td>
                    </tr>
                    <tr class="monthall">
                        <td class="start">当月流量</td><td class="end"></td><td class="rx"></td><td class="tx"></td><td class="total"></td>
                    </tr>
                    <tr class="dayall">
                        <td class="start">当天流量</td><td class="end"></td><td class="rx"></td><td class="tx"></td><td class="total"></td>
                    </tr>
                    <tr class="hourall">
                        <td class="start">当时流量</td><td class="end"></td><td class="rx"></td><td class="tx"></td><td class="total"></td>
                    </tr>
                </table>
            </li>
            <li class="month-info">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th class="uptime"></th><th>接收流量</th><th>发送流量</th><th>总流量</th>
                    </tr>
                </table>
            </li>
            <li class="days-info">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th class="uptime"></th><th>接收流量</th><th>发送流量</th><th>总流量</th>
                    </tr>
                </table>
            </li>
            
            <li class="hours-info">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th class="uptime"></th><th>接收流量</th><th>发送流量</th><th>总流量</th>
                    </tr>
                </table>
            </li>
        </ul>
    </div>
</body>

<script>
    var dt = new Date();
    var hkey = dt.getHours(); 
    
    $.get('/cgi-bin/vn.sh','',function(data){
        
        var traffic = data.interfaces[0].traffic,
            ctime = data.interfaces[0].created,
            utime = data.interfaces[0].updated,
            months = traffic.months,
            days = traffic.days,
            hours = traffic.hours;
              if(hours.length < 24){
                                var currenthour = traffic.hours[hours.length-1];
                   }else{
                                 var currenthour = traffic.hours[hkey];
                    }
            
        ctime = ctime.date.year+'-'+ctime.date.month+'-'+ctime.date.day;
        utime = utime.date.year+'-'+utime.date.month+'-'+utime.date.day+' '+utime.time.hour+':'+utime.time.minutes; 
        var total = traffic.total;
        
        //总
        $('.sumall .start').text('创建时间：'+ctime);
        $('.sumall .end').text(utime);
        $('.sumall .rx').text(formatBytes(total.rx));
        $('.sumall .tx').text(formatBytes(total.tx));
        $('.sumall .total').text(formatBytes(total.rx+total.tx));
        //月
        $('.monthall .end').text(months[0].date.year+'-'+months[0].date.month);
        $('.monthall .rx').text(formatBytes(months[0].rx));
        $('.monthall .tx').text(formatBytes(months[0].tx));
        $('.monthall .total').text(formatBytes(months[0].rx+months[0].tx));
        //日
        $('.dayall .end').text(days[0].date.year+'-'+days[0].date.month+'-'+days[0].date.day);
        $('.dayall .rx').text(formatBytes(days[0].rx));
        $('.dayall .tx').text(formatBytes(days[0].tx));
        $('.dayall .total').text(formatBytes(days[0].rx+days[0].tx));
        
        //时
        $('.hourall .end').text(currenthour.date.year+'-'+currenthour.date.month+'-'+currenthour.date.day+' '+hkey+'时');
        $('.hourall .rx').text(formatBytes(currenthour.rx));
        $('.hourall .tx').text(formatBytes(currenthour.tx));
        $('.hourall .total').text(formatBytes(currenthour.rx+currenthour.tx));
        
        //月流量
        $('.uptime').text('日期时间');
        $.each(months,function(i,v){
            var tr = "<tr><td>"+v.date.year+'-'+v.date.month+"</td><td>"+formatBytes(v.rx)+"</td><td>"+formatBytes(v.tx)+"</td><td>"+formatBytes(v.rx+v.tx)+"</td></tr>"
            $(tr).appendTo('.month-info table')
        })
        
        //日流量
        $.each(days,function(i,v){
            var tr = "<tr><td>"+v.date.year+'-'+v.date.month+'-'+v.date.day+"</td><td>"+formatBytes(v.rx)+"</td><td>"+formatBytes(v.tx)+"</td><td>"+formatBytes(v.rx+v.tx)+"</td></tr>"
            $(tr).appendTo('.days-info table')
        })
        
        //时流量
        fArr = hours.slice(0,hkey+1);
        hours.splice(0,hkey+1);
        $.each(fArr,function(i,v){
            hours.push(v);
        })
        
        $.each(hours,function(i,v){
            var tr = "<tr><td>"+v.date.year+'-'+v.date.month+'-'+v.date.day+'   '+v.id+"时</td><td>"+formatBytes(v.rx)+"</td><td>"+formatBytes(v.tx)+"</td><td>"+formatBytes(v.rx+v.tx)+"</td></tr>"
            $(tr).appendTo('.hours-info table')
        })
    },'json')
    
    $('.header li').on('click',function(){
        var index = $(this).index();
        $('.header li').removeClass('active');
        $(this).addClass('active');
        $('.list li').hide();
        $($('.list li')[index]).show();
    })
    
    
    function formatBytes(bytes){
        if (bytes === 0) return '0 K';
        var k = 1024,
            sizes = ['K','M','G','T','P','E','Z','Y'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
        if(i >= sizes.length) i = sizes.length - 1;
        return (bytes / Math.pow(k, i)).toPrecision(5) + ' ' + sizes[i];
    }
</script>
</html>

即可访问

127.0.0.1/vnstat
#127.0.0.1也可以用域名
#配置虚拟机的时候 "serverName" 后面填写域名

vnstat.png

不能访问的话添加以下

vi /etc/apache2/apache2.conf
#添加ServerName 127.0.0.1

版本不能高于vnstat 1.18 不然无法支持update 数据更新

作者：Mr_Laoyu
链接：https://www.jianshu.com/p/e9f35391072d
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。