fraintendimenti
Esistono alcuni malintesi comuni riguardo a WebSocket e Socket.IO:
Il primo malinteso è che l'uso di Socket.IO è significativamente più semplice rispetto all'utilizzo di WebSocket che non sembra essere il caso. Vedi esempi di seguito.
Il secondo malinteso è che WebSocket non è ampiamente supportato nei browser. Vedi sotto per maggiori informazioni.
Il terzo malinteso è che Socket.IO esegue il downgrade della connessione come fallback su browser meno recenti. Presuppone in realtà che il browser sia vecchio e avvia una connessione AJAX al server, che viene successivamente aggiornato sui browser che supportano WebSocket, dopo uno scambio di traffico. Vedi sotto per i dettagli.
Il mio esperimento
Ho scritto un modulo npm per dimostrare la differenza tra WebSocket e Socket.IO:
È un semplice esempio di codice lato server e lato client: il client si connette al server utilizzando WebSocket o Socket.IO e il server invia tre messaggi a intervalli di 1, che vengono aggiunti al DOM dal client.
Lato server
Confronta l'esempio sul lato server dell'utilizzo di WebSocket e Socket.IO per fare lo stesso in un'app Express.js:
Server WebSocket
Esempio di server WebSocket utilizzando 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');
Fonte: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
Server Socket.IO
Esempio di server Socket.IO utilizzando 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');
Fonte: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
Dalla parte del cliente
Confronta l'esempio sul lato client dell'utilizzo di WebSocket e Socket.IO per fare lo stesso nel browser:
Client WebSocket
Esempio di client WebSocket utilizzando 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); });
Fonte: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
Client Socket.IO
Esempio di client Socket.IO utilizzando 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); });
Fonte: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
Traffico di rete
Per vedere la differenza nel traffico di rete puoi eseguire il mio test . Ecco i risultati che ho ottenuto:
Risultati WebSocket
2 richieste, 1.50 KB, 0,05 s
Da quelle 2 richieste:
- Pagina HTML stessa
- aggiornamento della connessione a WebSocket
(La richiesta di aggiornamento della connessione è visibile sugli strumenti di sviluppo con una risposta 101 Protocolli di commutazione.)
Risultati Socket.IO
6 richieste, 181.56 KB, 0.25 s
Da quelle 6 richieste:
- la stessa pagina HTML
- JavaScript di Socket.IO (180 kilobyte)
- prima richiesta AJAX di polling lungo
- seconda richiesta AJAX di polling lungo
- terza richiesta AJAX di polling lungo
- aggiornamento della connessione a WebSocket
Screenshots
Risultati di WebSocket che ho ottenuto su localhost:
Risultati di Socket.IO che ho ottenuto su localhost:
Mettiti alla prova
Avvio rapido:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Apri http: // localhost: 3001 / nel tuo browser, apri gli strumenti di sviluppo con Maiusc + Ctrl + I, apri la scheda Rete e ricarica la pagina con Ctrl + R per vedere il traffico di rete per la versione di WebSocket.
Apri http: // localhost: 3002 / nel tuo browser, apri gli strumenti per sviluppatori con Maiusc + Ctrl + I, apri la scheda Rete e ricarica la pagina con Ctrl + R per vedere il traffico di rete per la versione Socket.IO.
Per disinstallare:
# Uninstall:
npm rm -g websocket-vs-socket.io
Compatibilità del browser
A partire da giugno 2016 WebSocket funziona su tutto tranne Opera Mini, incluso IE superiore a 9.
Questa è la compatibilità del browser di WebSocket su Posso usare da giugno 2016:
Vedi http://caniuse.com/websocket per informazioni aggiornate.