Les Websockets

Julien PiatekMazen GharbiFlorent CombaKévin Garro

Plan1) Introduction

Rappel communication Serveur ⇔ Client

Qu’est ce que les Websockets?

Leurs avantages

2) PrésentationCoté serveur: Node.js

Coté client

3) Démonstration4) Conclusion

Rappel

➢ Le client envoie une requête au serveur➢ Le serveur analyse la requête et envoie le

résultat

Rappel➢ Javascript

○ Langage de programmation de script ○ Orienté objet à prototype○ Principalement utilisé pour dynamiser ses pages

web

➢ Socket réseau ○ Permet la communication entre deux processus d’une même machine ou via un réseau (TCP/IP, UDP)

Les Websockets

Webso-quoi?Websocket est le nouveau protocole réseau créé par le W3C qui révolutionne la communication en temps réel entre clients et serveur.

Comptabilité:

Pourquoi utiliser les WebSockets?

➢ Les solutions actuelles○ AJAX○ Comet

➢ Problème○ A chaque fois que le client et le serveur

communique, le header HTTP est transmis. Complexité inutile.

Pourquoi utiliser les WebSockets?

➢ Communication simultanée bidirectionnelle➢ Full duplex➢ Petite bande passante (2 octets)➢ API simple et pratique➢ Utilise Enterprise Service Bus

Avantages

Coté serveur

- Choix : Node.js

- Pourquoi? Rapide, facile à utiliser, permet l’utilisation de javascript coté serveur

Coté serveur // Charge la bibliothèque HTTP et websocket pour utiliser l’objet http et websocketvar http = require("http");var websocket = require("websocket").server;

// Creation de la websocket var ws = new websocket({ httpServer: httpServ, serverName: "Toast à la framboise",});

Coté serveur // Si requête utilisateur ws.on('request', function (request) {

// Accept retournera le websocket de l'utilisateur // Le premier argument correspond au protocol de communication qu'on impose, null sinon var socket = request.accept(null, request.origin);

// envoie d’un message au client socket.sendUTF(chaine);

}

// Recoit le message du client socket.on('message', function(message) {

// On gère le message de l'user ici ;')}

// Deconnexion du socket socket.on('close', function(sock){ // Gérer la déconnexion d'un utilisateur });

Coté Client//Creation du websocket + initialisation de la connexionvar ws = new WebSocket("ws://host:port");

//Évènement qui se déclenche si la connexion à été établie avec succèsws.onopen = function(evt) { alert("Connexion Réussie!"); };

//Évènement qui se déclenche lors de la réception d'un messagews.onmessage = function(evt) { alert( "Message reçu: " + evt.data); };

//Évènement qui se déclenche lors de fermeture de la websocketws.onclose = function(evt) { alert("Connexion fermée"); };

//Évènement qui se déclenche lors d'une erreurws.onerror = function(evt) { alert("WebSocket error : " + evt.data) }; //Pour envoyer une donnée au serveur :ws.send(MyMessage);

//Pour fermer la websocketws.close();

Conclusion

Websocket➢ Un protocole efficace➢ Porte au web “temps réel”➢ Avec un fort potentiel➢ Protocole d’avenir

Des questions?

Merci de votre attention.