TP WebSockets: écriture d'un programme de chat en HTML5

Etude d'un programme de chat

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

node test.js

Test de l'application de chat

Allez dans le répertoire où vous avez dézippé ChatNowJs.zip.

Exécutez la commande : "node simpleChat_server.js", et ouvrez http://localhost:8080 dans votre navigateur. Ouvrez deux onglets sur cet URL, vous devez avoir un champ de saisie dans chaque page. Tapez quelque chose, cela devrait apparaitre dans l'autre fenêtre (les deux sont en réalité des clients connectés au même serveur de WebSockets ).

Etude de l'application de chat

Deux fichiers tout petits à étudier !

1. simpleChat_server.js
2. simpleChat.html

Ouvrez ces fichiers avec un éditeur : ouch que c'est... petit ! Oui, on utilise ici la notion d'objets distribués, le code client qui tourne dans le navigateur appelle du code qui tourne dans le serveur et inversement. Pas de réseau au milieu ! En fait si... mais on fait comme si il n'y en avait pas ! Le module NodeJS qui fait ceci est magique, il s'appelle NowJS !

NowJS définit une "poche magique" appelée "now" : en fait une variable JavaScript que l'on manipule depuis le code qui tourne sur le client, dans le navigateur, et qui contient les variables et méthodes et objets partagés entre le client et le serveur distant.

Le serveur peut utiliser une variable "everyone.now" pour définir et utiliser les variables et méthodes partagées.

Par exemple, côté serveur on définit la fonctionn distributeMessage dans la variable everyone.now Ceci va rendre visible cette fonction dans tous les codes clients tournant dans les navigateurs, à travers la variable now. "everyone.now" signifie : pour toutes les variables now de tous les clients, je rajoute la fonction distributeMessage dedans.

Serveur :

everyone.now.distributeMessage = function(message){
  everyone.now.receiveMessage(this.now.name, message);
};

Appel par un des clients (voir simpleChat.html) :

$("#send-button").click(function(){
    now.distributeMessage($("#text-input").val());
    $("#text-input").val("");
});

Ainsi un clic sur le bouton "send" dans la page exécute now.distributeMessage() qui s'exécute sur le serveur, avec pour paramètre d'apple le contenu du champs de saisie de la page, c'est le texte qu'on veut envoyer par le chat. Le serveur récupère ce paramètre dans la fonction everyone.now.distributeMessage, qui appelle à son tour everyone.now.receiveMessage, une fonction définie.... dans le code JavaScript de la page web des clients ! La partie"everyone" signifie qu'on appelle la méthode chez tous les clients connectés.

Client :

now.receiveMessage = function(name, message){
    $("#messages").append("<br>" + name + ": " + message);
}

Et cette fonction, localisée côté client, va juste afficher dans la page le texte du message reçu !

De la même manière, une variable déclarée côté client comme:

now.name = prompt("What's your name?", "");

Peut être récupérée directement par le serveur à l'aide de this.now :

Serveur :

everyone.now.distributeMessage = function(message){
  everyone.now.receiveMessage(this.now.name, message);
};

A l'aide de ce paradigme, NowJS permet de développer très rapidement des applications collaboratives avec des WebSockets. Remarquez que les objets sont envoyés tels quels, pas en XML ou en JSON ! (Ils sont en réalité transformés en JSON en coulisse).

Etude d'un chat gérant des "salles de chat"

Maintenant, dans