VnStat.js, un node pour VnStat

Date: 26/09/2011 | Catégories: Developpement,Open-source,Planet-libre,Reseau,Systeme,Web | Tags: ,,,,,

Mes derniers billets traitaient de VnStat (le logiciel pour surveiller les débits de vos interfaces Ethernet) et de Node.js (le framework permettant de créer facilement des applications réseaux coté serveur). C'est donc dans ma logique toute cartésienne, que j'ai développé un javascript permettant de disposer d'une interface Web pour consulter ces statistiques de débits sans avoir à installer un serveur Web et son plugin PHP (comme c'est le cas avec le VnStat PHP frontend).

Ce script, disponible sous licence GPL v3, s'appelle VnStat.js est disponible dans mon GitHub à l'adresse suivante:


https://github.com/nicolargo/vnstat.js

Installation

Pour fonctionner correctement, VnStat.js nécessite:

  • une installation de VnStat fonctionnelle. Je vous conseille la lecture de ce billet pour effectuer une installation "from-scratch" sur une machine tournant sous Debian / Ubuntu.
  • que le framework Node.js soit installé sur cette même machine. Le script a été validé avec la dernière version stable de Node.js (0.4.12).

On commence par récupérer la dernière version de VnStat.js depuis le dépôt Git:

[cce lag="bash"]

cd ~

git clone git://github.com/nicolargo/vnstat.js.git

cd vnstat.js

[/cce]

Pour les personnes utilisant NPM (le package manager de Node.js), vous pouvez l'utiliser pour installer VnStat.js. Suivre les instructions de cette page.

Lancement de VnStat.js

Pour lancer le noeud VnStat.js, il suffit de saisir les commandes suivantes:

[cce lag="bash"]

cd ~/vnstat.js

node ./vnstat.js

[/cce]

Le "node" va se mettre en écoute sur le port TCP 1337 de votre serveur (il faut donc ajouter une règle pour autoriser les requêtes entrantes vers ce port si vous avez un firewall).

A l'ouverture de l'URL http://adressedevotremachine:1337/ dans un navigateur compatible HTML5, la page principale suivante va s'afficher:

Elle affiche le résumé des statistiques de VnStat ainsi que le top 10 des journées. Le menu du haut permet de naviguer vers des statistiques plus ciblés.

Par heures (avec à la fois la vue graphique et textuelle):

Et ainsi de suite pour les jours, semaines (à noter qu'il n'y a pas de graphe spécifique par semaine généré par vnstati) et enfin par mois.

Configuration de VnStat.js

Le design de VnStat.js peut bien entendu être adapté à vos besoins en éditant le fichier css/style.css (CSS3). Si vous avez besoin de changer le port TCP d'écoute du node, il y a une variable pour cela dans le fichier lib/server.js.

C'est mon premier développement avec le framework Node.js, il y a sûrement des améliorations à faire mais la structure reste assez didacticiel pour servir de base pour d'autre développement du même type.

Lancement automatique de VnStat.js au démarrage de votre machine

 Comme vous avez pu le remarquer, le node VnStat.js est lancé à la main dans ce billet. Si vous souhaitez mettre en production ce script et le lancer automatiquement au démarrage de votre machine, je vous conseille la lecture du billet de Vincent sur son blog qui regorge d'information sur ce superbe framework qu'est Node.js.

  • http://www.it-wars.com/categorie8/dev Vincent RABAH

    Salut Nico, réellement sympa ce code nodejs ! Je pense que tu pourras dans une future version utiliser un outil comme express.js avec un moteur de template comme mustashe.js pour le rendu des pages web. La maintenabilité en sera améliorée !

    A+

    • http://www.nicolargo.com NicoLargo

      Merci pour ces pistes Vincent, c’est vrai que j’ai fait ce petit développement sans vraiment regarder les bibliothèques existantes :). Quand le boulot (le vrai) me laissera un peu d’énergie, j’apporterai quelques améliorations dans ce sens.

  • http://www.web4all.fr Givre

    Merci pour le partage des ces informations, c’est bien pratique, surtout ici au Canada ou l’internet est souvent limiter en Go/mois. Je vais pouvoir vérifier la facturation!

    Une petite modification qui me semble “pratique” c’est de remplacer dans vnstat.js/lib/request.js la ligne 24

    ”+

    par

    ”+

    Ajout d’un / devant css/stylye.css

    Ca permet de pouvoir avoir le style même si node n’est pas lancé depuis le répertoire courant.
    Chez moi c’est ce que j’ai fais.

    • http://www.nicolargo.com NicoLargo

      Je viens de modifier le code pour prendre en compte cette modification. Merci :)

  • http://www.web4all.fr Givre

    Bon en fait j’ai du faire autrement :)
    J’ai utilisé un script de lancement en mode daemon. Pour avoir le css + les images j’ai du modifier :

    - La fonction statichtml
    Remplacement de la ligne 40

    var filename = ‘/var/www/node.js/vnstat.js/’+uri; //path.join(process.cwd(), uri);

    par

    var filename = __dirname+’/../’+uri; //path.join(process.cwd(), uri);

    et la fonction vnstati
    Remplacement de la ligne 85

    var filename = “./vnstat”+opt+’.png’;
    par
    var filename = __dirname+”/../vnstat”+opt+’.png’;

    J’ai donc vnstat.js lancé au démarrage avec l’interface pleinement fonctionnelle :)

  • Plop

    > j’ai développé un script java

    Heu… y’a pas comme une coquille ?
    A moins que subitement un lien apparaisse par magie entre java et javascript, ils n’ont rien à voir entre eux.

    (sinon ça a l’air sympa)

    ++

    • http://www.nicolargo.com NicoLargo

      C’est effectivement un coquille !

  • Pingback: VnStat.js, un node pour VnStat | Oshimin | Scoop.it

  • Pingback: VnStat.js, un node pour VnStat | javascript.js | Scoop.it