¿Cuáles son las diferencias entre socket.io y websockets en node.js?
¿Son ambas tecnologías de inserción de servidor? Las únicas diferencias que sentí fue,

1. socket.io me permitió enviar / emitir mensajes especificando un nombre de evento.

2. En el caso de socket.io, un mensaje del servidor llegará a todos los clientes, pero por lo mismo en websockets me vi obligado a mantener un conjunto de todas las conexiones y recorrerlo para enviar mensajes a todos los clientes.

Además, me pregunto por qué los inspectores web (como Chrome / firebug / fiddler) no pueden atrapar estos mensajes (desde socket.io/websocket) del servidor.

Por favor aclara esto.

Sus ventajas son que simplifica el uso de WebSockets como lo describió en el n. ° 2, y probablemente lo más importante es que proporciona fallas a otros protocolos en caso de que WebSockets no sean compatibles con el navegador o el servidor. Evitaría usar WebSockets directamente a menos que esté muy familiarizado con los entornos en los que no funcionan y que sea capaz de evitar esas limitaciones.

Esta es una buena lectura tanto en WebSockets como en Socket.IO.

http://davidwalsh.name/websocket

Conceptos erróneos

Hay algunas ideas falsas comunes con respecto a WebSocket y Socket.IO:

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

2. El segundo error es que WebSocket no es ampliamente compatible con los navegadores. Vea abajo para más información.

3. 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:

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-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:

1. Página HTML en sí
2. 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:

1. la página HTML en sí
2. JavaScript de Socket.IO (180 kilobytes)
3. primera solicitud AJAX de sondeo largo
4. segunda solicitud AJAX de sondeo largo
5. tercera solicitud AJAX de sondeo largo
6. 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.

Voy a proporcionar un argumento en contra del uso de socket.io.

Creo que usar socket.io únicamente porque tiene fallos no es una buena idea. Deje que IE8 RIP.

En el pasado ha habido muchos casos en los que las nuevas versiones de NodeJS han roto socket.io. Puede consultar estas listas para ver ejemplos ... https://github.com/socketio/socket.io/issues?q=install+error

Si va a desarrollar una aplicación de Android o algo que necesita funcionar con su aplicación existente, probablemente estaría bien trabajar con WS de inmediato, socket.io podría darle algunos problemas allí ...

Además, el módulo WS para Node.JS es increíblemente fácil de usar.

Usar Socket.IO es básicamente como usar jQuery: desea admitir navegadores antiguos, necesita escribir menos código y la biblioteca proporcionará fallos. Socket.io usa la tecnología websockets si está disponible, y si no, verifica el mejor tipo de comunicación disponible y lo usa.

Incluso si los navegadores modernos admiten WebSockets ahora, creo que no hay necesidad de tirar SocketIO y todavía tiene su lugar en cualquier proyecto actual. Es fácil de entender y, personalmente, aprendí cómo funciona WebSockets gracias a SocketIO.

Como se dijo en este tema, hay muchas bibliotecas de integración para Angular, React, etc. y tipos de definición para TypeScript y otros lenguajes de programación.

El otro punto que agregaría a las diferencias entre Socket.io y WebSockets es que el agrupamiento con Socket.io no es un gran problema. Socket.io ofrece adaptadores que se pueden usar para vincularlo con Redis para mejorar la escalabilidad. Tiene ioredis y socket.io-redis, por ejemplo.

Sí, lo sé, SocketCluster existe, pero eso está fuera de tema.

Socket.IO usa WebSocket y cuando WebSocket no está disponible usa algo alternativo para hacer conexiones en tiempo real.

https://socket.io/docs/#What-Socket-IO-is-not (con mi énfasis )

Lo que Socket.IO no es

Socket.IO NO es una implementación de WebSocket. Aunque Socket.IO de hecho usa WebSocket como transporte cuando es posible, agrega algunos metadatos a cada paquete: el tipo de paquete, el espacio de nombres y la identificación del paquete cuando se necesita un acuse de recibo del mensaje. Es por eso que un cliente WebSocket no podrá conectarse con éxito a un servidor Socket.IO , y un cliente Socket.IO tampoco podrá conectarse a un servidor WebSocket . Consulte la especificación del protocolo aquí .

// WARNING: the client will NOT be able to connect!
const client = io('ws://echo.websocket.org');