Dernière mise à jour : 18/11/2016 à 20h19
Table des matières
Intégrer NodeJS à la ShoutBox
Vous avez besoin d'avoir un hébergeur qui propose NodeJS ou d'un VPS/dédié avec accès un accès SHELL (qui devra sans doute être root car il va falloir installer NodeJS avant de suivre le tutoriel).
Vous connaissez sûrement tous la ShoutBox de PHPBoost qui permet à vos membres de discuter "en direct" avec les autres membres. Cependant, cette boite de discussion comporte quelques défauts qui la rendre tout de suite moins attractive.
Ces défauts se trouvent au niveau du rafraichissement des messages. En effet, une requête AJAX va s'envoyer au serveur qui fera lui appel à votre base de données afin de récupérer les derniers messages. Cette requête s'effectue lorsqu'on clic sur le bouton pour rafraichir les messages, ou toutes les X secondes quand cette option est activée.
Ce problème "casse" le direct espéré avec la boite, car vous êtes obligés de rafraichir manuellement pour voir si il y a un nouveau message; ou d'attendre que les messages se rafraichissent automatiquement.
Vous pourriez trouver comme solution d'autorafraichir les messages toutes les 1 ou 2 secondes. Sauf que si vous avez 300 personnes sur votre site, votre serveur Apache ainsi que votre base de données va recevoir 300 requêtes toutes les secondes, et croyez moi que si le chiffre grimpe, on peut atteindre des stades critiques niveau performances !
C'est là qu'intervient NodeJS ainsi que Socket.io. Avec ça, nous allons pouvoir nous contenter de rafraichir les messages des utilisateurs seulement quand un nouveau message est envoyé, ce qui peut grandement limité la surcharge, et le mieux, c'est qu'il va falloir écrire même pas 30 lignes de code pour y arriver !
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 commande 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 laisser 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 un 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'émettre 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:
Et enfin pour finir, il ne reste plus qu'à envoyer un événement au serveur NodeJS lorsqu'on envoie un message, et pour cela rendez-vous à la ligne 28 (si vous avez copié mon code):
Rajoutez une ligne en dessous de la 28, et copiez le code suivant, qui enverra l'événement au serveur NodeJS pour lui signaler un nouveau message, et donc envoyer un événement aux autres pour rafraichir leurs box.
Code JAVASCRIPT :
socket.emit('new_message');
Ce qui donnera donc:
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, c'est automatique !
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 !
J'espère que ce tutoriel vous a plu, n'hésitez pas à commenter ou demander de l'aide.