VI. Tutoriels communautaires

Intégrer NodeJS à la ShoutBox

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 18/11/2016 à 19h15
Bonjour à tous.



Vous connaissez sûrement tous la shoutbox PHPBoost, que je trouve super, à un détail près: un rafraichissement toutes les X secondes.



Du coup votre shoutbox n'est pas vraiment en direct, il faut attendre qu'elle se rafraichisse toutes seule ou le faire soit-même, mais bon déjà ça fait pas mal d'appel au serveur apache, et en plus on ne peut pas facilement entretenir une conversation.



Nous allons donc voir ensemble comment faire en sorte que votre shoutbox se rafraichisse dès qu'un message est envoyé, le tout en ajoutant quelques petits code javascript et en créant une toute petite application NodeJS ! :p)



Avant de commencer le cours, veuillez suivre le lien suivant afin d'installer NodeJS sur votre plateforme !



https://openclassrooms.com/courses/des-applications-ultra-rapides-avec-node-js/installer-node-js







Créer notre serveur





Tout d'abord nous allons créer l'application NodeJS côté serveur. Commencez par créer un fichier package.json à la racine du dossier qui hébergera votre serveur NodeJS, et mettez le code suivant dedans:



Code JAVASCRIPT : 
{
    "name": "phpboost-shoutbox-nodejs",
    "version": "0.1.0",
    "dependencies": {
        "socket.io": "~1.2.1"
    },
    "author": "Alexandre NAVARO",
    "description": "Add NodeJS support to PHPBoost Shoutbox"
}




Une fois cela fais, ouvrez un terminal, placez-vous dans le dossier de package.json et fait la commade npm install afin d'installer les dépendances de notre serveur.



Une fois que cette commande est terminée gardez le terminal ouvert et créez un fichier app.js qui hébergera notre mini-serveur nodejs, en y mettant le contenu suivant:



Code JAVASCRIPT : 
var http = require('http');
var httpServer = http.createServer(function(reqeuest, response) {
});
// Vous pouvez changer le port du serveur dans la ligne suivante, mais il faudra du coup le changer cote client
httpServer.listen(1337);
var io = require('socket.io').listen(httpServer);
io.sockets.on('connection', function(socket) {
    socket.on('new_message', function() {
        socket.broadcast.emit('refresh');
    });
});




Et enfin, lancez votre application en lançant depuis le terminal de tout à l'heure la commande node app.js. Il faudra donc laissez cette commande lancez pour que le serveur tourne. Si vous êtes sur linux, le mieux sera d'installer le paquet Screen, afin de lancer la commande dans une screen pour qu'elle tourne en arrière plan.



Ajouter un script côté client





Tournons-nous maintenant vers notre application PHPBoost. Pour ma part je vous déconseille de modifier le code directement dans le dossier shoutbox, mais plutôt de dupliquer le module en modifiant la description et le nom de celui-ci, ou tout simplement en le modifiant depuis un thème de la manière suivante "/templates/{VOTRE_THEME}/modules/shoutbox/{le/les fichiers à rajouter)". Il faudra donc pour notre tutoriel modifier le fichier template ShoutboxModuleMiniMenu.tpl, qui se trouve dans "/shoutbox/templates/ShoutboxModuleMiniMenu.tpl". Il faut tout d'abord intégrer socket.io à notre application, ajoutez donc la ligne suivante au tout début du fichier, en remplacent ip_du_serveur par l'ip ou le lien de votre serveur (localhost pour les machines locales): Ensuite nous allons créer une variable qui contiendra le serveur socket.io afin d'emmettre et recevoir des événements. Pour cela copier la ligne suivante au tout début du script:



Code JAVASCRIPT : 
 var socket = io.connect('ip_du_serveur:1337');




Sautez une ligne, et nous allons maintenant rafraichir la shoutbox lorsqu'on reçoit l’éventement du serveur avec le code suivant:



Code JAVASCRIPT : 
socket.on('refresh', function() {
    shoutbox_refresh_messages_box();
});;




Ce qui donnera ceci sur votre fichier:



14d8b28804



Et enfin pour finir, il ne reste plus qu'a envoyer un évenement au serveur NodeJS lorsqu'on envoi un message, et pour cela rendez-vous à la ligne 28 (si vous avez copié mon code):



28019c1863



Rajoutez une ligne en dessous de la 28, et copiez le code suivant, qui enverra l'évenement au serveur NodeJS pour lui signaler un nouveau message, et donc envoyer un évenement aux autres pour rafraichir leurs box.



Code JAVASCRIPT : 
 socket.emit('new_message');




Ce qui donnera donc:



d43ac10ae9



Conclusion





La shoutbox de vos clients se rafraichira donc dès qu'un nouveau message aura lieu. Vous pouvez donc désactiver le rafraichissement automatique afin d'éviter une surcharge inutile du serveur, et vous pouvez même enlever le petit lien pour rafraichir les messages, ils le font tout seul !



J'ai voulu faire dans la simplicité pour ce tutoriel afin de le rendre accessible au plus grand nombre. Cependant si vous me demandez, je peux proposer un tutoriel plus complexe pour ne pas avoir à rafraichir la shoutbox avec AJAX ce qui donne lieu à une requête sur la base de données, en utilisant plutôt NodeJS pour rajouter les nouveaux messages sont passé par MySQL ! :wink



J'espère que ce tutoriel vous a plu, n'hésitez pas à commenter ou demander de l'aide.