{"id":826,"date":"2011-01-16T12:35:39","date_gmt":"2011-01-16T11:35:39","guid":{"rendered":"http:\/\/blog.guiguiabloc.fr\/?p=826"},"modified":"2011-01-16T12:35:39","modified_gmt":"2011-01-16T11:35:39","slug":"injection-de-donnees-en-temps-reel-sur-un-client-web","status":"publish","type":"post","link":"http:\/\/blog.guiguiabloc.fr\/index.php\/2011\/01\/16\/injection-de-donnees-en-temps-reel-sur-un-client-web\/","title":{"rendered":"Injection de donn\u00e9es en temps r\u00e9el sur un client web"},"content":{"rendered":"<p>Tout d&rsquo;abord, comme il se doit, je vous souhaite \u00e0 tous une excellente ann\u00e9e 2011 !!!<\/p>\n<p>Qu&rsquo;elle vous apporte bonheur, sant\u00e9, argent (accessoirement des filles nues d\u00e9chain\u00e9es dans votre lit le soir, une bande passante a 1Gbps, des groupies hurlant votre pr\u00e9nom a la sortie du travail et le retour de Karen Cheryl sur M6 Music (nan j&rsquo;d\u00e9conne Fred :p) ).<\/p>\n<p>Plus s\u00e9rieusement, tout le meilleur pour vous pour cette nouvelle ann\u00e9e \ud83d\ude42 et pour moi, de continuer a faire connaissance avec des bloggeurs\/acteurs du net\/forumeurs\/irc\u00e9en de talent. Je ne peux vous citer tous de peur d&rsquo;en oublier mais vous vous reconna\u00eetrez s\u00fbrement puisque, forc\u00e9ment, on a discuter ensemble ou par mail , ou sur IRC (pour ceux qui me cherche je suis sur les r\u00e9seaux Europnet (pincipalement) et Freenode), ou sur les forums, ou par commentaires interpos\u00e9s. Merci \u00e0 vous pour ses rencontres.<\/p>\n<p>Alors nouveau billet pour cette ann\u00e9e 2011. Alors oui, encore un peu li\u00e9 \u00e0 la domotique (quoi que&#8230;) (que voulez vous \u00e7a m&rsquo;\u00e9clate en ce moment) mais je pr\u00e9f\u00e8re rassurer mes lecteurs geeks intransigeants, on changera de sujet la prochaine fois \ud83d\ude09<\/p>\n<p>Ce billet donc pour vous faire partager ce que j&rsquo;ai mis en place \u00e0 mon domicile.<\/p>\n<p>Alors que je d\u00e9ploie petit \u00e0 petit mon installation domotique, un des \u00e9l\u00e9ments essentiels de la maison reste l&rsquo;interface reprenant tout les \u00ab\u00a0services\u00a0\u00bb disponibles.<\/p>\n<p>Car au bout d&rsquo;un moment, je me suis vite rendu compte qu&rsquo;il y en avait partout \ud83d\ude00<\/p>\n<p>Entre l&rsquo;interface ZoneMinder pour les cam\u00e9ras, le Domus.link pour les interfaces X10, les diverses pages vari\u00e9es de mon cru remontant les appels t\u00e9l\u00e9phoniques entrant, les mails, la m\u00e9t\u00e9o, les temp\u00e9ratures des pi\u00e8ces, Nagios, Cacti et j&rsquo;en passe et des meilleurs&#8230; J&rsquo;ai donc commencer l&rsquo;ann\u00e9e par cr\u00e9er un joli portail pour regrouper tout cela. (OMG, 2011 et je me mets \u00e0 faire du dev&#8230; l&rsquo;ann\u00e9e commence mal \ud83d\ude09 ).<\/p>\n<p>Je tiens a remercier d&rsquo;ailleurs au passage <a title=\"Le BLog de Cl\u00e9ment\" href=\"http:\/\/clement.storck.me\/\" target=\"_blank\">Cl\u00e9ment Storck<\/a> (du blog du m\u00eame nom :-p) pour son aide non n\u00e9gligeable au choix de la partie graphique de mon portail.<\/p>\n<p>Et outre la centralisation de tout cela dans mon portail, une des fonctions que je souhaitais mettre en oeuvre, c&rsquo;\u00e9tait l&rsquo;injection dans la page web de messages provenant du serveur Domotique ou d&rsquo;une autre source (Nagios par exemple) en temps r\u00e9el.<\/p>\n<p>Car je voulais \u00e9viter au possible les \u00ab\u00a0refresh\u00a0\u00bb de la page web toutes les X secondes et surtout, c&rsquo;\u00e9tait bien le serveur qui devait envoyer les messages au client et non les clients qui se devait de \u00ab\u00a0poller\u00a0\u00bb\/\u00a0\u00bbrafraichir\u00a0\u00bb pour mettre a jour les informations.<\/p>\n<p>J&rsquo;ai donc fouiller un peu le Nain Ternet pour trouver une technique sympa pour faire cela et j&rsquo;ai trouv\u00e9 mon bonheur gr\u00e2ce \u00e0 un projet OpenSource :<a title=\"http:\/\/www.ape-project.org\/\" href=\"http:\/\/www.ape-project.org\/\" target=\"_blank\"> AJAX PUSH ENGINE.<\/a><\/p>\n<p>Pour les habitu\u00e9s de ses technos, il s&rsquo;agit d&rsquo;un serveur <a title=\"http:\/\/en.wikipedia.org\/wiki\/Comet_(programming)\" href=\"http:\/\/en.wikipedia.org\/wiki\/Comet_(programming)\" target=\"_blank\">Comet<\/a>, c&rsquo;est \u00e0 dire un serveur web qui push l&rsquo;info aux navigateurx clients.<\/p>\n<p>Vous trouverez plus d&rsquo;infos sur le fonctionnement d&rsquo;APE ici :<\/p>\n<p><a title=\"http:\/\/www.ape-project.org\/ajax-push.html\" href=\"http:\/\/www.ape-project.org\/ajax-push.html\" target=\"_blank\">http:\/\/www.ape-project.org\/ajax-push.html<\/a><\/p>\n<p>NB: j&rsquo;ai pris un peu de temps a fouiller le nain ternet et \u00e0 r\u00e9cuperer des infos \u00e0 droite \u00e0 gauche et j&rsquo;ai peut-\u00eatre oubli\u00e9 de mentionner votre article correspondant, dans ce cas, n&rsquo;h\u00e9sitez pas \u00e0 me conspuer que je vous cite (avec toutes mes excuses d&rsquo;avance si je vous ai oubli\u00e9).<\/p>\n<p>Car oui, j&rsquo;ai le respect de mes sources, et donc j&rsquo;en profite pour faire un clin d&rsquo;oeil a tout ceux qui pique sans vergogne mes billets sans me pr\u00e9venir et surtout sans me citer, c&rsquo;est toujours tr\u00e8s sympa de lire ses propres lignes dans les billets\/th\u00e8ses\/articles des autres sans se voir citer, a bon entendeur&#8230; (c&rsquo;est d&rsquo;ailleurs une des principales causes de ralentissement de publication de ce blog, le d\u00e9gout de se voir copier parfois mot pour mot et qu&rsquo;en plus on t&rsquo;envoie ch&#8230; quand tu demandes juste un \u00ab\u00a0merci de citer vos sources\u00a0\u00bb&#8230;)<\/p>\n<p>Heureusement pour moi, la documentation est abondante et assez compr\u00e9hensible pour qu&rsquo;un newbie comme moi en programmation y arrive \ud83d\ude00<\/p>\n<p>Je vous invite donc \u00e0 lire ses tutoriaux :<\/p>\n<p><a title=\"http:\/\/www.ape-project.org\/wiki\/index.php\/Main\/fr\" href=\"http:\/\/www.ape-project.org\/wiki\/index.php\/Main\/fr\" target=\"_blank\">http:\/\/www.ape-project.org\/wiki\/index.php\/Main\/fr<\/a><\/p>\n<p><a title=\"http:\/\/www.lafermeduweb.net\/tutorial\/ape-ajax-push-engine-installation-configuration-et-developpement-d-une-application-basique-22.html\" href=\"http:\/\/www.lafermeduweb.net\/tutorial\/ape-ajax-push-engine-installation-configuration-et-developpement-d-une-application-basique-22.html\" target=\"_blank\">http:\/\/www.lafermeduweb.net\/tutorial\/ape-ajax-push-engine-installation-configuration-et-developpement-d-une-application-basique-22.html<\/a><\/p>\n<p><a title=\"http:\/\/wiki.strycore.com\/index.php\/Ajax_Push_Engine\" href=\"http:\/\/wiki.strycore.com\/index.php\/Ajax_Push_Engine\" target=\"_blank\">http:\/\/wiki.strycore.com\/index.php\/Ajax_Push_Engine<\/a><\/p>\n<p>et surtout l&rsquo;excellent blog de Paul, ifc0nfig.com, qui regorge de d\u00e9mos et code source :<\/p>\n<p><a title=\"http:\/\/www.ifc0nfig.com\/using-jquery-with-ape-change-the-background-color-with-php\/\" href=\"http:\/\/www.ifc0nfig.com\/using-jquery-with-ape-change-the-background-color-with-php\/\" target=\"_blank\">http:\/\/www.ifc0nfig.com\/using-jquery-with-ape-change-the-background-color-with-php\/<\/a><\/p>\n<p><a title=\"http:\/\/www.ifc0nfig.com\/diving-into-ape-modules-and-the-jsf-creating-topics-for-channels\/\" href=\"http:\/\/www.ifc0nfig.com\/diving-into-ape-modules-and-the-jsf-creating-topics-for-channels\/\" target=\"_blank\">http:\/\/www.ifc0nfig.com\/diving-into-ape-modules-and-the-jsf-creating-topics-for-channels\/<\/a><\/p>\n<p>Allez, suffit pour les liens, passons \u00e0 la mise en oeuvre :<\/p>\n<ul>\n<li><strong>Installation du serveur APE<\/strong><\/li>\n<\/ul>\n<p>La c&rsquo;est super dur \ud83d\ude09<\/p>\n<p>Rendez vous sur <a title=\"http:\/\/www.ape-project.org\/download\/APE_Server.html\" href=\"http:\/\/www.ape-project.org\/download\/APE_Server.html\" target=\"_blank\">http:\/\/www.ape-project.org\/download\/APE_Server.html<\/a><\/p>\n<p>J&rsquo;ai t\u00e9l\u00e9charger le package Debian et un petit dpkg -i , c&rsquo;est fini.<\/p>\n<p>On configure le fichier \/etc\/ape\/ape.conf<\/p>\n<pre lang=\"text\">\r\nuid {\r\nuser = www-data\r\ngroup = www-data\r\n}\r\n\r\nServer {\r\nport = 6969\r\ndaemon = yes\r\nip_listen = 0.0.0.0\r\ndomain = guiguiabloc.fr\r\n<\/pre>\n<p>On le d\u00e9marre : \/etc\/init.d\/ape-server start<\/p>\n<ul>\n<li><strong>Modification du DNS local<\/strong><\/li>\n<\/ul>\n<p>NB: Il existe une m\u00e9thode par VHOST Apache que je n&rsquo;utilise pas, je vous laisser consulter la doc.<\/p>\n<p>Petite bidouille a mettre en place sur votre serveur DNS local, il faut r\u00e9soudre *.votreserveur.votredomaine.<\/p>\n<p>En effet, vous devez cr\u00e9er un sous-domaine d\u00e9di\u00e9 au serveur APE capable de r\u00e9soudre tout les alias (un catch-all CNAME) si vous pr\u00e9f\u00e9rez.<\/p>\n<p>Dans Bind c&rsquo;est tr\u00e8s simple :<\/p>\n<pre lang=\"text\">\r\nsrv-domotique IN A 192.168.0.1\r\n*.srv-domotique IN CNAME srv-domotique\r\n<\/pre>\n<ul>\n<li><strong>Installation du Framework Javascript<\/strong><\/li>\n<\/ul>\n<p>T\u00e9l\u00e9chargez le framework APE ici :<\/p>\n<p><a title=\"http:\/\/www.ape-project.org\/download\/APE_JavaScript_Framework.html\" href=\"http:\/\/www.ape-project.org\/download\/APE_JavaScript_Framework.html\" target=\"_blank\">http:\/\/www.ape-project.org\/download\/APE_JavaScript_Framework.html<\/a><\/p>\n<p>Par simplicit\u00e9 pour les tests, je l&rsquo;ai d\u00e9compress\u00e9 a la racine de mon serveur Web (dans \/var\/www\/)<\/p>\n<p>Commencez par configurer le config.js dans \/var\/www\/ape-jsf\/Demos :<\/p>\n<pre lang=\"text\">\r\nAPE.Config.baseUrl = 'http:\/\/srv-domotique.guiguiabloc.frt\/ape-jsf'; \/\/APE JSF\r\nAPE.Config.domain = 'guiguiabloc.fr';\r\nAPE.Config.server = 'srv-domotique.guiguiabloc.fr:6969'; \/\/APE server URL\r\n<\/pre>\n<p>Vous n&rsquo;avez plus qu&rsquo;a v\u00e9rifier que tout fonctionne correctement avec l&rsquo;outil disponible :<\/p>\n<p>http:\/\/srv-domotique.guiguiabloc.fr\/ape-jsf\/Tools\/Check\/<\/p>\n<p>Si tout se passe bien vous devriez avoir une confirmation du bon fonctionnement de votre serveur APE :<\/p>\n<pre lang=\"text\">\r\nRunning test : Setting document.domain\r\nRunning test : Checking APE.Config.baseUrl\r\nAPE JSF Version 1.0\r\nRunning test : Contacting APE Server\r\ndomain = guiguiabloc.fr\r\nRunning test : Contacting APE Server (adding frequency)\r\nRunning test : Initializing APE Client\r\nRunning test : Connecting to APE Server\r\nAll test done. Now you can play with your APE \\o\/\r\n<\/pre>\n<ul>\n<li><strong>Mise en place du syst\u00e8me de message temps r\u00e9el<\/strong><\/li>\n<\/ul>\n<p>Je me suis bas\u00e9 sur la d\u00e9mo \u00ab\u00a0APEController\u00a0\u00bb fournie dans le framework.<\/p>\n<p>C\u00f4t\u00e9 serveur web :<\/p>\n<p>le config.js est le m\u00eame que d\u00e9crit plus haut.<\/p>\n<p>le guigui.js :<\/p>\n<pre lang=\"java\">\r\nAPE.Controller = new Class({\r\nExtends: APE.Client,\r\nImplements: Options,\r\noptions: {\r\ncontainer: null\r\n},\r\ninitialize: function(options){\r\nthis.setOptions(options);\r\nthis.container = $(this.options.container) || document.body;\r\nthis.onRaw('postmsg', this.onMsg);\r\nthis.addEvent('load',this.start);\r\n},\r\nstart: function(core){\r\nthis.core.start({'name': $time().toString()});\r\n},\r\nonMsg: function(raw){\r\n$('apeSendMsg').empty();\r\nnew Element('div', {\r\n'class': 'message',\r\nhtml: decodeURIComponent(raw.data.message)\r\n}).inject(this.container);\r\n},\r\n});\r\n<\/pre>\n<p>Le fichier index.html :<\/p>\n<pre lang=\"html\">\r\n...\r\n<\/style>\r\n\r\n        <script type=\"text\/javaScript\" src=\"..\/Clients\/mootools-core.js\"><\/script>\r\n        <script type=\"text\/javaScript\" src=\"..\/Clients\/MooTools.js\"><\/script>\r\n        <script type=\"text\/javaScript\" src=\"config.js\"><\/script>\r\n        <script type=\"text\/javaScript\" src=\"guigui.js\"><\/script>\r\n        <script type=\"text\/javaScript\">\r\n                window.addEvent('domready', function(){\r\n                        var client = new APE.Controller({\r\n                                container: $('apeSendMsg')\r\n                        });\r\n                        client.load({\r\n                                identifier: 'action',\r\n                                channel: 'testchannel'\r\n                        });\r\n                });\r\n        <\/script>\r\n<\/head>\r\n<body>\r\n                <div id=\"apeSendMsg\"><\/div>\r\n<\/body>\r\n<\/pre>\n<p>Et voila, reste \u00e0 ecrire un petit code en php pour injecter les messages :<\/p>\n<pre lang=\"php\">\r\n<?php\r\n$APEserver = 'http:\/\/srv-domotique.guiguiabloc.fr:6969\/?';\r\n$APEPassword = 'testpasswd';\r\n$messages = array(\r\n        $argv[1],\r\n);\r\n\r\n$cmd = array(array(\r\n  'cmd' => 'inlinepush',\r\n  'params' =>  array(\r\n          'password'  => $APEPassword,\r\n          'raw'       => 'postmsg',\r\n          'channel'   => 'testchannel',\r\n          'data'      => array(\r\n              'message' => '<b>'.$messages[array_rand($messages)].'<\/b>'\r\n          )\r\n   )\r\n));\r\n\r\nvar_dump($APEserver.rawurlencode(json_encode($cmd)));\r\n$data = file_get_contents($APEserver.rawurlencode(json_encode($cmd)));\r\n\r\n<\/pre>\n<p>Ne reste qu&rsquo;\u00e0 tester \ud83d\ude42<\/p>\n<pre lang=\"text\">\r\n~\/scripts$ php send_message.php \"Yo Guigui, bien ou bien ?\"\r\nstring(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\"\r\n<\/pre>\n<p>Et sur le client Web, vous avez le message qui s&rsquo;affiche :<\/p>\n<p><a href=\"http:\/\/blog.guiguiabloc.fr\/wp-content\/2011\/01\/ape-msg.jpg\"><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-832\" title=\"ape-msg\" src=\"http:\/\/blog.guiguiabloc.fr\/wp-content\/2011\/01\/ape-msg-300x85.jpg\" alt=\"\" width=\"300\" height=\"85\" srcset=\"http:\/\/blog.guiguiabloc.fr\/wp-content\/2011\/01\/ape-msg-300x85.jpg 300w, http:\/\/blog.guiguiabloc.fr\/wp-content\/2011\/01\/ape-msg.jpg 828w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Magique \ud83d\ude00<\/p>\n<p>Maintenant il suffit de rajouter l&rsquo;appel au script php dans votre x10.conf ou dans vos scripts Nagios pour que les messages soient pouss\u00e9s en temps r\u00e9el dans votre page Web, sympa non ? \ud83d\ude09<\/p>\n<p>On peut bien \u00e9videmment pousser plus loin le concept et par cette technique, changer \u00e0 la vol\u00e9e les images sur le navigateur du client. Bien pratique pour ajouter un calque \u00ab\u00a0rouge\u00a0\u00bb sur l&rsquo;image de la maison quand l&rsquo;alarme est enclench\u00e9e par exemple \ud83d\ude09<\/p>\n<p>Amusez-vous bien \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tout d&rsquo;abord, comme il se doit, je vous souhaite \u00e0 tous une excellente ann\u00e9e 2011 !!! Qu&rsquo;elle vous apporte bonheur, sant\u00e9, argent (accessoirement des filles nues d\u00e9chain\u00e9es dans votre lit le soir, une bande passante a 1Gbps, des groupies hurlant &hellip; <a href=\"http:\/\/blog.guiguiabloc.fr\/index.php\/2011\/01\/16\/injection-de-donnees-en-temps-reel-sur-un-client-web\/\">Read More <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,13],"tags":[153,152,154],"_links":{"self":[{"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/posts\/826"}],"collection":[{"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/comments?post=826"}],"version-history":[{"count":19,"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/posts\/826\/revisions"}],"predecessor-version":[{"id":846,"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/posts\/826\/revisions\/846"}],"wp:attachment":[{"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/media?parent=826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/categories?post=826"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.guiguiabloc.fr\/index.php\/wp-json\/wp\/v2\/tags?post=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}