Les websocket - Tutoriel avec Node JS

Qu’est ce que les websockets ?

Définition de wikipédia : Le protocole WebSocket vise à développer un canal de communication bidirectionnel et full-duplex sur un socket TCP pour les navigateurs et les serveurs web.

C’est une des technologies apportées par HTML5. En fait il s’agit de permettre l’ouverture d’une connexion réseau entre une page web et un serveur. Voici un petit schéma pour mieux comprendre :

Les avantages sont multiples :

permettre au serveur d’envoyer des données vers les pages connectées (impossible avec Ajax)
économie de bande passante. On ouvre la connexion vers le serveur et on transmet tout ce que l’on veut dans les 2 sens (page vers serveur, serveur vers page).
rapidité de transmission des données

Node JS

Node JS est un des nombreux serveurs permettant de faire du Web Socket. C’est celui que nous allons utiliser dans ce tutoriel.

Helloworld

Téléchargez la dernière version et installez-la. Ensuite créer un fichier test.js dans C:Progam Filesnodejs
Dans ce fichier placer le code suivant :

console.log('Helloworld');

Notre fichier serveur est fait. Il faut maintenant lancer votre serveur. Pour cela ouvrez une invite de commande et placez-vous dans le dossier nodejs : cd C:Progam Filesnodejs puis taper simplement node test.js. Vous devriez voir apparaitre Helloworld.

Socket IO

Maintenant pour faire communiquer une page web avec notre serveur nous allons utiliser le plugin socket.io. Toujours dans votre invite de commande tapez : npm install socket.io

Si vous obtenez des erreurs pendant l’installation relancez votre invite de commande en mode administrateur (cliquez droit puis ‘Exécuter en tant qu’administrateur’).

Une fois l’installation de socket.io terminé reprenez votre fichier test.js et placez y ce code :

var http = require("http");
httpServer = http.createServer()
httpServer.listen(8888);
var io = require('socket.io').listen(httpServer);
io.sockets.on('connection', function (socket) {
   socket.emit('connected', 'Connexion ok');
});

On fait écouter notre serveur sur le port 8888 et lorsque l’on reçoit une connexion on émet l’événement connected avec comme données envoyés au client : ‘Connexion ok’.

Maintenant nous allons créer une page web qui va communiquer avec notre serveur : on va se connecter sur le serveur sur le port 8888 et attendre l’événement connected. Avant de pouvoir réaliser ça on va devoir télécharger la version client de socket.io : socket.io.js. Placer ce fichier dans le même dossier que votre future page web. Voici le code de la page en question :

<!doctype html>
<html>
<head>
<script src="socket.io.js"></script>
<script>
    socket = io.connect('http://localhost:8888');
    socket.on('connected', function (data) {
        alert(data);
    });
</script>
</head>
<body>
</body>
</html>

Maintenant lancez votre serveur (node test.js) et accédez à votre page web. Vous devriez voir ‘Connexion ok’.

Pour faire simple il y a 2 choses à retenir :
quand vous voulez envoyés des données : socket.emit(‘event’, data);
quand vous recevez des données : socket.on(‘event’, function(data){ });

Et ce que vous soyez coté client ou coté serveur.

Du coté du serveur socket.broadcast.emit(‘event’, data); permet d’envoyer des données à tous les client connectés.

Vidéo de démonstration

Pour terminer voici une petite démonstration de communication entre un IPhone et un Firefox sur un PC de bureau grâce à Node JS :

Cette technologie ouvre bien des portes, notamment dans le domaine du jeux vidéo et des applications multi-utilisateurs.

Rechercher

Les websocket – Tutoriel avec Node JS