Outils avancés pour le Web
Sockets
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, …).
[Link]
Le package [Link] 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/[Link]) : 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 ([Link], modules/[Link]): 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 ([Link], modules/[Link]): 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 [Link] avec un serveur standard nodejs
const http = require('http');
const socketio = require('[Link]');
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) {
// '[Link]' permet d'envoyer un événement ‘server-event’ au client connecté.
// Celui-ci est automatiquement transformé en JSON
socket.emit('server-event', { hello: 'world' });
// '[Link]' 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 [Link] 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 [Link] -->
<script src="/[Link]/[Link]"></script>
<script>
// La variable globale 'io' est fournie par [Link]
let socket = io('[Link]
// 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: '...' });
</script>
</body>
</html>
5
