HTTP repose sur un principe de communication par requête/réponse. Seul le client contacte le serveur, et le serveur ne peut que r épondre au client.
Les navigateurs modernes supportent aujourd’hui une technologie appelée WebSocket. Un
socket est une communication permanente (tant qu’il n’est pas fermé) entre deux machines, donnant la possibilité à chacune d’émettre des messages à l’autre sans aucune contrainte. Il est à leur charge d’écouter ses messages et de les traiter.
L’entête HTTP “Connection: Keep-Alive” permet de conserver la connection ouverte entre client et serveur et permet au client d’envoyer autant de requêtes qu’il le désire, mais toujours dans un contexte de requête/réponse.
L’intérêt du WebSocket est qu’il permet à un serveur de pouvoir communiquer directement
avec le client, sans avoir besoin d’une requête provenant de sa part. Ceci permet de créer de manière plus simple des applications nécessitant du “temps réel” (chat, jeux en ligne, bourse, …).
Socket.io
Le package socket.io de node propose une implémentation serveur et cliente des
websockets à l’aide d’événements nommés.
Note: L’intégralité des communications évoqués entre le client et le serveur doit se faire via socket.
Création d’un chat
1. Récupérer la structure du projet sur u frsciencetech. 2. Dézipper le contenu et utiliser npm install pour récupérer les dépendances du projet. 3. Client (client/app.js) : au clic sur envoyer, envoyer au serveur le message saisi. S’assurer . L’objet envoyé doit contenir au moins une propriété auteur et texte. L’afficher dans le conteneur des messages. Une fonction format est mise à disposition pour générer le HTML nécessaire. 4. Serveur (server.js, modules/messages.js): A réception d’un message, le faire “persister” sur le serveur. La persistance consiste à enregistrer une donnée pour une réutilisation future, dans un quelconque autre contexte. Ceci se fait généralement via l’utilisation d’une base de données ou d’un fichier. Faire persister les messages dans un fichier JSON. 5. Serveur (server.js, modules/messages.js): A la connexion d’un client, lui envoyer au maximum les 5 derniers messages. Pour éviter les lectures fréquentes et coûteuse en ressource système, stocker les 5 derniers messages dans un tableau au démarrage du serveur. Celui-ci devra être mis à jour à chaque nouveau message. 6. Client : Gérer la réception des 5 derniers messages. 7. Tester avec au moins deux clients. Vous pouvez ouvrir plusieurs fois la même page dans des onglets/navigateurs différents. Si la configuration réseau le permet et que le serveur nodejs est ouvert sur l’extérieur, il est également possible d’utiliser le chat de quelqu’un d’autre avec son IP (devrait fonctionner avec les machines d’une même salle).
2
Dessin collaboratif en ligne
1. Récupérer la structure du projet sur u frsciencetech. 2. Dézipper le contenu et utiliser npm install pour récupérer les dépendances du projet. 3. Le dessin est possible en laissant appuyer le clic gauche sur le canvas, tant que le curseur est sur celui-ci. L’event mouseover n’étant pas déclenché pour chaque pixel, on utilisera une ligne représenté par un point de départ et un point d’arrivée et une couleur. De la même façon que pour le chat : a. A chaque tracé, transmettre la ligne au serveur et la répercuter sur le client. Une fonction drawLine côté client permet de tracer une ligne. b. Faire persister les données au moins en mémoire c. Transmettre l’instruction d’effacement d. Modifier le code pour prendre en compte la taille du trait
3
Annexes 1. Intégration de socket.io avec un serveur standard nodejs
let app = http.createServer((req, res) => {
// ... }) app.listen(3000);
let io = socketio(app);
// L'événement 'connection' est déclenché à chaque connection avec un nouveau client
io.on('connection', function (socket) { // 'socket.emit' permet d'envoyer un événement ‘server-event’ au client connecté. // Celui-ci est automatiquement transformé en JSON socket.emit('server-event', { hello: 'world' });
// 'socket.broadcast.emit' permet d'envoyer un message à tous les autres clients connectés. socket.broadcast.emit('server-event', { hello: 'world' });
// 'on' permet d'écouter les messages envoyés par le client (ici, nommé ‘client-event’). socket.on('client-event', function (data) { console.log(data); }); });
4
2. Intégration de socket.io dans une page HTML. Des balises scripts sont utilisées pour l’exemple mais un fichier js à part est préférable. <html> <head></head> <body> <!-- Javascript client fourni dans le module socket.io --> <script src="/socket.io/socket.io.js"></script> <script> // La variable globale 'io' est fournie par socket.io.js let socket = io('http://localhost:3000'); // Réception d’un event serveur socket.on('server-event', function (data) { console.log(data); }); // Envoie d’un event au serveur socket.emit('client-event', { data: '...' });
