Graphique en temps réel avec un service web (WebSocket)

Les logs du serveur Web en temps réel sur le site du concours Quoprimo.

Visitez le site du concours et les pages de suivi des concours !

Je remonte, dans les pages de suivi des concours Quoprimo des étudiants de la licence MATIC de l’IUT de Tours, un graphique qui affiche en temps réel le suivi du serveur Web qui héberge les sites en jeu.

Le système est basé sur l’utilisation d’un service Web qui permet au serveur de contacter les clients (navigateur affichant le site) pour transmettre des données.

Ce n’est donc pas les clients affichant le site qui vont chercher les données ! c’est bien le serveur qui Push les données (comme un SMS arrive ou une notification Facebook).

Voici le principe général :

Etape 1 :

Le service web tourne en Bash depuis un script sur le serveur.
J’utilise le projet websocketd qui va créer des instances d’un autre script pour chaque connection.
Les données écrites par le script sont renvoyées aux clients connectés.
Le service web est ouvert sur un port spécifique (ici le 8080).

Etape 2 :

Ce script fait tourner la commande inotifywait qui écoute les modifications sur un fichier et lance des actions.
Le fichier écouté est le fichier des logs du serveur web nginx.
A chaque fois que le fichier est détecté comme modifié, la dernière ligne est récupérée et transmise a une fonction qui va fabriquer une structure spécifique qui sera renvoyé par le service web aux client.
Pour pourvoir ‘tuer’ proprement cette commande, je passe par un tube nommé (pipe / FIFO) qui est un fichier sur le disque. Attention : comme le service web fabrique des instances : il faut que chaque script instancié utilise un tube spécifique ! Le nom du tube est donc fabriqué a partir de la fonction mktemp pour être unique.

Etape 3 :

Pour éviter d’avoir a ouvrir un port sur le serveur, j’utilise une fonction du serveur web Nginx qui permet de transmettre certaine demandes vers un proxy.
Le service web est donc vu de l’extérieur sur le port 80 du serveur mais les paquets sont redirigés par la commande proxy vers le service web qui écoute sur un port différent.
Attention : il faut régler le timeout du proxy car sinon il coupe a 60s.

Etape 4 :

Le site web utilise la fonction HTML5 WebSocket pour ouvrir la connection avec le service web sur le serveur.
Lors de la réception d’un message du serveur, j’ajoute les données reçues à un tableau de données (graph) qui permet de modifier les données affichées.
L’affichage du graphique se base sur le projet D3js avec une astuce pour le défilement.

Le code présenté dans le process n’est pas complet ! contactez-moi par mail ou via Twitter pour avoir la suite 🙂