Conceptos erróneos
Hay algunas ideas falsas comunes con respecto a WebSocket y Socket.IO:
La primera idea errónea es que usar Socket.IO es significativamente más fácil que usar WebSocket, lo que no parece ser el caso. Ver ejemplos a continuación.
El segundo error es que WebSocket no es ampliamente compatible con los navegadores. Vea abajo para más información.
El tercer concepto erróneo es que Socket.IO degrada la conexión como una alternativa en los navegadores más antiguos. En realidad, supone que el navegador es antiguo e inicia una conexión AJAX con el servidor, que luego se actualiza en los navegadores que admiten WebSocket, después de que se intercambia algo de tráfico. Ver abajo para más detalles.
Mi experimento
Escribí un módulo npm para demostrar la diferencia entre WebSocket y Socket.IO:
Es un ejemplo simple de código del lado del servidor y del lado del cliente: el cliente se conecta al servidor mediante WebSocket o Socket.IO y el servidor envía tres mensajes en intervalos de 1 s, que el cliente agrega al DOM.
Lado del servidor
Compare el ejemplo del lado del servidor de usar WebSocket y Socket.IO para hacer lo mismo en una aplicación Express.js:
Servidor WebSocket
Ejemplo del servidor WebSocket usando 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');
Fuente: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
Servidor Socket.IO
Ejemplo del servidor Socket.IO usando 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');
Fuente: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
Lado del cliente
Compare el ejemplo del lado del cliente de usar WebSocket y Socket.IO para hacer lo mismo en el navegador:
Cliente WebSocket
Ejemplo de cliente WebSocket usando JavaScript vainilla:
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); });
Fuente: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
Cliente Socket.IO
Ejemplo del cliente Socket.IO usando JavaScript vainilla:
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); });
Fuente: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
Tráfico de red
Para ver la diferencia en el tráfico de red, puede ejecutar mi prueba . Aquí están los resultados que obtuve:
Resultados de WebSocket
2 solicitudes, 1.50 KB, 0.05 s
De esas 2 solicitudes:
- Página HTML en sí
- actualización de conexión a WebSocket
(La solicitud de actualización de la conexión está visible en las herramientas del desarrollador con una respuesta de 101 protocolos de conmutación).
Resultados de Socket.IO
6 solicitudes, 181.56 KB, 0.25 s
De esas 6 solicitudes:
- la página HTML en sí
- JavaScript de Socket.IO (180 kilobytes)
- primera solicitud AJAX de sondeo largo
- segunda solicitud AJAX de sondeo largo
- tercera solicitud AJAX de sondeo largo
- actualización de conexión a WebSocket
Capturas de pantalla
Resultados de WebSocket que obtuve en localhost:
Resultados de Socket.IO que obtuve en localhost:
Pruébate
Inicio rápido:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Abra http: // localhost: 3001 / en su navegador, abra las herramientas de desarrollador con Shift + Ctrl + I, abra la pestaña Red y vuelva a cargar la página con Ctrl + R para ver el tráfico de red para la versión WebSocket.
Abra http: // localhost: 3002 / en su navegador, abra las herramientas de desarrollador con Shift + Ctrl + I, abra la pestaña Red y vuelva a cargar la página con Ctrl + R para ver el tráfico de red para la versión Socket.IO.
Para desinstalar:
# Uninstall:
npm rm -g websocket-vs-socket.io
Compatibilidad del navegador
A partir de junio de 2016, WebSocket funciona en todo excepto Opera Mini, incluido IE superior a 9.
Esta es la compatibilidad del navegador de WebSocket en Can I Use a partir de junio de 2016:
Consulte http://caniuse.com/websockets para obtener información actualizada.