安装vnstat
注意，系统时间要和客户端保持一致小时流量才是标准流量
sudo apt-get install vnstat
ifconfig //查看网卡名称是eth0还是ens3
假如你的网卡名称是ens3，修改vnstat配置文件
vi /etc/vnstat.conf
//把interface配置为ens3
# default interface
Interface "ens3"
接下来给这个网卡生成流量统计数据库
vnstat -u -i ens3 //如果是eth0则改为eth0
有可能没有权限写入数据
chmod 666 /var/lib/vnstat/.ens3
chmod 666 /var/lib/vnstat/ens3
//查看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
serverName your.site.com
DocumentRoot /var/www
//重启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目录下创建一个html文件
vi 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>
your.site.com/vnstat即可访问
image.png
image.png
网友评论