Chat Realtime avec Node.js et Socket.io | Partie 1

Pretty Posts

By -

Bon aujourd’hui je vous montre comment faire un système de chat simple pour discuter avec votre petit(e) ami(e) par exemple sans que vous ne soyez surveillé par Google, Microsoft, Facebook ou Big Brother :-D

Voilà si vous êtes intéressés installez vous bien et lancez votre éditeur préféré c’est juste une question de quelques minutes.

Pour faire ce système de chat nous allons utiliser principalement le Framework libre événementiel Node.js créé par Ryan Dahl en 2009 et Socket.io qui est une librairie JavaScript pour faire des applications web temps réel.

Nous allons faire tout ça étape par étape; aujourd’hui je vais vous montrer les bases de node.js et socket.io, et pour la deuxième partie on fera un salon, ensuite intégrer la notion d’amis ainsi de suite jusqu’à ce qu’on ait un chat comme celui de Gmail ou Facebook.

Allez j’ai fait beaucoup de tralala on lève l’encre maintenant :-D

Node.js

Nodejs est un Framework libre événementiel en JavaScript orienté vers les applications réseau. Il faut avoir les bases en JavaScript pour pouvoir suivre ce tuto.

Pour l’installer il faut aller sur le site officiel, ensuite vous téléchargez le packet qui correspond à votre système d’exploitation et vous êtes assez grand pour la suite de l’installation :P

Pour vérifier si nodejs est bien installé nous pouvons écrire le programme “Hello World !”, hé oui on doit respecter la tradition. Créez un fichier test.js et mettez le code suivant :

 code 



Pour l’exécuter il suffit de taper la commande suivante sur le répertoire du fichier :

node test.js

Si le programme te salue ça veut dire qu’il marche sinon faites comme si je n’étais pas là (lol faites simplement un commentaire sur cet article et on va essayer de régler ça ensemble, oui je sais,  je suis gentil des fois).

On peut faire un autre test en écrivant un serveur web qui retourne “Hello World !” quel que soit la requête (Like a Boss). Voici le programme server.js :



var http = require(‘http’);





http.createServer(function(request, response){

 response.writeHead(200, {‘Content-Type’: ‘text/plain’});

 response.end(‘Hello World !’);

}).listen(1988);

console.log(‘Adresse du serveur: http://localhost:1988’);

  Voilà, si vous le lancez il va afficher le message “Adresse du serveur: http://localhost:1988” et maintenant pour le tester il faut ouvrir votre navigateur et taper l’adresse http://localhost:1988 et il vous affichera “Hello World !” si tout se passe bien. Ici nous avons importé une bibliothèque ‘http’ à la première ligne qui permet de traiter les requêtes HTTP. Ensuite nous avons créé le serveur qui prend en entrée deux paramètres : la requête (request) où on peut avoir par exemple l’url : la ressource demandée par le client et la réponse (response) qui permet de répondre au client on l’a utiliser pour définir l’en tête de la réponse.   Il y a beaucoup d’autres bibliothèques (c’est la même chose que les gems de ruby dont je vous aviez parlé ici) comme Express qui est un Framework qui ressemble à Sinatra de ruby, Mongoose qui permet des manipuler les base de données MongoDB, mysql, underscore, … Toutes ces bibliothèques sont centralisé sur ce site. Il y a une commande ‘npm’ qui vient avec l’installation de nodejs. Pour installer une bibliothèque il suffit de taper la commande

npm install <nom-de-la-bibliothèque>

Après il va créer un répertoire ‘node_modules’ où il met toutes les libraires installées donc il ne sera disponible que pour le projet. Si vous voulez installer une bibliothèque que tous les projets pourront voir il faut ajouter l’option ‘-g’ (globally) :

npm install -g <nom-de-la-bibliothèque>

Voilà, c’est tout ce que j’avais à dire sur nodejs.

Socket.io

Socket.io est une librairie nodejs de communication temps-réel bi-directionnelle. Puisque c’est une bibliothèque nodejs vous pouvez deviner comment l’installer si vous avez bien suivi :

npm install soket.io

Avec socket.io on peut développer des jeux en réseau, superviser des systèmes en temps-réel, applications de communication : messagerie instantanée ou vidéo, …

Exemple 1 : Fil Twitter en temps réel avec Socket.IO

Exemple 2 : Realtime multiplayer Web application

Comment ca marche ?

C’est simple : le serveur écoute et envoie des évènements, pareil pour le client.

Un exemple

  • le serveur : server.js

var io = require(‘socket.io’).listen(1988);
io.sockets.on(‘connection’, function(socket){
 socket.emit(‘news’, {hello: ‘world’});
 socket.on(‘un autre event’, function(data){
   console.log(data);
 });
});

Ici le serveur importe la bibliothèque ‘socket.io’ et écoute sur le port 1988. Si un client se connecte il y a un événement ‘connection’ qui est déclenché, il communique avec ce client via la variable ‘socket’ passée au callback. Ensuite il lui envoie un événement ‘news’ avec la méthode ‘emit’ en lui envoyant une donnée : la hash “{hello: ‘world’}”. Ensuite si le client envoie un évènement ‘un autre event’ il affiche la donnée reçu dans la console. Il écoute avec la méthode ‘on’.

  • le client : client.html

<script src=’http://localhost:1988/socket.io/socket.io.js’></script>

<script>
 var socket = io.connect(‘http://localhost:1988’);
 socket.on(‘news’, function(data){
   console.log(data);
   socket.emit(‘un autre event’, {my: ‘data’});
 });
</script>

Pareil pour le client, il écoute avec la méthode ‘on’ et envoie un événement avec la méthode ‘emit’.

Après avoir lancé le serveur il y a un fichier javascript “/socket.io/socket.io.js” que le client doit importer. Ensuite il établit la connection à la deuxième ligne puis il attend que le serveur lui envoie une news. S’il la reçoit il affiche la donnée et répond au serveur en lui envoyant un autre événement ‘un autre event’.

Vous pouvez avoir d’autres exemples iciJ’en ai fini avec les bases de node.js et socket.io, la prochaine fois on commence notre système de messagerie instantanée.

Sayonara ;-)

Références :

Scicasoft

Scicasoft

Je suis Cheikh Sidya CAMARA, ingénieur de conception en informatique, amoureux du langage Ruby et de son Framework Ruby On Rails.
Scicasoft

  • zipp

    A quand la partie 2 ? :)

    • Cheikh Sidya CAMARA

      Oups, sorry sous peu :-)