Idées fausses
Il existe quelques idées fausses courantes concernant WebSocket et Socket.IO:
La première idée fausse est que l'utilisation de Socket.IO est beaucoup plus facile que l'utilisation de WebSocket, ce qui ne semble pas être le cas. Voir les exemples ci-dessous.
La deuxième idée fausse est que WebSocket n'est pas largement pris en charge dans les navigateurs. Voir ci-dessous pour plus d'informations.
La troisième idée fausse est que Socket.IO rétrograde la connexion en tant que solution de rechange sur les anciens navigateurs. Il suppose en fait que le navigateur est ancien et démarre une connexion AJAX au serveur, qui est ensuite mise à niveau sur les navigateurs prenant en charge WebSocket, après un échange de trafic. Voir ci-dessous pour plus de détails.
Mon expérience
J'ai écrit un module npm pour démontrer la différence entre WebSocket et Socket.IO:
Il s'agit d'un exemple simple de code côté serveur et côté client - le client se connecte au serveur en utilisant WebSocket ou Socket.IO et le serveur envoie trois messages à des intervalles de 1 s, qui sont ajoutés au DOM par le client.
Du côté serveur
Comparez l'exemple côté serveur de l'utilisation de WebSocket et Socket.IO pour faire de même dans une application Express.js:
Serveur WebSocket
Exemple de serveur WebSocket utilisant Express.js:
var path = require('path');
var app = require('express')();
var ws = require('express-ws')(app);
app.get('/', (req, res) => {
console.error('express connection');
res.sendFile(path.join(__dirname, 'ws.html'));
});
app.ws('/', (s, req) => {
console.error('websocket connection');
for (var t = 0; t < 3; t++)
setTimeout(() => s.send('message from server', ()=>{}), 1000*t);
});
app.listen(3001, () => console.error('listening on http://localhost:3001/'));
console.error('websocket example');
Source: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
Serveur Socket.IO
Exemple de serveur Socket.IO utilisant Express.js:
var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
console.error('express connection');
res.sendFile(path.join(__dirname, 'si.html'));
});
io.on('connection', s => {
console.error('socket.io connection');
for (var t = 0; t < 3; t++)
setTimeout(() => s.emit('message', 'message from server'), 1000*t);
});
http.listen(3002, () => console.error('listening on http://localhost:3002/'));
console.error('socket.io example');
Source: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
Côté client
Comparez l'exemple côté client d'utilisation de WebSocket et Socket.IO pour faire de même dans le navigateur:
Client WebSocket
Exemple de client WebSocket utilisant JavaScript vanilla:
var l = document.getElementById('l');
var log = function (m) {
var i = document.createElement('li');
i.innerText = new Date().toISOString()+' '+m;
l.appendChild(i);
}
log('opening websocket connection');
var s = new WebSocket('ws://'+window.location.host+'/');
s.addEventListener('error', function (m) { log("error"); });
s.addEventListener('open', function (m) { log("websocket connection open"); });
s.addEventListener('message', function (m) { log(m.data); });
Source: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
Client Socket.IO
Exemple de client Socket.IO utilisant JavaScript vanilla:
var l = document.getElementById('l');
var log = function (m) {
var i = document.createElement('li');
i.innerText = new Date().toISOString()+' '+m;
l.appendChild(i);
}
log('opening socket.io connection');
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });
Source: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
Trafic réseau
Pour voir la différence de trafic réseau, vous pouvez exécuter mon test . Voici les résultats que j'ai obtenus:
Résultats WebSocket
2 requêtes, 1.50 KB, 0.05 s
De ces 2 demandes:
- Page HTML elle-même
- mise à niveau de la connexion à WebSocket
(La demande de mise à niveau de connexion est visible sur les outils de développement avec une réponse 101 Switching Protocols.)
Résultats Socket.IO
6 requêtes, 181.56 KB, 0.25 s
De ces 6 demandes:
- la page HTML elle-même
- JavaScript de Socket.IO (180 kilo-octets)
- première requête AJAX longue interrogation
- deuxième requête AJAX longue interrogation
- troisième requête AJAX longue interrogation
- mise à niveau de la connexion à WebSocket
Captures d'écran
Résultats WebSocket que j'ai obtenus sur localhost:
Résultats Socket.IO que j'ai obtenus sur localhost:
Testez-vous
Démarrage rapide:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Ouvrez http: // localhost: 3001 / dans votre navigateur, ouvrez les outils de développement avec Shift + Ctrl + I, ouvrez l'onglet Réseau et rechargez la page avec Ctrl + R pour voir le trafic réseau pour la version WebSocket.
Ouvrez http: // localhost: 3002 / dans votre navigateur, ouvrez les outils de développement avec Shift + Ctrl + I, ouvrez l'onglet Réseau et rechargez la page avec Ctrl + R pour voir le trafic réseau pour la version Socket.IO.
Pour désinstaller:
# Uninstall:
npm rm -g websocket-vs-socket.io
Compatibilité du navigateur
Depuis juin 2016, WebSocket fonctionne sur tout sauf Opera Mini, y compris IE supérieur à 9.
Il s'agit de la compatibilité du navigateur WebSocket sur Can I Use à partir de juin 2016:
Voir http://caniuse.com/websockets pour des informations à jour.