Vous êtes sur la page 1sur 5

 

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, …). 

 
 
 

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). 

 

 
 

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 

   

 

 
 

Annexes  
1. Intégration de socket.io avec un serveur standard nodejs 

 
const​ http ​=​ ​require​(​'http'​);
const​ socketio ​=​ ​require​(​'socket.io'​);

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​);
​});
});

 

 
 

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​:​ ​'...'​ ​});

​</script>
​</body>
</html>

 

Vous aimerez peut-être aussi