WebSocket
Le protocole WebSocket RFC6455 est standardisé depuis décembre 2011 et implémenté par les navigateurs suivants : Chrome 16, Firefox 11, Internet Explorer 10, Opera 12.10 et Safari 6.
rfc6455
Les WebSockets permettent d'établir une connexion bi-directionnelle entre le client et le serveur.
Il devient alors possible d'envoyer des messages en temps réel du client vers le serveur mais surtout du serveur vers le client en utilisant la même connexion.
A titre d'exemple, comparons la bande passante nécessaire pour une application web qui affiche les résultats temps réel d'un match de sport par polling puis en utilisant les WebSockets.
Polling : 1 000 000 d'utilisateurs => 1 000 000 requêtes toutes les 5 secondes => 1KB * 1 000 000 / 5 => 200 MBPS.
WebSocket : 1 000 000 d'utilisateurs => un message serveur/client à chaque évènement (en moyenne, une fois toutes les 10 secondes) => 50B * 1 000 000 / 10 => 5 MBPS.
Pour émettre des données du serveur au client, pensez à utiliser les Server-Sent Events qui s'avèrent généralement plus simple à mettre en place.
Une connexion WebSocket est établie suite au handshake HTTP suivant :

Requête du client

1
GET /users/123456/wishes/abcdef HTTP/1.1
2
Host: www.wishtack.com
3
Upgrade: websocket
4
Connection: Upgrade
5
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
6
Sec-WebSocket-Protocol: comments
7
Sec-WebSocket-Version: 13
8
Origin: https://www.wishtack.com
Copied!

Réponse du serveur

1
2
HTTP/1.1 101 Switching Protocols
3
Upgrade: websocket
4
Connection: Upgrade
5
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
6
Sec-WebSocket-Protocol: comments
Copied!

Socket.IO

Socket.IO
Socket.IO est une couche d'abstraction des WebSockets.
En l'absence de l'implémentation de WebSockets, Socket.IO peut utiliser du polling par exemple.
Socket.IO fournit également un module pour simplifier l'implémentation des WebSockets côté serveur avec Node.js.

Code Node.js

1
const express = require('express');
2
const app = express();
3
const http = require('http');
4
const server = http.createServer(app);
5
const io = require('socket.io')(server);
6
7
/* Listen! */
8
app.listen(80);
9
10
/* Messaging. */
11
io.on('connection', (socket) => {
12
13
socket.on('comment', (data) => {
14
15
console.log(data);
16
17
socket.emit('thanks', 'Thank you for your comment.');
18
19
});
20
21
});
Copied!

Code Client

1
const socket = io.connect('http://localhost/comment');
2
3
socket.on('connect', () => socket.emit('message', 'hi!'));
4
5
socket.on('thanks', (data) => socket.emit('message', data));
Copied!

Pensez à utiliser les rooms pour diviser les clients en différents groupes

1
io.on('connection', (socket) {
2
3
socket.on('comment', (data) {
4
5
socket.join(socket.handshake.url);
6
7
socket.to(socket.handshake.url).emit('comment', data);
8
9
});
10
11
});
Copied!
Last modified 3yr ago