node.js - rooms - socket.io example

Diferencias entre socket.io y websockets

Question

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

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

2. En el caso de socket.io, un mensaje del servidor alcanzará a todos los clientes, pero por lo mismo en websockets me vi obligado a mantener una matriz de todas las conexiones y enviarlo a todos los clientes.

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

Por favor aclarar esto.

Answer 1

Conceptos erróneos

Hay algunos conceptos erróneos comunes con respecto a WebSocket y Socket.IO:

1. El primer error es que usar Socket.IO es significativamente más fácil que usar WebSocket, lo cual no parece ser el caso. Vea los ejemplos a continuación.

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

3. La tercera idea errónea es que Socket.IO reduce la conexión de la conexión como una alternativa en los navegadores más antiguos. En realidad, se supone que el navegador es antiguo e inicia una conexión AJAX con el servidor, que luego se actualiza en los navegadores compatibles con WebSocket, después de que se intercambia algo de tráfico. Vea a continuación 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 segundo, 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 de 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 de 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 de 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 esos 2 pedidos:

1. La propia página HTML
2. actualización de la conexión a WebSocket

(La solicitud de actualización de la conexión es visible en las herramientas del desarrollador con una respuesta de 101 Protocolos de Conmutación).

Resultados Socket.IO

6 solicitudes, 181.56 KB, 0.25 s

De esos 6 pedidos:

1. la propia página HTML
2. JavaScript de Socket.IO (180 kilobytes)
3. Primera solicitud de AJAX de sondeo largo
4. segunda solicitud de AJAX de sondeo largo
5. Tercera solicitud de AJAX de sondeo largo
6. actualización de la 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 en 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.

Answer 2

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

Answer 3

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

Answer 4

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

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

http://davidwalsh.name/websocket

Answer 5

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

Creo que usar socket.io solo porque tiene fallbacks no es una buena idea. Deje IE8 RIP.

En el pasado ha habido muchos casos en 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 necesite trabajar con su aplicación existente, probablemente estaría de acuerdo con 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.