Differenze tra socket.io e websockets

Quali sono le differenze tra socket.io e websockets in node.js?
Sono entrambe tecnologie push server? Le uniche differenze che ho sentito sono state,

  1. socket.io mi ha permesso di inviare / emettere messaggi specificando un nome di evento.

  2. Nel caso di socket.io un messaggio proveniente dal server raggiungerà su tutti i client, ma per lo stesso in websockets sono stato costretto a mantenere un array di tutte le connessioni e ad attraversarlo per inviare messaggi a tutti i client.

Inoltre, mi chiedo perché i web inspector (come Chrome / firebug / fiddler) non riescano a intercettare questi messaggi (da socket.io/websocket) dal server?

Si prega di chiarire questo.

Socket.IO utilizza WebSockets quando ansible.

I suoi vantaggi sono che semplifica l’utilizzo di WebSockets come descritto al punto # 2 e probabilmente ancora più importante fornisce failover ad altri protocolli nel caso in cui WebSockets non sia supportato nel browser o nel server. Eviterei di usare direttamente WebSockets a meno che tu non abbia molta familiarità con gli ambienti che non funzionano e tu sia in grado di aggirare queste limitazioni.

Questa è una buona lettura sia su WebSockets che su Socket.IO.

http://davidwalsh.name/websocket

fraintendimenti

Esistono alcuni malintesi comuni su WebSocket e Socket.IO:

  1. 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.

  2. Il secondo malinteso è che WebSocket non è ampiamente supportato nei browser. Vedi sotto per maggiori informazioni.

  3. Il terzo equivoco è che Socket.IO downgrade della connessione come fallback sui browser più vecchi. In realtà si presuppone che il browser sia vecchio e avvii una connessione AJAX al server, che verrà successivamente aggiornata sui browser che supportano WebSocket, dopo che è stato scambiato del 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 tramite WebSocket o Socket.IO e il server invia tre messaggi a intervalli di 1s, che vengono aggiunti al DOM dal client.

Lato server

Confronta l’esempio lato server dell’uso 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

Socket.IO Server

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 lato client dell’uso di WebSocket e Socket.IO per fare lo stesso nel browser:

WebSocket Client

Esempio di client WebSocket utilizzando JavaScript di 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

Socket.IO Client

Esempio di client Socket.IO utilizzando vanilla JavaScript:

 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:

  1. Pagina HTML stessa
  2. aggiornamento della connessione a WebSocket

(La richiesta di aggiornamento della connessione è visibile sugli strumenti di sviluppo con una risposta 101 Protocolli di commutazione.)

Socket.IO Risultati

6 richieste, 181,56 KB, 0,25 s

Da quelle 6 richieste:

  1. la pagina HTML stessa
  2. JavaScript di Socket.IO (180 kilobyte)
  3. prima richiesta AJAX a lungo polling
  4. seconda richiesta AJAX a lungo polling
  5. terza richiesta AJAX a lungo polling
  6. aggiornamento della connessione a WebSocket

Screenshots

Risultati WebSocket che ho ottenuto su localhost:

Risultati WebSocket: modulo websocket-vs-socket.io

Socket.IO risultati che ho ottenuto su localhost:

Socket.IO risultati - modulo websocket-vs-socket.io

Mettiti alla prova

Avvio rapido:

 # Install: npm i -g websocket-vs-socket.io # Run the server: websocket-vs-socket.io 

Aprire http: // localhost: 3001 / nel browser, aprire gli strumenti per sviluppatori con Shift + Ctrl + I, aprire la scheda Rete e ricaricare la pagina con Ctrl + R per visualizzare il traffico di rete per la versione WebSocket.

Aprire http: // localhost: 3002 / nel browser, aprire gli strumenti di sviluppo con Shift + Ctrl + I, aprire la scheda Rete e ricaricare la pagina con Ctrl + R per visualizzare il traffico di rete per la versione Socket.IO.

Per disinstallare:

 # Uninstall: npm rm -g websocket-vs-socket.io 

Compatibilità con il 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 Can I Use a partire da giugno 2016:

inserisci la descrizione dell'immagine qui

Vedi http://caniuse.com/websockets per informazioni aggiornate.

Sto andando a fornire un argomento contro l’uso di socket.io.

Penso che l’utilizzo di socket.io esclusivamente perché ha fallbacks non è una buona idea. Lasciare IE8 RIP.

In passato ci sono stati molti casi in cui le nuove versioni di NodeJS hanno rotto socket.io. È ansible controllare questi elenchi per gli esempi … https://github.com/socketio/socket.io/issues?q=install+error

Se vai a sviluppare un’app per Android o qualcosa che deve funzionare con la tua app esistente, probabilmente starai bene con WS subito, socket.io potrebbe darti dei problemi lì …

Inoltre, il modulo WS per Node.JS è incredibilmente semplice da usare.

Usare Socket.IO è fondamentalmente come usare jQuery: vuoi supportare i browser più vecchi, devi scrivere meno codice e la libreria fornirà fallback. Socket.io utilizza la tecnologia websocket se disponibile e, in caso contrario, controlla il miglior tipo di comunicazione disponibile e lo utilizza.

Socket.IO utilizza WebSocket e quando WebSocket non è disponibile usa il fallback algo per creare connessioni in tempo reale.