I. Introduction▲
Node.js pour les développeurs jQuery est un article destiné aux développeurs front end qui souhaitent se lancer dans l'aventure du développement JavaScript côté serveur.
Vous allez découvrir, pour ceux qui en doutaient encore, que la réputation de jQuery ne tient pas seulement à sa faculté de manipuler facilement les éléments du DOM ou d'être compatible avec la majorité des navigateurs. Mais il la tient aussi par ses patterns, son concept d'objet unique, son système de plugins et surtout sa faculté à être simple, accessible et en perpétuelle évolution.
Cet article est articulé autour d'exercices et d'exemples de solutions qui vont vous permettre d'appréhender quelques concepts de Node.js et jQuery, tout en développant des briques logicielles qui pourront vous suivre sur vos futurs projets.
Les exemples de code décrits dans cet article sont téléchargeables ici ou disponibles sur github.
Les descriptions d'API données dans cet article ne sont pas forcément complètes.
Elles se limitent aux fonctionnalités nécessaires pour suivre les exemples de l'article.
N'hésitez pas à visiter la documentation officielle des API pour avoir une description exhaustive.
II. Présentation▲
Au même titre que les interpréteurs Perl, Python ou encore PHP, Node.js est un interpréteur pour le langage JavaScript. Basé sur le moteur JavaScript V8 de Chrome, il fait partie des moteurs JavaScript les plus performants.
À l'inverse du PHP qui se greffe sur un serveur Web (Apache, IIS…) afin de s'acquitter de la gestion du protocole HTTP, Node.js propose de créer votre propre serveur Web ou WebSocket grâce à son framework qui, heureusement, vous simplifie grandement la tâche.
Cependant, rien ne vous oblige à créer votre serveur Web en JavaScript. Node.js peut aussi servir de complément à un serveur Web plus robuste afin de ne gérer que la partie communication temps réel (sa spécialité...).
III. Installation▲
L'installation étant assez simple que ce soit sous Windows, Mac OS X ou Linux, je ne m'étendrais pas sur ce paragraphe. Sachez seulement que Node.js fait office de serveur Web. À ce titre, il doit être installé sur la machine qui tiendra le rôle de serveur.
Vous pouvez télécharger Node.js directement sur son site internet :
http://nodejs.org/
IV. Votre premier serveur HTTP▲
À la fin de ce chapitre, vous comprendrez le mécanisme de Node.js et vous serez capable de créer un serveur HTTP de base.
IV-A. Rappel sur la communication Navigateur/Serveur▲
Avant d'aller plus loin, il faut bien comprendre le principe de communication entre le navigateur internet de l'utilisateur et le serveur Web.
Voici ce qui se passe lorsqu'un utilisateur entre une URL sur son navigateur internet :
IV-B. Fonctions nécessaires au développement du serveur▲
IV-B-1. Inclusion d'un module JavaScript▲
La fonction require permet d'inclure un fichier JavaScript. À la différence des fichiers JavaScript côté client, avec Node.js on parle de « module ».
Un « module » peut retourner un résultat qui, dans le framework de Node.js, est en général un objet à instancier.
Pour que votre module retourne une valeur, il suffit de donner cette valeur à la variable globale module.exports.
Nous n'étudierons pas plus cette notion dans cet article, mais il important de la connaître car le framework de Node.js est basé sur ce principe.
La fonction require ne recharge pas les modules à chaque fois, mais elle ne les charge que lors du premier appel.
Par la suite, elle se contente de retourner l'instance stockée.
IV-B-2. Module http▲
Le module http est intégré de base avec Node.js. Il retourne un objet JavaScript qui permet de créer un serveur HTTP facilement.
Voici le code permettant d'inclure le module http :
var http = require('http') ;
Pour créer l'instance de votre serveur, vous devez utiliser la commande http.createServer( callback( request, response ) ).
Exemple d'utilisation :
La fonction callback est appelée à chaque fois qu'un utilisateur appelle une page depuis son navigateur.
La commande précédente permet de créer l'instance du serveur, mais il faut maintenant que ce dernier se mette en écoute sur un port IP. C'est le rôle de la commande listen( port, name ).
Exemple d'utilisation :
server.listen( 80, '127.0.0.1' ) ;
Enfin, il y a les commandes response.writeHead et response.end qui permettent respectivement de renvoyer la partie HEADER du protocole HTTP et la partie données.
La partie HEADER du protocole HTTP est invisible pour l'utilisateur mais nécessaire au navigateur, entre autres pour indiquer de quelle manière il doit afficher les données (page HTML, page Ajax, fichier ZIP…).
Exemple d'utilisation de response.writeHead( code, options ) :
response.writeHead( 404, {'Content-Type': 'text/plain'} ) ;
Le paramètre code correspond au code HTTP de retour. Les plus utilisés sont le code 200 = statut OK, et le code 404 = fichier non trouvé.
Vous trouverez sur Wikipedia la liste complète des codes HTTP.
'Content-Type' correspond au type de fichier renvoyé par le serveur.
Vous en trouverez ici une liste non exhaustive.
Exemple d'utilisation de response.end( data ) :
response.end( 'Fichier non trouvé' ) ;
IV-B-3. Exécution d'un script Node.js▲
Pour exécuter un script Node.js, il suffit d'exécuter la commande suivante :
node {nom_du_fichier}
L'extension '.js' n'est pas obligatoire.
Pour un fichier 'fichier.js' vous pouvez donc l'exécuter avec la commande node fichier.js ou encore node fichier.
IV-C. Exercice▲
Vous devez créer dans le fichier hello-world.js un serveur HTTP qui retourne Hello World quelle que soit la page demandée par l'utilisateur.
Le serveur doit écouter le port 1337.
IV-D. Exemple de solution▲
Pour créer votre serveur, suivez les actions suivantes :
- créez le répertoire de notre projet ;
- dans ce répertoire, créez un fichier hello-world.js ;
- puis insérez le code suivant dans le fichier hello-world.js :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
/**
* Simple Hello World
*/
;(function( http /* variable qui reçoit le module http */ ){
// Création du serveur HTTP
http.createServer( function (req, res) { // fonction de callback appelée pour chaque appel de page
// code de statut 200 (OK) et retourne un fichier de type 'text/plain'
res.writeHead(200, {'Content-Type': 'text/plain'});
// Le fichier retourné contient le texte 'Hello World'
res.end('Hello World\n');
} )
.listen(1337, "127.0.0.1"); // Le serveur écoutera le port 1337
})( require('http') /* inclue le module http */ );
- ouvrez un terminal dans le répertoire de votre projet ;
- exécutez la commande suivante : node hello-world.js;
- lancez votre navigateur Web préféré sur l'URL http://127.0.0.1:1337.
Vous devez avoir une page comme celle-ci qui s'affiche :
Vous remarquerez que notre code est encapsulé dans une fonction anonyme. Ce n'est pas obligatoire, mais c'est pratique pour fournir les modules nécessaires à notre code tout en créant un contexte de développement dédié.
Vous remarquerez également que le premier caractère (en dehors des commentaires) est un ';'.
Ça permet de protéger votre code contre les scripts qui se terminent sans ';' dans le cas où vous utiliseriez un outil pour compresser tous vos scripts en un seul et unique fichier.
V. Développement d'un serveur HTTP générique▲
Maintenant que vous maitrisez le concept de Node.js, nous allons pouvoir intégrer les notions de jQuery qui vont vous permettre de faire évoluer votre serveur HTTP actuel vers un serveur plus générique comme Apache (mais en moins poussé bien sûr).
V-A. Quelques rappels sur jQuery▲
Avant de commencer nos développements jQuery, nous allons commencer par quelques petits rappels sur certaines spécificités de jQuery.
V-A-1. Encapsulation jQuery▲
Lorsqu'on développe côté front end, on utilise généralement la fonction jQuery avec deux types de données :
- les chaines de caractères, avec une expression CSS afin de sélectionner un élément du DOM ou une liste d'éléments du DOM contenus dans notre page HTML (exemple : $('#id_mon_element')) ;
- des fonctions qui sont appelées lorsque le document est initialisé (exemple : $(function(){ /* code appelé une fois la page complètement chargée */ })).
Mais la fonction jQuery peut aussi être appelée avec d'autres types de données, comme des structures (exemple : $({})) ou des tableaux (exemple : $([{}, {}])).
L'intérêt de cette utilisation côté front end est limité à des cas très particuliers. Par contre vous verrez que pour un développement Node.js, cette faculté va nous être particulièrement utile.
V-A-2. Plugin jQuery▲
Une autre particularité de jQuery qu'on apprécie beaucoup côté front end, est sa gestion des plugins. Encore une fois, côté client, on se limite plus souvent à utiliser des plugins existants plutôt qu'à en créer de nouveaux.
Sur Node.js ce sera l'inverse, on va plutôt avoir tendance à en créer. Surtout aujourd'hui où le nombre de plugins jQuery pour Node.js est très limité.
Voici un petit rappel sur la façon (plutôt une des façons) de créer un plugin jQuery :
2.
3.
4.
5.
6.
7.
8.
9.
10.
;(function($){
$.fn.notrePlugin = function(/* liste des paramètres si nécessaire */){
// 'this' correspond ici à l'objet jQuery auquel s'applique le plugin (celui qui l'a appelé)
this.each(function(){
// ici, 'this' correspond à la valeur en cours de l'itération
}) ;
return this ; // on retourne toujours notre objet jQuery pour ne pas casser la chaine
} ;
)(jQuery) ;
Donc si on utilise jQuery avec des structures, ça pourrait donner :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
// on encapsule notre code
;(function($){
// on crée notre plugin
$.fn.notrePlugin = function(){
return this.each(function(){
console.log( 'mon_texte : %s', this.mon_texte ) ; // on affiche le paramètre mon_texte de la structure contenue dans 'this'
}) ;
} ;
// on appelle notre plugin sur une structure
$({
mon_texte : 'ma première structure'
}).notrePlugin() ; // Affiche dans la console 'mon_texte : ma première structure'
// on appelle notre plugin 2 fois sur une structure
$({
mon_texte : 'je suis appelé 2 fois'
}) .notrePlugin()
.notrePlugin() ; // Affiche 2 fois la ligne 'mon_texte : je suis appelé 2 fois'
// on appelle notre plugin sur un tableau de structures
$([
{
mon_texte : 'Je suis la première structure'
},
{
mon_texte : 'Je suis la seconde structure'
}
]).notrePlugin() ; // Affiche dans la console 'mon_texte : Je suis la première structure' puis 'mon_texte : Je suis la seconde structure'
})(jQuery) ;
V-A-3. .data▲
Une autre fonctionnalité de jQuery qu'on va utiliser dans cet article est la fonction .data. Cette fonction nous permet d'enregistrer des informations sur un objet encapsulé par jQuery.
Voici un exemple d'utilisation :
2.
3.
4.
var mon_objet = {} ;
$(mon_objet).data('donnee', 'Donnée enregistrée') ;
console.log( $(mon_objet).data('donnee') ) ; // Affiche dans la console 'Donnée enregistrée'
V-B. Fonctions nécessaires au développement du serveur▲
V-B-1. Module url▲
Le module url permet de simplifier la lecture d'une URL. Pour votre serveur HTTP, je vous propose d'utiliser la fonction url.parse afin de récupérer le pathname de l'URL.
Exemple d'utilisation de la fonction url.parse( url ) :
Vous pouvez récupérer l'URL de la page demandée, à l'intérieur de la callback de la fonction http.createServer( callback( request, response ) ) grâce au champ request.url.
V-B-2. Module fs▲
Le module fs (File System) permet d'accéder au système de fichier du serveur. Il peut, entre autres, nous permettre de lire un fichier grâce à la fonction fs.readFile.
Exemple d'utilisation de la fonction fs.readFile( filename, callback( error, data ) ) :
V-B-3. Installation de module▲
Lors de l'installation de Node.js, vous avez aussi installé NPM (Node Packaged Modules). Cet outil permet d'installer des modules complémentaires pour votre projet.
Utilisation de NPM pour installer un module :
npm install {nom_du_module}
Vous devez ouvrir un terminal dans le répertoire de votre projet avant d'exécuter cette commande.
Vous trouverez la liste complète des modules NPM sur https://npmjs.org/
Vous pourriez, entre autres, avoir besoin des modules jquery ou websocket…
La plupart des frameworks existants pour une utilisation front end ne sont pas compatibles directement avec Node.js à cause de la notion de DOM qui n'existe pas côté serveur.
C'est par exemple le cas de jQuery. Heureusement, ces bibliothèques sont généralement disponibles via NPM !
V-C. Exercice▲
L'objectif de cet exercice est de faire un serveur HTTP qui retourne les pages demandées par l'utilisateur si elles existent dans le répertoire www. Dans le cas contraire, il retourne la fameuse erreur 404 indiquant que le fichier n'a pas été trouvé.
Ce serveur devra se présenter sous la forme d'un plugin jQuery, à appliquer sur une structure contenant un champ port.
Ce champ port devra correspondre au port écouté par votre serveur.
Pour vous aider, voici un schéma qui décrit les étapes que doit suivre votre serveur :
Et voici le script starthttp.js qui sera à exécuter avec Node .js :
2.
3.
4.
5.
6.
7.
;(function( $ ){
$({
port: 8090
})
.httpserver();
})( require('jquery'), // charge jQuery
require('./src/jquery.httpserver') ); // charge votre serveur HTTP
Et une petite page HTML pour tester votre serveur :
V-D. Exemple de solution▲
Voici les actions à suivre :
- dans le répertoire de votre projet, créez un fichier starthttp.js ;
- insérez le code suivant dans ce fichier starthttp.js :
2.
3.
4.
5.
6.
;(function( $ ){
$({
port: 8090
}).httpserver();
})( require("jquery"), // charge jQuery
require('./src/jquery.httpserver') ) ; // charge votre serveur HTTP
- créez un répertoire src ;
- puis créez un fichier src/jquery.httpserver.js contenant le code suivant :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
;(function(http, url, fs, $){
$.fn.httpserver = function( ){
return this.each(function(){
var _options = $.extend( {}, {
port: 80, // port par défaut
path: './www', // répertoire par défaut
types: { // liste des types de fichier acceptes
"html": 'text/html'
}
}, this ); // merge les options de la structure 'this' avec les options par défaut
// Création du serveur HTTP
var _serveur = http.createServer( function (req, res) { // fonction de callback appelée pour chaque appel de page
var _pathname = url.parse(req.url).pathname;
var _ext = _pathname.split('/');
_ext = _ext[_ext.length-1].split('.');
_ext = ( _ext.length < 2 ? '' : _ext[_ext.length-1] );
fs.readFile( _options.path + _pathname, function(err, data){
if ( err ){
// code de statut 404 (FILE_NOT_FOUND) et retourne un fichier de type 'text/plain'
res.writeHead(404, {'Content-Type': 'text/plain'});
// Affiche une erreur
res.end('Ereur 404: Fichier non trouve\n');
} else {
// code de statut 200 (OK) et retourne un fichier de type 'text/plain'
res.writeHead(200, {'Content-Type': typeof(_options.types[ _ext ]) != "undefined" ? _options.types[ _ext ] : 'text/plain' });
// retourne le fichier trouvé
res.end( data );
}
});
} )
.listen( _options.port, '127.0.0.1' ); // Le serveur écoutera le port 8090
// Partage le serveur
$(this).data( 'httpserver', _serveur );
});
};
})( require('http'), // charge le module http
require('url'), // charge le module url
require('fs'), // charge le module file system
require('jquery') ); // charge le module jQuery
- créez ensuite un répertoire www ;
- puis un fichier www/hello-world.html avec le code suivant :
- ouvrez un terminal dans le répertoire de votre projet ;
- exécutez la commande : npm install jquery;
- exécutez la commande : node starthttp.js;
- enfin, lancez votre navigateur Internet préféré sur l'URL http://127.0.0.1:8090/hello-world.html.
Vous devez avoir une page comme celle-ci qui s'affiche :
Vous remarquerez que pour utiliser jQuery, on ne donne pas en paramètre l'objet jQuery comme on l'aurait fait pour du JavaScript client, mais on utilise la commande require.
En Node.js, jQuery est un module qui retourne l'objet jQuery.
On charge un module ./src/httpserver mais on ne récupère pas la valeur de retour dans une variable comme on peut le faire pour le module jQuery. httpServeur est en fait un plugin jQuery qu'on a développé pour créer notre serveur Web. Et comme en jQuery, tous les plugins sont attachés à l'objet jQuery, notre module ne retourne aucune valeur.
Vous remarquerez la syntaxe var _options = $.extend( {}, { /* options par défaut */ }, this ). Pour le même résultat, on aurait pu écrire var _options = $.extend( { /* options par défaut */ }, this ).
Cependant la première syntaxe met en avant le fait que le premier paramètre est en lecture/écriture (il reçoit la même valeur que la variable _options).
Vous pouvez vous passer de la variable _options en mergeant directement les options sur notre structure this.
Mais attention, ça modifie votre structure d'origine ce qui pourrait impacter le fonctionnement des autres plugins jQuery utilisés sur cette même structure.
Vous remarquerez aussi dans le code source qu'on enregistre notre instance de serveur sur l'objet this via la fonction .data de jQuery. Cette instance est nécessaire à la création d'un serveur WebSocket que nous allons créer dans le prochain exemple.
VI. Développement d'un serveur WebSocket générique▲
VI-A. Quelques rappels sur jQuery▲
VI-A-1. .on() et .trigger()▲
Dans cet exercice, nous allons intégrer la notion d'évènement grâce aux fonctions on et trigger dans leur utilisation la plus basique.
Donc voici des petits exemples d'utilisation histoire de faire une petite piqure de rappel :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
// Exemple d'utilisation de .on et .trigger
;(function($){
var ma_structure = {} ;
// Enregistrement d'un évènement sans paramètre
$(ma_structure).on('mon_evenement', function(){
console.log('Évènement mon_evenement est appelé') ;
}) ;
// Appel de l'évènement sans paramètre
$(ma_structure).trigger('mon_evenement') ; // affiche dans la console : 'Évènement mon_evenement est appelé'
// Enregistrement d'un évènement avec paramètres
$(ma_structure).on('mon_evenement_avec_params', function(event, param1, param2){
console.log('Évènement mon_evenement_avec_params est appelé (param1 : %s, param2 : %s)', param1, param2) ;
}) ;
// Appel de l'évènement avec paramètres
$(ma_structure).trigger('mon_evenement_avec_params', ['paramètre 1','paramètre 2 ']) ; // affiche dans la console : 'Évènement mon_evenement_avec_params est appelé (param1 : paramètre 1, param2 : paramètre 2)'
})(jQuery) ;
VI-B. Fonctions nécessaires au développement du serveur▲
VI-B-1. Module websocket.server▲
Le module websocket retourne deux objets à instancier : websocket.server et websocket.client.
Pour notre exemple, seul websocket.server va nous intéresser puisqu'il permet de créer un serveur WebSocket.
Voici un exemple d'utilisation de websocket.server :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
var wsserver = new WebSocketServer({
httpServer: $_this.data('httpserver') // instance du serveur HTTP
});
// Surveille les évènements
wsserver
.on('request', function(request) {
// accepte la nouvelle connexion
var connection = request.accept(null, request.origin);
// écoute les événements de la connexion
connection
.on('message', function(message) {
// réception d'un message
if (message.type === 'utf8') {
// affiche le message reçu
console.log('Message reçu : %s', message.utf8Data) ;
}
})
.on('close', function(connection) {
// fermeture de connection
console.log('Une connexion a été coupée') ;
});
});
Vous avez peut-être remarqué que pour créer un serveur WebSocket, il faut fournir l'instance d'un serveur HTTP.
Cela vient du fait qu'avant d'ouvrir une connexion WebSocket, la demande d'ouverture est faite via le protocole HTTP. C'est seulement dans un second temps que la socket HTTP ouverte est transformée en socket WebSocket.
VI-C. Exercice▲
Pour cet exercice, vous devez créer un plugin jQuery wsserveur qui ouvre une connexion WebSocket. Pour ce faire, vous allez pouvoir réutiliser le serveur HTTP que vous avez développé pour l'exercice précédent.
Votre plugin doit faire remonter l'évènement request sur la structure qui contient la configuration du serveur, avec en paramètre la connexion ouverte.
Il doit également faire remonter sur cette connexion les évènements message et close lorsque la connexion reçoit un nouveau message depuis l'IHM ainsi que lorsqu'elle est coupée.
Voici le script d'initialisation startws.js à exécuter via Node.js :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
;(function( $ ){
$({
port: 8091,
types: {
"js": 'text/js',
"html": 'text/html'
}
})
.httpserver()
.wsserver()
.on('request', function( event, _connection ){
console.log('Nouvelle connexion');
$( _connection )
.on('message', function(event, message){
console.log('Nouveau message: %s', message);
})
.on('close', function(){
console.log('Une connexion s\'est fermee');
});
});
})( require('jquery'), // charge jQuery
require('./src/jquery.httpserver'), // charge votre serveur HTTP
require('./src/jquery.wsserver') ); // charge votre serveur WebSocket
Et voici une page HTML ws.html de test :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Node.js avec jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="ws.js"></script>
</head>
<body>
<h1>Node.js pour les developpeurs jQuery</h1>
<input type="text" id="texte" /><input type="button" id="envoyer" value="Envoyer" />
</body>
</html>
Ainsi que le code JavaScript ws.js lié à la page HTML :
Vous pouvez remplacer la double closure :
;(function($){
$(function(){
// code exécuté une fois la page chargée
}) ;
})(jQuery) ;
Par :
;jQuery(function($){
// code exécuté une fois la page chargée
}) ;
Personnellement, je trouve que la première écriture permet de bien séparer le code jQuery d'une part puis le code à exécuter une fois la page chargée d'autre part.
VI-D. Exemple de solution▲
Suivez les actions suivantes :
- dans le répertoire de votre projet, créez un fichier startws.js ;
- insérez le code suivant dans ce fichier startws.js :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
;(function( $ ){
$({
port: 8091,
types: {
"js": 'text/js',
"html": 'text/html'
}
})
.httpserver()
.wsserver()
.on('request', function( event, _connection ){
console.log('Nouvelle connexion');
$( _connection )
.on('message', function(event, message){
console.log('Nouveau message: %s', message);
})
.on('close', function(){
console.log('Une connexion s\'est fermee');
});
});
})( require('jquery'), // charge jQuery
require('./src/jquery.httpserver'), // charge votre serveur HTTP
require('./src/jquery.wsserver') ); // charge votre serveur WebSocket
- créez un fichier src/jquery.wsserver.js contenant le code suivant :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
;(function( WebSocketServer, $ ){
$.fn.wsserver = function(){
return this.each(function(){
var $_this = $(this);
var _wsserver = null;
var _connections = {
list: []
};
try {
// vérifie si le serveur Web a bien été initialisé
if ( typeof( $_this.data('httpserver') ) == "undefined" ){
throw "Serveur HTTP non initialisé";
}
// Partage la liste des connexions
$_this.data('connections', _connections);
// Crée le serveur de WebSocket
_wsserver = new WebSocketServer({
httpServer: $_this.data('httpserver')
});
// Surveille les évènements
_wsserver
.on('request', function(request) {
var _connection = request.accept(null, request.origin);
// ajoute la nouvelle connexion à la liste des connexions
_connections.list.push( _connection );
// diffuse l'information d'une nouvelle connexion
$_this.trigger('request', [_connection])
// écoute les événements de la connexion
_connection
.on('message', function(message) {
if (message.type === 'utf8') {
// diffuse le message reçu
$(_connection).trigger('message', [message.utf8Data]);
}
})
.on('close', function(connection) {
// suppression de la connection de la liste
_connections.list.splice(_connections.list.indexOf(_connection), 1);
// diffuse la fermeture de connection
$(_connection).trigger('close');
});
});
} catch( e ) {
console.error( "Erreur du plugin wsserver: %s", e )
}
});
}
})( require('websocket').server,
require('jquery') );
- créez une page www/ws.html avec le code suivant :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Node.js avec jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="ws.js"></script>
</head>
<body>
<h1>Node.js pour les developpeurs jQuery</h1>
<input type="text" id="texte" /><input type="button" id="envoyer" value="Envoyer" />
</body>
</html>
- puis un fichier www/ws.js :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
;(function($){
$(function(){
// if user is running mozilla then use it's built-in WebSocket
window.WebSocket = window.WebSocket || window.MozWebSocket;
var _connection = new WebSocket('ws://' + document.URL.substr(7).split('/')[0]);
$('#envoyer').click(function(){
_connection.send( $('#texte').val() );
});
});
})(jQuery);
- ouvrez un terminal dans le répertoire de votre projet ;
- exécuter la commande : npm install websocket;
- exécutez la commande : node startws.js;
- enfin, lancez votre navigateur Internet préféré sur l'URL http://127.0.0.1:8091/ws.html et observez la console de votre serveur lorsque : vous ouvrez une nouvelle page, envoyez des messages ou quand vous fermez la page.
Vous devriez avoir une page et un terminal comme ceux-ci :
VII. Développement d'un système de messagerie instantanée▲
VII-A. Exercice▲
Maintenant que le plus dur est derrière vous, vous avez pour mission d'écrire le serveur d'une messagerie instantanée multiutilisateur.
Voici les messages reçus par le serveur :
- lorsqu'un utilisateur se connecte, l'IHM envoie le message JSON suivant : {type : 'open', login : login} ;
- lorsqu'un utilisateur envoie un message, l'IHM envoie le message suivant : {type : 'message', message}.
Voici les messages envoyés par le serveur à toutes les IHM :
- lorsqu'un nouvel utilisateur se connecte : {type : 'chatopen', login : login} ;
- lorsqu'un utilisateur envoie un message: {type : 'chatmessage', login: login, message : message} ;
- lorsqu'un utilisateur ferme sa fenêtre : {type : 'close', login : login}.
Voici le script d'initialisation startchat.js à exécuter via Node.js :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
;(function( $ ){
$({
port: 8092,
path: './www',
types: {
"js": 'text/js',
"html": 'text/html'
}
})
.httpserver()
.wsserver()
.chatserver();
})( require("jquery"), // charge jQuery
require('./src/jquery.httpserver'), // charge votre serveur HTTP
require('./src/jquery.wsserver'), // charge votre serveur WebSocket
require('./src/jquery.chatserver') ); // charge votre serveur de messagerie
La page HTML chat.html de notre messagerie instantanée :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Node.js avec jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="chat.js"></script>
</head>
<body>
<h1>Node.js pour les developpeurs jQuery</h1>
<input type="text" id="texte" /><input type="button" id="envoyer" value="Envoyer" />
<div id="salon"></div>
</body>
</html>
Et le JavaScript chat.js associé à la page :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
;(function($){
$(function(){
var _login = prompt("Entrez votre login");
window.WebSocket = window.WebSocket || window.MozWebSocket;
var _connection = new WebSocket('ws://' + document.URL.substr(7).split('/')[0]);
_connection.onopen = function () {
_connection.send( JSON.stringify({
type: 'open',
login: _login
}) );
};
_connection.onmessage = function (_message) {
var _data = JSON.parse(_message.data);
if ( _data.type == 'chatopen' ){
$('#salon').prepend( $('<li></li>').text( ">>> "+_data.login+" vient d'arriver") );
}else if ( _data.type == 'chatmessage' ){
$('#salon').prepend( $('<li></li>').text( _data.login+": "+_data.message) );
}else if ( _data.type == 'chatclose' ){
$('#salon').prepend( $('<li></li>').text( _data.login+" vient de partir") );
}
};
$('#envoyer').click(function(){
_connection.send( JSON.stringify({
type: 'message',
message: $('#texte').val()
}) );
});
});
})(jQuery);
VII-B. Exemple de solution▲
Suivez les actions suivantes :
- dans le répertoire de votre projet, créez le fichier startchat.js ;
- insérer le code suivant dans le fichier startchat.js :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
;(function( $ ){
$({
port: 8092,
path: './www',
types: {
"js": 'text/js',
"html": 'text/html'
}
})
.httpserver()
.wsserver()
.chatserver();
})( require("jquery"), // charge jQuery
require('./src/jquery.httpserver'), // charge votre serveur HTTP
require('./src/jquery.wsserver'), // charge votre serveur WebSocket
require('./src/jquery.chatserver') ); // charge votre serveur de messagerie
- créez un page www/chat.html avec le code suivant :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Node.js avec jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="chat.js"></script>
</head>
<body>
<h1>Node.js pour les developpeurs jQuery</h1>
<input type="text" id="texte" /><input type="button" id="envoyer" value="Envoyer" />
<div id="salon"></div>
</body>
</html>
- créez une page www/chat.js avec le code suivant :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
;(function($){
$(function(){
var _login = prompt("Entrez votre login");
// if user is running mozilla then use it's built-in WebSocket
window.WebSocket = window.WebSocket || window.MozWebSocket;
var _connection = new WebSocket('ws://' + document.URL.substr(7).split('/')[0]);
_connection.onopen = function () {
_connection.send( JSON.stringify({
type: 'open',
login: _login
}) );
};
_connection.onmessage = function (_message) {
var _data = JSON.parse(_message.data);
if ( _data.type == 'chatopen' ){
$('#salon').prepend( $('<li></li>').text( ">>> "+_data.login+" vient d'arriver") );
}else if ( _data.type == 'chatmessage' ){
$('#salon').prepend( $('<li></li>').text( _data.login+": "+_data.message) );
}else if ( _data.type == 'chatclose' ){
$('#salon').prepend( $('<li></li>').text( _data.login+" vient de partir") );
}
};
$('#envoyer').click(function(){
_connection.send( JSON.stringify({
type: 'message',
message: $('#texte').val()
}) );
});
});
})(jQuery);
- créez le fichier src/jquery.chatserver.js
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
;(function($){
$.fn.chatserver = function(){
return this.each(function(){
var $_this = $(this);
// s'abonne aux nouveaux clients
$_this.on('request', function(_event, _connection){
$( _connection )
// on vient de se connecter
.on('open', function(__event){
// rien à faire
})
// on reçoit un message de l'IHM
.on('message', function(__event, _message){
// on parse la réponse avant de la traiter
var _data = JSON.parse(_message);
// l'utilisateur vient de se connecter sur l'IHM
if ( _data.type == 'open' ){
$( _connection ).data( 'login', _data.login ); // on enregistre nom login
$( $_this.data('connections').list )
.trigger( 'chatopen', [_data.login] );
}else if ( _data.type == 'message' ){
$( $_this.data('connections').list )
.trigger( 'chatmessage', [$(_connection).data('login'), _data.message] );
}
})
.on('close', function(__event){
var _connections = $_this.data('connections') ;
$( _connections.list )
.trigger( 'chatclose', [$(_connection).data('login')] );
})
// un nouvel utilisateur vient d'arriver
.on('chatopen', function(__event, _login){
// on envoie l'information à l'IHM
_connection.sendUTF( JSON.stringify({
type: 'chatopen',
login: _login
}) );
})
// on recoit un message d'un autre utilisateur du chat
.on('chatmessage', function(__event, _login, _message){
// on envoie l'information à l'IHM
_connection.sendUTF( JSON.stringify({
type: 'chatmessage',
login: _login,
message: _message
}) );
})
// un utilisateur vient de partir
.on('chatclose', function(__event, _login){
// on envoie l'information à l'IHM
_connection.sendUTF( JSON.stringify({
type: 'chatclose',
login: _login
}) );
});
});
});
};
})( require('jquery') );
- exécutez la commande : node startchat;
- entrez l'URL suivante sur votre navigateur HTML5 préféré : http://localhost:8092/chat.html.
Vous devez avoir une page similaire à celle-ci :
VIII. Conclusion▲
Grâce à l'utilisation de jQuery, vous avez réussi à développer un serveur de messagerie instantanée en temps réel, grâce à des plugins réutilisables, complètement autonomes, mais qui communiquent entre eux.
Le tout en ayant plus de 60 % du code qui peut être réutilisé sur vos prochains projets.
Imaginez ce que pourront donner nos développements jQuery pour Node.js si nous arrivons à avoir la même banque de plugins qu'en front end !
Alors, vous pensez toujours que jQuery est seulement fait pour gérer les éléments du DOM ?
IX. Remerciements▲
Merci à Bovino et ClaudeLELOUP pour leurs relectures et leurs corrections de cet article.