Injection de données en temps réel sur un client web

Tout d’abord, comme il se doit, je vous souhaite à tous une excellente année 2011 !!!

Qu’elle vous apporte bonheur, santé, argent (accessoirement des filles nues déchainées dans votre lit le soir, une bande passante a 1Gbps, des groupies hurlant votre prénom a la sortie du travail et le retour de Karen Cheryl sur M6 Music (nan j’déconne Fred :p) ).

Plus sérieusement, tout le meilleur pour vous pour cette nouvelle année 🙂 et pour moi, de continuer a faire connaissance avec des bloggeurs/acteurs du net/forumeurs/ircéen de talent. Je ne peux vous citer tous de peur d’en oublier mais vous vous reconnaîtrez sûrement puisque, forcément, on a discuter ensemble ou par mail , ou sur IRC (pour ceux qui me cherche je suis sur les réseaux Europnet (pincipalement) et Freenode), ou sur les forums, ou par commentaires interposés. Merci à vous pour ses rencontres.

Alors nouveau billet pour cette année 2011. Alors oui, encore un peu lié à la domotique (quoi que…) (que voulez vous ça m’éclate en ce moment) mais je préfère rassurer mes lecteurs geeks intransigeants, on changera de sujet la prochaine fois 😉

Ce billet donc pour vous faire partager ce que j’ai mis en place à mon domicile.

Alors que je déploie petit à petit mon installation domotique, un des éléments essentiels de la maison reste l’interface reprenant tout les « services » disponibles.

Car au bout d’un moment, je me suis vite rendu compte qu’il y en avait partout 😀

Entre l’interface ZoneMinder pour les caméras, le Domus.link pour les interfaces X10, les diverses pages variées de mon cru remontant les appels téléphoniques entrant, les mails, la météo, les températures des pièces, Nagios, Cacti et j’en passe et des meilleurs… J’ai donc commencer l’année par créer un joli portail pour regrouper tout cela. (OMG, 2011 et je me mets à faire du dev… l’année commence mal 😉 ).

Je tiens a remercier d’ailleurs au passage Clément Storck (du blog du même nom :-p) pour son aide non négligeable au choix de la partie graphique de mon portail.

Et outre la centralisation de tout cela dans mon portail, une des fonctions que je souhaitais mettre en oeuvre, c’était l’injection dans la page web de messages provenant du serveur Domotique ou d’une autre source (Nagios par exemple) en temps réel.

Car je voulais éviter au possible les « refresh » de la page web toutes les X secondes et surtout, c’était bien le serveur qui devait envoyer les messages au client et non les clients qui se devait de « poller »/ »rafraichir » pour mettre a jour les informations.

J’ai donc fouiller un peu le Nain Ternet pour trouver une technique sympa pour faire cela et j’ai trouvé mon bonheur grâce à un projet OpenSource : AJAX PUSH ENGINE.

Pour les habitués de ses technos, il s’agit d’un serveur Comet, c’est à dire un serveur web qui push l’info aux navigateurx clients.

Vous trouverez plus d’infos sur le fonctionnement d’APE ici :

http://www.ape-project.org/ajax-push.html

NB: j’ai pris un peu de temps a fouiller le nain ternet et à récuperer des infos à droite à gauche et j’ai peut-être oublié de mentionner votre article correspondant, dans ce cas, n’hésitez pas à me conspuer que je vous cite (avec toutes mes excuses d’avance si je vous ai oublié).

Car oui, j’ai le respect de mes sources, et donc j’en profite pour faire un clin d’oeil a tout ceux qui pique sans vergogne mes billets sans me prévenir et surtout sans me citer, c’est toujours très sympa de lire ses propres lignes dans les billets/thèses/articles des autres sans se voir citer, a bon entendeur… (c’est d’ailleurs une des principales causes de ralentissement de publication de ce blog, le dégout de se voir copier parfois mot pour mot et qu’en plus on t’envoie ch… quand tu demandes juste un « merci de citer vos sources »…)

Heureusement pour moi, la documentation est abondante et assez compréhensible pour qu’un newbie comme moi en programmation y arrive 😀

Je vous invite donc à lire ses tutoriaux :

http://www.ape-project.org/wiki/index.php/Main/fr

http://www.lafermeduweb.net/tutorial/ape-ajax-push-engine-installation-configuration-et-developpement-d-une-application-basique-22.html

http://wiki.strycore.com/index.php/Ajax_Push_Engine

et surtout l’excellent blog de Paul, ifc0nfig.com, qui regorge de démos et code source :

http://www.ifc0nfig.com/using-jquery-with-ape-change-the-background-color-with-php/

http://www.ifc0nfig.com/diving-into-ape-modules-and-the-jsf-creating-topics-for-channels/

Allez, suffit pour les liens, passons à la mise en oeuvre :

• Installation du serveur APE

La c’est super dur 😉

Rendez vous sur http://www.ape-project.org/download/APE_Server.html

J’ai télécharger le package Debian et un petit dpkg -i , c’est fini.

On configure le fichier /etc/ape/ape.conf

uid {
user = www-data
group = www-data
}
 
