Rappel

Dans la première partie de ce tuto nous avons vu comment créer un serveur nodeJS qui pour l’instant ne fait pas grand chose.

Nous allons voir maintenant comment connecté de façons persistante des utilisateurs au serveur et les faire communiquer entre eux.

Socket.io

Dans notre fichier package.json nous avons installer à l’aide de la commande npm install le module socket.io pour la partie serveur ainsi que la partie client. Ces dépendances on été misent dans le dossier node_modules.

{
   "name": "node-server-demo"
   ,"version": "0.0.1"
   ,"dependencies": {
       "express": "*"
       ,"socket.io": "0.9.16"
       ,"socket.io-client" : "0.9.16"
   }
}

Il nous faut maintenant dire au serveur node de charger le module socket.io et d’écouter les connexions au socket.

Si nous reprenons l’exemple vu dans la première partis du tuto voici ce que nous obtenons :

var express = require('express'),
	app = express(),
	server = require('http').createServer(app)
	io = require('socket.io').listen(server);

server.listen(88);

io.sockets.on('connection', function (socket)
{
	// ici notre utilisateur a demander de se connecter
});

console.log("server started on port : 88 \n");

A la ligne 4 nous créons une instance du module socket.io auquel nous disons d’écouter notre serveur et à partir de la ligne 8 on écoute la connexion des utilisateurs.

Coté client

Pour tester notre connexion au socket nous avons besoin d’une page de test. dans un autre projet nous allons créer un fichier index.html

Le contenu du fichier index.html :

My website

My website

//

Comme on peut le voir il suffit de quelques lignes de javascript pour se connecter au socket sur le poste d’un client.

Si nous nous rendons a l’adresse de notre page html dans le navigateur internet, pour notre exemple http://localhost/mywebsite/ et que nous ouvrons la console de développement web. Nous pouvons constater que la connexion c’est bien faite car le log connect apparaît.

Nous allons maintenant communiquer des données aux utilisateurs connectés.

Dans le fichier server.js nous allons créer une variable usersConnected qui comptera le nombre d’utilisateurs connectés au serveur et rajouter une ligne dans la scope de notre socket d’utilisateurs. Pour envoyer un message aux utilisateurs.

io.sockets.on('connection', function (socket)
{
	socket.emit('message', { message: 'nombre d\'utilisateur connecté : ' + ++usersConnected });
});

Du coté client nous allons écouter l’évènement message qui va attendre et écouter d’éventuel message envoyer par les serveur. On voit donc ici tout l’intérêt que peut apporter l’utilisation de socket, en effet l’utilisateur ne fait pas la demande au serveur pour recevoir des données, c’est le serveur qui les envois, l’utilisateur ne fait qu’attendre et écouter.

Pour écouter cette évènement message il suffit de faire comme pour l’évènement de connexion. Dans notre index.html nous allons rajouter.

socket.on('message', function (data)
 {
	document.getElementById('message').innerHTML = data.message;
 });

La méthode on de l’objet socket prend donc deux paramètres, le nom de l’évènement à écouter et une fonction qui prend en paramètre l’objet json envoyé par les socket coté serveur. Nous allons ajouter le message reçu a l’objet du DOM qui à l’id message.

Nous devons a nouveau redémarrer le serveur node, ensuite nous nous rendons sur notre index.html ou il devrait y avoir afficher notre message.

Si nous ouvrons d’autre onglets dans le navigateur et que l’on se rend à la même adresse, le nombre d’utilisateur connecté va incrémenter.

Le problème qui se pose est que lorsque l’on recharge la page le nombre continue d’augmenter alors qu’il s’agit du même utilisateurs, pour remédier a cela nous allons écouter la déconnexion au serveur.

Nous allons rajouter dans notre server.js les ligne suivantes

socket.on('disconnect', function ()
{
	socket.broadcast.emit('message', { message: 'nombre d\'utilisateur connecté : ' + --usersConnected });
});

Nous avons rajouté le terme broadcast avant la fonction emit, emit permet de parler a l’utilisateur concerné. broadcast signifie que nous voulons envoyer le message à tout les utilisateur excepté celui qui est concerné par l’évènement reçu par la socket coté serveur. Nous faisons ceci car il n’est pas nécessaire de de le notifié car il viens de ce déconnecté. Une fois le serveur relancé le nombre d’utilisateur envoyé par le serveur reste correcte et si nous ouvrons deux navigateurs et que nous les mettons cote à cote nous pouvons voir que lors de la déconnexion d’un utilisateur le nombre se mes a jours en temps réel.

Grace a cette technologie il est donc possible de rendre le web plus vivant avec de vrai interactions en temps réel entre utilisateur, mais aussi de créer des jeux mullti-joueurs, ce qui permet de repousser les limites du web tel que nous l’utilisons tous les jours.

Rappel

Dans la première partie de ce tuto nous avons vu comment créer un serveur nodeJS qui pour l’instant ne fait pas grand chose.

Nous allons voir maintenant comment connecté de façons persistante des utilisateurs au serveur et les faire communiquer entre eux.

Socket.io

Dans notre fichier package.json nous avons installer à l’aide de la commande npm install le module socket.io pour la partie serveur ainsi que la partie client. Ces dépendances on été misent dans le dossier node_modules.

{
   "name": "node-server-demo"
   ,"version": "0.0.1"
   ,"dependencies": {
       "express": "*"
       ,"socket.io": "0.9.16"
       ,"socket.io-client" : "0.9.16"
   }
}

Il nous faut maintenant dire au serveur node de charger le module socket.io et d’écouter les connexions au socket.

Si nous reprenons l’exemple vu dans la première partis du tuto voici ce que nous obtenons :

var express = require('express'),
	app = express(),
	server = require('http').createServer(app)
	io = require('socket.io').listen(server);

server.listen(88);

io.sockets.on('connection', function (socket)
{
	// ici notre utilisateur a demander de se connecter
});

console.log("server started on port : 88 \n");

A la ligne 4 nous créons une instance du module socket.io auquel nous disons d’écouter notre serveur et à partir de la ligne 8 on écoute la connexion des utilisateurs.

Coté client

Pour tester notre connexion au socket nous avons besoin d’une page de test. dans un autre projet nous allons créer un fichier index.html

Le contenu du fichier index.html :

My website

var socket = io.connect('http://localhost:88'); // demande de connexion
socket.on('connect', function ()
{ // La connexion est effective
console.log('connect');
});

Comme on peut le voir il suffit de quelques lignes de javascript pour se connecter au socket sur le poste d’un client.

Si nous nous rendons a l’adresse de notre page html dans le navigateur internet, pour notre exemple http://localhost/mywebsite/ et que nous ouvrons la console de développement web. Nous pouvons constater que la connexion c’est bien faite car le log connect apparaît.

Nous allons maintenant communiquer des données aux utilisateurs connectés.

Dans le fichier server.js nous allons créer une variable usersConnected qui comptera le nombre d’utilisateurs connectés au serveur et rajouter une ligne dans la scope de notre socket d’utilisateurs. Pour envoyer un message aux utilisateurs.

io.sockets.on('connection', function (socket)
{
	socket.emit('message', { message: 'nombre d\'utilisateur connecté : ' + ++usersConnected });
});

Du coté client nous allons écouter l’évènement message qui va attendre et écouter d’éventuel message envoyer par les serveur. On voit donc ici tout l’intérêt que peut apporter l’utilisation de socket, en effet l’utilisateur ne fait pas la demande au serveur pour recevoir des données, c’est le serveur qui les envois, l’utilisateur ne fait qu’attendre et écouter.

Pour écouter cette évènement message il suffit de faire comme pour l’évènement de connexion. Dans notre index.html nous allons rajouter.

socket.on('message', function (data)
 {
	document.getElementById('message').innerHTML = data.message;
 });

La méthode on de l’objet socket prend donc deux paramètres, le nom de l’évènement à écouter et une fonction qui prend en paramètre l’objet json envoyé par les socket coté serveur. Nous allons ajouter le message reçu a l’objet du DOM qui à l’id message.

Nous devons a nouveau redémarrer le serveur node, ensuite nous nous rendons sur notre index.html ou il devrait y avoir afficher notre message.

Si nous ouvrons d’autre onglets dans le navigateur et que l’on se rend à la même adresse, le nombre d’utilisateur connecté va incrémenter.

Le problème qui se pose est que lorsque l’on recharge la page le nombre continue d’augmenter alors qu’il s’agit du même utilisateurs, pour remédier a cela nous allons écouter la déconnexion au serveur.

Nous allons rajouter dans notre server.js les ligne suivantes

socket.on('disconnect', function ()
{
	socket.broadcast.emit('message', { message: 'nombre d\'utilisateur connecté : ' + --usersConnected });
});

Nous avons rajouté le terme broadcast avant la fonction emit, emit permet de parler a l’utilisateur concerné. broadcast signifie que nous voulons envoyer le message à tout les utilisateur excepté celui qui est concerné par l’évènement reçu par la socket coté serveur. Nous faisons ceci car il n’est pas nécessaire de de le notifié car il viens de ce déconnecté. Une fois le serveur relancé le nombre d’utilisateur envoyé par le serveur reste correcte et si nous ouvrons deux navigateurs et que nous les mettons cote à cote nous pouvons voir que lors de la déconnexion d’un utilisateur le nombre se mes a jours en temps réel.

Grace a cette technologie il est donc possible de rendre le web plus vivant avec de vrai interactions en temps réel entre utilisateur, mais aussi de créer des jeux mullti-joueurs, ce qui permet de repousser les limites du web tel que nous l’utilisons tous les jours.