VnStatSVG: The best Web Front-end of the traffic monitoring software vnStat

VnStatSVG: The best Web Front-end of the traffic monitoring software vnStat
Introduction to vnStat

VnStat is a lightweight network traffic monitoring tool. Currently, all major Linux/BSD systems have built-in support.

VnStat only supports command line interaction, while Web Front-end is supported by third-party tools. Here we will summarize and compare several Web Front-ends of vnStat and recommend the best one for you.

 

VnStat Web Front-end comparison

The vnStat homepage recommends four frontend services:

• VnStat SVG frontend: lightweight web Front-End Based on CGI, SVG, and AJAX

  You only need an HTTP server that supports CGI to generate very beautiful SVG-based graphical reports. You can view traffic information by month, day, hour, or second, and display the top 10 traffic information.

  Because no additional PHP parser is required, Apache, Nginx, And the built-in httpd server of Busybox are easily supported.

  More importantly, vnStatSVG not only supports common Linux Hosts, but also supports servers, clusters, or small embedded systems.

• Jsvnstat-interactive network traffic analysis

  Jsvnstat is another Web Front-end that can implement simple interaction based on Javascript. However, jsvnstat relies on PHP support and does not support clusters and embedded systems.

• VnStat PHP frontend: a PHP-based Web Front-end

  It relies heavily on PHP and GD image libraries. Clusters and embedded systems are also not supported.

• Vnstatpolicrayicon (Windows): Based on the Windows platform

 

Optimal Performance of vnStatSVG

Based on the above comparison, it is not difficult to find that vnStatSVG is the best vnStat frontend.

For more features, refer to the official homepage:

• Generate a graphic report of traffic dynamically based on CGI, SVG, and AJAX (top 10/month/day/hour/Second/summary)
• Supports Apache, Nginx, Busybox httpd, and even other lightweight Web servers.
• Only CGI is supported, and PHP and other modules are not required. Therefore, the occupied space is very small.
• Because you only need to transmit traffic data in XML format from the server, the consumed bandwidth is very small.
• Monitors any network device interfaces of a single host at the same time, such as eth0, eth1...
• Monitors any number of hosts in a cluster in one window.
• The device node information on the left side can be expanded or shrunk, even if dozens of hosts are monitored at the same time.
• Supports multiple communication protocols between clusters: http, ftp, file and even ssh
• Supports multiple browser clients: Chromium, Firefox, and Safari.
• You can flexibly obtain traffic data in XML format in multiple ways.

In short, vnStatSVG not only supports common Linux Hosts, servers, clusters, but also supports small embedded systems such as Busybox.

 

VnStatSVG Quick Start

VnStatSVG home page describes its usage in detail, but it uses English. Let's briefly introduce how to quickly install and use it on the Ubuntu host in Chinese.

 

Install vnStat and Apache

1. sudo apt-get install vnstat apache2

 

Download vnStatSVG

1. git clonehttps://gitlab.com/tinylab/vnstatsvg.giT

 

Install vnStatSVG

Assume that the Apache root directory is/var/www/, You can/var/www/CreatevnstatsvgDirectory, and then install the Web Front-end below.

1. sudo-scd vnstatsvg.gitmkdir/var/www/vnstatsvg./configure-dvnstatsvgmake&&make install

If the root directory is not/var/www/, Use./configure w.

 

View traffic information on the Web

By default, it can be opened in a browser.http://localhost/vnstatsvg/Check the traffic information.

 

Add more network device nodes

You can edit/var/www/vnstatsvg/sidebar.xmlYou can also directly copy a template to modify the information of each device node:

1. sudo cp src/admin/sidebar.xml-template-4-singlehost/var/www/vnstatsvg/sidebar.xml

The configuration is as follows:

1. <?xml version='1.0'encoding='UTF-8'standalone='no'?><sidebarid="sidebar">
<!--thisconfiguration isforsingle host,the hosts anddump_tool field should be the same-->
<iface>
<name>eth0</name>
<description>Local Host</description>
</iface>
</sidebar>

For more templates, seesrc/admin/sidebar.xml-template*.

Editsidebar.xmlConfigure the node information of various network devices:

• Name: name of the network device node. The default value is eth0, eth1...
• Host: host address or domain name
• Protocol: The traffic data acquisition protocol in XML format. The default value is http.
• Dump_tool: shell by default, that is/cgi-bin/vnstat.sh
• Description: service information of a device node.

 

Supports simultaneous monitoring of multiple hosts

To monitor multiple hosts at the same time, the simplest way is to install one copy on other machines in the same way.vnstatAndvnStatSVGIn this way, you only need to configurename,hostAnddescriptionAnd keep others by default.

For example, if you want to monitorlocalhostYou can add the following configuration for the data of tinylab.org:

1. <?xml version='1.0'encoding='UTF-8'standalone='no'?>
<sidebarid="sidebar">
<!--thisconfiguration isforsingle host,the hosts anddump_tool field should be the same-->
<iface>
<name>eth0</name>
<description>Local Host</description></iface><iface>
<name>eth1</name>
<description>TinyLab.org</description>
</iface>
</sidebar>

If you do not want to install a sharedvnStatSVG, You can only installvnstatBut there is a way to copy data from other hosts to the local, for example, copy data to the localvnstatUnder the data directory/var/lib/vnstat.

For example, you can use the ssh protocol (you can configure password-free logon through the Public Key ).

1. # collect-data.sh
hosts="tinylab.org"
ifaces="eth0 eth1"
while:;do
for h in hosts
do
for i in $ifaces
do
scp ${h}:/var/lib/vnstat/${i}/var/lib/vnstat/${h}-${i}
scp ${h}:/proc/net/dev >/var/lib/vnstat/${h}-${i}-second
done
done
sleep 5
done

You can always execute this script in the background or start anothercronTask to execute the script. In this way, you can usefileVirtual protocol, the followingsidebar.xmlYou can achieve the same effect.

1. <?xml version='1.0'encoding='UTF-8'standalone='no'?>
2. <sidebarid="sidebar">
3. <!--thisconfiguration isforsingle host,the hosts anddump_tool field should be the same-->
4. <iface>
5. <name>eth0</name>
7. <description>Local Host</description>
8. </iface>
9. <iface>
10. <name>tinylab.org-eth0</name>
12. <description>TinyLab.org:eth0</description>
13. </iface>
14. <iface>
15. <name>tinylab.org-eth1</name>
17. <description>TinyLab.org:eth1</description>
18. </iface>
19. </sidebar>

 

Summary

VnStatSVG is indeed a very small but powerful vnStat web Front-end. It is highly recommended!

For more methods, such as embedded system support, refer to the project homepage.

In addition, to Add CGI support to Nginx, see Add CGI support for Nginx.

This article permanently updates the link address: