NodeJs ~ 04 : Construction d’un mini projet (partie2)

Ce tutoriel fait partie d’une série, cliquez ici pour accéder au sommaire.

Après avoir créé notre serveur http de fortune NodeJs, je vous ai vilement laissé sur votre faim,
je profite donc de ces quelques minutes à moi pour avancer un peu cette partie avec vous.

Aujourd’hui nous allons nous intéresser à une librairie particulièrement utile permettant d’exploiter
toute la puissance de NodeJs : j’ai nommé socket.io, une librairie de gestion des websocket.

Les websocket, quoi qu’est-ce ?

Pour faire court, c’est un protocole qui vas nous permettre une communication instantanée entre le serveur et le client, aussi notre chat n’utiliseras pas une fumeuse technique de rafraîchissement ajax tous les x secondes pour vérifier les nouveau messages, tout se fera de manière instantanée.
Ainsi pas d’échanges inutiles client/serveur, pas de latences,pas d’attentes synchrones, pas de surcharge useless du navigateur, pas d’ajax et une structure plus « propre »

Pas mal ton truc ! C’est une techno nouvelle que propose nodejs ?

Non, les websockets c’est assez vieux, ils peuvent être utilisés dans pas mal de langages et sous pas mal de serveurs ^^, c’est juste un peu obscure à utiliser la plupart du temps.

Mais alors on vas se jouer la vie ?

Pas cette fois mon tit pote (parce que par défaut, tu es mon tit pote :p) !! En nodeJs comme en php,python…[« fill here with your favorite langage »] il existe une librairie pour tout.!!

Cette fois c’est socket.io qui vas nous sauver la mise, en l’installant nous feront d’une pierre deux coup : apprendre à utiliser une librairie, et simplifier les échanges de notre chat grâce a celle ci.

Prêt ? On se lance !!

Installation de socket.io

Comment installer une librairie sous nodejs ? Avec le gestionnaire de packet NPM que nous avons déjà évoqué ! (vous suivez rien bande de gaufres).

On ouvre une console, on se place dans notre dossier hi!

 

On installe la librairie à l’aide de la commande « npm install » + nom de la librairie à installer (hardcoooore!!)

Après tout un tas de baragouin coloré et quelques messages de warning flippants plus tard (oui le gros message « error » en rouge sous Windows n’est pas aussi méchant qu’il le parait), on se retrouve avec un dossier node_modules dans notre dossier hi, c’est lui qui contiendra toutes les librairies installées avec npm sur ce projet.

On peut maintenant utiliser socket.io dans notre projet.

Notez qu’un nombre effarant de librairies sont proposées sur le site de npm, (et son donc installable de la même manière) je vous invite à y faire un tour
ça risque de vite devenir votre « cave à vin » du nodejs.

De plus tous le monde est autorisé à transformer sont projet nodejs en librairie et à la proposer à npm n’hésitez donc pas à contribuer si vous sortez une bafouille réutilisable dans d’autres projets.

Mais je digresse (« gresseuhh!!« ), focalisons nous sur socket.io

Fonctionnement de socket.io

Tout vas s’articuler autour d’un système d’événements, le serveur et le client pouvant chacun « écouter » ou « émettre un événement », par exemple :

1.Client : émet l’événement : « création message » avec pour données « contenu du message »
2.Serveur : écoute l’événement « création message » avec pour conséquence l’émission d’un autre événement « envoyer message a tous » avec pour données « contenu du message »
3.Client : écoute l’événement  « envoyer message a tous » avec pour conséquence l’affichage de ce message.

Donc en gros on vas « créer » un événement avec la fonction « emit » et on vas « écouter » les événements avec la fonction « on« .

Installation coté serveur

On reprends donc le code du précédent tuto,commençons par le code coté serveur :

En début de fichier, on récupère la librairie socket.io qui simplifie les échanges websocket

Puis on greffe socket.io au serveur http qu’on à déjà créé (après …httpServer.listen(69);)

Voila, coté serveur on peux déjà commencer à utiliser les événements.

Installation coté client

C’est encore plus simple, il suffit d’appeler une page js de manière traditionnelle

Puis quelque part dans notre javascript (disons dans main.js) on initialise la variable

socket qui vas nous permettre d’utiliser socket.io par la suite

Utilisation

On a plus qu’a placer nos événements comme on le souhaite :)

