Heading

let socket = new WebSocket("ws://javascript.info");

Le protocole wss:// est non seulement crypté, mais aussi plus fiable.

C’est parce que ws:// les données ne sont pas cryptées, visibles pour tout intermédiaire. Les anciens serveurs proxy ne connaissent pas WebSocket, ils peuvent voir des en-têtes « étranges » et interrompre la connexion.

D’autre part, wss:// est WebSocket sur TLS, (de même que HTTPS est HTTP sur TLS), la couche de sécurité du transport chiffre les données à l’expéditeur et les déchiffre au récepteur. Ainsi, les paquets de données sont transmis cryptés à travers les proxies. Ils ne peuvent pas voir ce qu’il y a à l’intérieur et les laisser passer.

GET /chatHost: javascript.infoOrigin: https://javascript.infoConnection: UpgradeUpgrade: websocketSec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==Sec-WebSocket-Version: 13

• Origin – l’origine de la page du client, par exemple https://javascript.info. Les objets WebSocket sont inter-origine par nature. Il n’y a pas d’en-têtes spéciaux ou d’autres limitations. Les anciens serveurs sont de toute façon incapables de gérer WebSocket, il n’y a donc aucun problème de compatibilité. Mais l’en-tête Origin est important, car il permet au serveur de décider de parler ou non de WebSocket avec ce site web.
• Connection: Upgrade – signale que le client souhaite changer de protocole.
• Upgrade: websocket – le protocole demandé est « websocket ».
• Sec-WebSocket-Key – une clé aléatoire générée par le navigateur pour la sécurité.
• Sec-WebSocket-Version – version du protocole WebSocket, 13 est la version actuelle.

Si le serveur accepte de passer en WebSocket, il doit envoyer une réponse de code 101 :

101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=

Ici Sec-WebSocket-Accept se trouve Sec-WebSocket-Key, recodée à l’aide d’un algorithme spécial. Le navigateur l’utilise pour s’assurer que la réponse correspond à la requête.

Après, les données sont transférées à l’aide du protocole WebSocket, nous verrons bientôt sa structure (« frames »). Et ce n’est pas du tout du HTTP.

Extensions et sous-protocoles

Il peut y avoir des en-têtes supplémentaires Sec-WebSocket-Extensions et Sec-WebSocket-Protocol qui décrivent les extensions et les sous-protocoles.

Par exemple :

• Sec-WebSocket-Extensions: deflate-frame signifie que le navigateur prend en charge la compression des données. Une extension est quelque chose liée au transfert des données, une fonctionnalité qui étend le protocole WebSocket. L’en-tête Sec-WebSocket-Extensions est envoyé automatiquement par le navigateur, avec la liste de toutes les extensions qu’il prend en charge.

• Sec-WebSocket-Protocol: soap, wamp signifie que nous aimerions transférer non pas n’importe quelles données, mais les données des protocoles SOAP ou WAMP (« The WebSocket Application Messaging Protocol »). Les sous-protocoles WebSocket sont enregistrés dans le catalogue IANA. Ainsi, cet en-tête décrit les formats de données que nous allons utiliser.

  Cet en-tête optionnel est défini à l’aide du deuxième paramètre de new WebSocket. C’est le tableau des sous-protocoles, par exemple si nous souhaitons utiliser SOAP ou WAMP :

  let socket = new WebSocket("wss://javascript.info/chat", );

  Le serveur doit répondre avec une liste de protocoles et d’extensions qu’il accepte d’utiliser.

  Par exemple, la requête:

  GET /chatHost: javascript.infoUpgrade: websocketConnection: UpgradeOrigin: https://javascript.infoSec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==Sec-WebSocket-Version: 13Sec-WebSocket-Extensions: deflate-frameSec-WebSocket-Protocol: soap, wamp

socket.binaryType = "arraybuffer";socket.onmessage = (event) => { // event.data is either a string (if text) or arraybuffer (if binary)};

Limitation du débit

Imaginez, notre application génère beaucoup de données à envoyer. Mais l’utilisateur a une connexion réseau lente, peut-être sur un internet mobile, en dehors d’une ville.

Nous pouvons appeler socket.send(data) encore et encore. Mais les données seront mises en mémoire tampon (stockées) et envoyées seulement aussi vite que la vitesse du réseau le permet.

La propriété socket.bufferedAmount stocke le nombre d’octets restant en mémoire tampon à cet instant, en attente d’être envoyés sur le réseau.

Nous pouvons l’examiner pour voir si le socket est effectivement disponible pour la transmission.

// every 100ms examine the socket and send more data// only if all the existing data was sent outsetInterval(() => { if (socket.bufferedAmount == 0) { socket.send(moreData()); }}, 100);

Fermeture de la connexion

Normalement, lorsqu’une partie veut fermer la connexion (le navigateur et le serveur ont les mêmes droits), elle envoie un « cadre de fermeture de la connexion » avec un code numérique et une raison textuelle.

La méthode pour cela est la suivante :

socket.close(, );

// closing party:socket.close(1000, "Work complete");// the other partysocket.onclose = event => { // event.code === 1000 // event.reason === "Work complete" // event.wasClean === true (clean close)};

// in case connection is brokensocket.onclose = event => { // event.code === 1006 // event.reason === "" // event.wasClean === false (no closing frame)};

<!-- message form --><form name="publish"> <input type="text" name="message"> <input type="submit" value="Send"></form><!-- div with messages --><div></div>

let socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws");// send message from the formdocument.forms.publish.onsubmit = function() { let outgoingMessage = this.message.value; socket.send(outgoingMessage); return false;};// message received - show the message in div#messagessocket.onmessage = function(event) { let message = event.data; let messageElem = document.createElement('div'); messageElem.textContent = message; document.getElementById('messages').prepend(messageElem);}

const ws = new require('ws');const wss = new ws.Server({noServer: true});const clients = new Set();http.createServer((req, res) => { // here we only handle websocket connections // in real project we'd have some other code here to handle non-websocket requests wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);});function onSocketConnect(ws) { clients.add(ws); ws.on('message', function(message) { message = message.slice(0, 50); // max message length will be 50 for(let client of clients) { client.send(message); } }); ws.on('close', function() { clients.delete(ws); });}