Server {
port = 6969
daemon = yes
ip_listen = 0.0.0.0
domain = guiguiabloc.fr

On le démarre : /etc/init.d/ape-server start

• Modification du DNS local

NB: Il existe une méthode par VHOST Apache que je n’utilise pas, je vous laisser consulter la doc.

Petite bidouille a mettre en place sur votre serveur DNS local, il faut résoudre *.votreserveur.votredomaine.

En effet, vous devez créer un sous-domaine dédié au serveur APE capable de résoudre tout les alias (un catch-all CNAME) si vous préférez.

Dans Bind c’est très simple :

srv-domotique IN A 192.168.0.1
*.srv-domotique IN CNAME srv-domotique

• Installation du Framework Javascript

Téléchargez le framework APE ici :

http://www.ape-project.org/download/APE_JavaScript_Framework.html

Par simplicité pour les tests, je l’ai décompressé a la racine de mon serveur Web (dans /var/www/)

Commencez par configurer le config.js dans /var/www/ape-jsf/Demos :

APE.Config.baseUrl = 'http://srv-domotique.guiguiabloc.frt/ape-jsf'; //APE JSF
APE.Config.domain = 'guiguiabloc.fr';
APE.Config.server = 'srv-domotique.guiguiabloc.fr:6969'; //APE server URL

Vous n’avez plus qu’a vérifier que tout fonctionne correctement avec l’outil disponible :

http://srv-domotique.guiguiabloc.fr/ape-jsf/Tools/Check/

Si tout se passe bien vous devriez avoir une confirmation du bon fonctionnement de votre serveur APE :

Running test : Setting document.domain
Running test : Checking APE.Config.baseUrl
APE JSF Version 1.0
Running test : Contacting APE Server
domain = guiguiabloc.fr
Running test : Contacting APE Server (adding frequency)
Running test : Initializing APE Client
Running test : Connecting to APE Server
All test done. Now you can play with your APE \o/

• Mise en place du système de message temps réel

Je me suis basé sur la démo « APEController » fournie dans le framework.

Côté serveur web :

le config.js est le même que décrit plus haut.

le guigui.js :

APE.Controller = new Class({
Extends: APE.Client,
Implements: Options,
options: {
container: null
},
initialize: function(options){
this.setOptions(options);
this.container = $(this.options.container) || document.body;
this.onRaw('postmsg', this.onMsg);
this.addEvent('load',this.start);
},
start: function(core){
this.core.start({'name': $time().toString()});
},
onMsg: function(raw){
$('apeSendMsg').empty();
new Element('div', {
'class': 'message',
html: decodeURIComponent(raw.data.message)
}).inject(this.container);
},
});

Le fichier index.html :

...
</style>
 
        <script type="text/javaScript" src="../Clients/mootools-core.js"></script>
        <script type="text/javaScript" src="../Clients/MooTools.js"></script>
        <script type="text/javaScript" src="config.js"></script>
        <script type="text/javaScript" src="guigui.js"></script>
        <script type="text/javaScript">
                window.addEvent('domready', function(){
                        var client = new APE.Controller({
                                container: $('apeSendMsg')
                        });
                        client.load({
                                identifier: 'action',
                                channel: 'testchannel'
                        });
                });
        </script>
</head>
<body>
                <div id="apeSendMsg"></div>
</body>

Et voila, reste à ecrire un petit code en php pour injecter les messages :

<?php
$APEserver = 'http://srv-domotique.guiguiabloc.fr:6969/?';
$APEPassword = 'testpasswd';
$messages = array(
        $argv[1],
);
 
$cmd = array(array(
  'cmd' => 'inlinepush',
  'params' =>  array(
          'password'  => $APEPassword,
          'raw'       => 'postmsg',
          'channel'   => 'testchannel',
          'data'      => array(
              'message' => '<b>'.$messages[array_rand($messages)].'</b>'
          )
   )
));
 
var_dump($APEserver.rawurlencode(json_encode($cmd)));
$data = file_get_contents($APEserver.rawurlencode(json_encode($cmd)));

Ne reste qu’à tester 🙂

~/scripts$ php send_message.php "Yo Guigui, bien ou bien ?"
string(292) "http://srv-domotique.guiguiabloc.fr:6969/?%5B%7B%22cmd%22%3A%22inlinepush%22%2C%22params%22%3A%7B%22password%22%3A%22testpasswd%22%2C%22raw%22%3A%22postmsg%22%2C%22channel%22%3A%22testchannel%22%2C%22data%22%3A%7B%22message%22%3A%22%3Cb%3EYo%20Guigui%2C%20bien%20ou%20bien%20%3F%3C%5C%2Fb%3E%22%7D%7D%7D%5D"

Et sur le client Web, vous avez le message qui s’affiche :

Magique 😀

Maintenant il suffit de rajouter l’appel au script php dans votre x10.conf ou dans vos scripts Nagios pour que les messages soient poussés en temps réel dans votre page Web, sympa non ? 😉

On peut bien évidemment pousser plus loin le concept et par cette technique, changer à la volée les images sur le navigateur du client. Bien pratique pour ajouter un calque « rouge » sur l’image de la maison quand l’alarme est enclenchée par exemple 😉

Amusez-vous bien 😀