Pour commencer, créons une écoute d’événement qui vas se déclencher lorsqu’un visiteur se connecte au serveur
Pour le moment on met juste un message de log qui devrais s’afficher dans la console serveur quand quelqu’un se connecte.

Coté serveur (server.js)

On relance le serveur pour tester

On rafraîchis la page 127.0.0.1:69 et tataaaaa ! On se retrouve avec une connexion dans la console.

Appliquons cette techno à notre chat

Vous l’aurez compris il nous faudra créer tout un tas d’événements chez le client qui puissent être écouté et traité par le serveur, pour le moment on a un seul événement : « écoute d’une connexion anonyme à la page » mais nous allons devoir en créer d’autres pour les actions suivantes :

– Connexion (Identification d’un utilisateur par login + mot de passe)
– Déconnexion
– Envois d’un message

Mais il faudra également que le serveur créé lui aussi des événements pour informer les autres clients des choses importantes, prenons pour exemple une nouvelle connexion au chat :

1.Client : l’utilisateur se connecte avec son login + mot de passe –> Événement connexion

2.Serveur : reçoit le login + mdp, teste si il est bon, créé un événement pour
informer les autres clients –Événement nouveau connecté

3.Clients : notifie le nouvel arrivé avec un avatar + un message « xxx s’est connecté ».

Bref l’info n’est pas a sens unique, le serveur comme les clients ont besoin de communiquer.

Faisons tout de suite un « annuaire » des événements reçu et émis de chaque cotés histoire de ne pas nous perdre:

Client
======

> Envoyé
– Connexion anonyme à la page
– Identification (login + mot de passe)
– Nouveau message (contenu du message)
– Déconnexion
> Reçu
– Résultat de l’identification (succès ou échec)
– Nouvel utilisateur connecté (infos sur l’utilisateur)
– Nouveau message reçu (infos sur le message, texte, auteur, date…)
– Déconnexion d’un utilisateur (info sur l’utilisateur)

Serveur
=======

> Reçu
– Connexion anonyme à la page
– Identification (login + mot de passe)
– Nouveau message (contenu du message)
– Déconnexion

> Envoyé
– Résultat de l’identification (succès ou échec)
– Nouvel utilisateur connecté (infos sur l’utilisateur)
– Nouveau message reçu (infos sur le message, texte, auteur, date…)
– Déconnexion d’un utilisateur (info sur l’utilisateur)

Vous l’aurez constatés les reçu du client sont les envoyés du serveur et réciproquement, ce qui se tient, pas de réception sans émission :), évidemment vous pouvez créer un événement avec personne pour l’écouter mais c’est un peu useless :p.

Une dernière petite précision :

La librairie socket.io permet l’envois d’un événement a des « cibles » particulières, c’est a dire que vous n’êtes pas obligés d’envoyer un événement a tous le monde à chaque fois.

On envoie l’événement à tous le monde sans exception
io.sockets.emit(‘nom_evenement’,data);

On envoie l’événement uniquement à l’utilisateur courant
socket.emit(‘nom_evenement’,data);

On envoie l’événement à tous le monde sauf à l’utilisateur courant
socket.broadcast.emit(‘nom_evenement’,data);

Pratique dans certains cas, par exemple pour n’avertir que l’utilisateur courant qu’il à bien été connecté
et pour n’avertir que les autres qu’un nouvel utilisateur est connecté.

Assez palabré bande de moules, au turbin !
On vas repartir de nos sources du tuto précédent histoire de ne pas se retaper
toute la partie ‘gestion du serveur http’.

Partie client

Dans main.js

 

Dans index.html

 

dans chat.html

 

Partie serveur

server.js

 

Utilisation

On peux maintenant tester en lançant le programme:

On rafraîchis la page 127.0.0.1:69 sur le navigateur et on laisse la magie du socket opérer

Le compte par défaut est login:idleman password:idleman, vous pouvez en ajouter ou modifier le compte existant dans la page server.js

Notez bien qu’on utilise ici les sockets pour un simple chat de manière à illustrer le côté « instantané » de cette techno,
mais les sockets peuvent servir à bien des choses et vous donner un sacré coup de pouce sur toutes les applications
nécessitant une haute réactivité (statistiques en temps réel, surveillance/monitoring, domotique *sifflotte* et autres…)

Pour les mauvais élèves, l’archive du tuto est disponible ICI : nodejs-partie-2.

Article rédigé par Idleman