
Websockets |
Présentation
WebSocket est une technologie évoluée qui permet d'ouvrir un canal de communication interactif(bi-directionnel) permanent entre un navigateur (côté client) et un serveur,
afin de résoudre certains problèmes posés par le caractère unidirectionnel et déconnecté du protocole HTTP.
Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.
La spécification permettant d'utiliser les WebSockets est développée par le W3C, tandis que le protocole de communication est standardisé par l'IETF.
Exemple
Prenons comme exemple un système de chat, celui-ci doit répondre aux postulats suivants:
- Pouvoir envoyer des messages
- Pouvoir recevoir des messages
- tous les messages envoyés sont immédiatement retransmis aux autres participants
De ce fait vous avez 2 canaux d'ouverts en même temps, l'un pour les envois, l'autre pour la réception
Point Important
Il existe 2 version du protocole Websocket(voir à droite)
La notation d'une URL Websocket se fait de manière proche à celle d'une connexion http et utilise les même ports par défaut, 80 et 443 Dans le premier cas la notation est ws://url_site[:port] et pour la version sécurisée wss://url_site[:port] ![]() ![]() |
Maintenant la théorie pleinement exposée passons à la pratique et comme pour L'API EventSource la partie client c'est de la tarte mais le serveur on a envie de se pendre |
![]() |


Voici comment Initialiser une Websocket
Code Javascript : | Sélectionner tout |
exampleSocket = new WebSocket("ws://site_url:8765");
Code Javascript : | Sélectionner tout |
exampleSocket.onopen = function (event) { console.log("/!\\ Connexion serveur"); }
Code Javascript : | Sélectionner tout |
exampleSocket.onerror = function (event) { console.log(event); }
Code Javascript : | Sélectionner tout |
exampleSocket.onmessage = function (event) { console.log(event.data); }
Code Javascript : | Sélectionner tout |
exampleSocket.onclose = function (event) { console.log("/!\\ Déconnexion serveur"); }
Du coup si l'on veut se faire une fonction de connexion :
Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 | var exampleSocket; function connect(){ exampleSocket = new WebSocket("ws://site_url:8765"); exampleSocket.onopen = function (event) { console.log("/!\\ Connexion serveur"); } exampleSocket.onerror = function (event) { console.log(event); } exampleSocket.onmessage = function (event) { console.log(event.data); } exampleSocket.onclose = function (event) { console.log("/!\\ Déconnexion serveur"); } } |
Maintenant passons aux fonctions non liées à un événement(mais qui en créent)
Si vous souhaitez ... fermer la connexion
Code Javascript : | Sélectionner tout |
exampleSocket.close();

Si vous souhaitez ... envoyer un message
Code Javascript : | Sélectionner tout |
exampleSocket.send(data);
Aller plus loin
Si vous souhaitez vous faire les dents sur un exemple concret voici un serveur websocket en python 3 et la page html pour jouer avec


Code Python : | Sélectionner tout |
1 2 | sslcontext = ssl.SSLContext(ssl.PROTOCOL_TLSv1_2) sslcontext.load_cert_chain("ssl2.crt", "ssl2.key") |
Code Python : | Sélectionner tout |
1 2 3 4 | # Remplacement de start_server = websockets.serve(Loop, 'localhost', 8765, ssl=sslcontext) #par start_server = websockets.serve(Loop, 'localhost', 8765) |
Quant à la page html remplacez wss:// par ws://
Sources

Vous avez lu gratuitement 0 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.