Quais são as diferenças entre socket.io e websockets no node.js?
Ambas são tecnologias push de servidor? As únicas diferenças que senti foram,

1. socket.io me permitiu enviar / emitir mensagens especificando um nome de evento.

2. No caso do socket.io, uma mensagem do servidor chegará a todos os clientes, mas, para o mesmo nos websockets, fui forçado a manter uma matriz de todas as conexões e percorrê-lo para enviar mensagens a todos os clientes.

Além disso, eu me pergunto por que os inspetores da Web (como o Chrome / firebug / fiddler) não conseguem capturar essas mensagens (do socket.io/websocket) do servidor?

Por favor, esclareça isso.

Suas vantagens são que simplifica o uso do WebSockets conforme descrito em # 2 e, provavelmente, o mais importante, fornece failover para outros protocolos no caso de o WebSockets não ser suportado no navegador ou servidor. Eu evitaria usar o WebSockets diretamente, a menos que você esteja familiarizado com os ambientes em que eles não funcionam e seja capaz de contornar essas limitações.

Esta é uma boa leitura sobre WebSockets e Socket.IO.

http://davidwalsh.name/websocket

Equívocos

Existem alguns conceitos errados comuns sobre o WebSocket e o Socket.IO:

1. O primeiro equívoco é que usar o Socket.IO é significativamente mais fácil do que usar o WebSocket, o que não parece ser o caso. Veja exemplos abaixo.

2. O segundo equívoco é que o WebSocket não é amplamente suportado nos navegadores. Veja abaixo para mais informações.

3. O terceiro equívoco é que o Socket.IO rebaixa a conexão como um substituto em navegadores mais antigos. Na verdade, ele assume que o navegador é antigo e inicia uma conexão AJAX com o servidor, que é posteriormente atualizada em navegadores que suportam o WebSocket, depois que algum tráfego é trocado. Veja abaixo para detalhes.

Minha experiência

Eu escrevi um módulo npm para demonstrar a diferença entre WebSocket e Socket.IO:

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-socket.io

É um exemplo simples de código do lado do servidor e do cliente - o cliente se conecta ao servidor usando o WebSocket ou o Socket.IO e o servidor envia três mensagens em intervalos de 1s, que são adicionadas ao DOM pelo cliente.

Lado do servidor

Compare o exemplo do servidor do uso do WebSocket e Socket.IO para fazer o mesmo em um aplicativo Express.js:

Servidor WebSocket

Exemplo 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');

Fonte: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js

Servidor Socket.IO

Exemplo 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');

Fonte: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js

Lado do cliente

Compare o exemplo do lado do cliente de usar WebSocket e Socket.IO para fazer o mesmo no navegador:

Cliente WebSocket

Exemplo de cliente WebSocket usando 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

Cliente Socket.IO

Exemplo de cliente Socket.IO usando 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

Tráfego de rede

Para ver a diferença no tráfego de rede, você pode executar meu teste . Aqui estão os resultados que obtive:

Resultados do WebSocket

2 pedidos, 1,50 KB, 0,05 s

Desses 2 pedidos:

1. Própria página HTML
2. atualização de conexão para WebSocket

(A solicitação de atualização da conexão é visível nas ferramentas do desenvolvedor com uma resposta 101 Switching Protocols.)

Resultados do Socket.IO

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

Desses 6 pedidos:

1. a própria página HTML
2. JavaScript do Socket.IO (180 kilobytes)
3. primeira solicitação AJAX de sondagem longa
4. segundo pedido AJAX de sondagem longa
5. terceira solicitação AJAX de sondagem longa
6. atualização de conexão para WebSocket

Screenshots

Resultados do WebSocket que obtive no localhost:

Resultados do Socket.IO que obtive no localhost:

Teste-se

Começo rápido:

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

Aberto http: // localhost: 3001 / no seu navegador, abra as ferramentas de desenvolvedor com Shift + Ctrl + I, abra a guia Rede e recarregue a página com Ctrl + R para ver o tráfego de rede da versão WebSocket.

Abra http: // localhost: 3002 / no seu navegador, abra as ferramentas de desenvolvedor com Shift + Ctrl + I, abra a guia Rede e recarregue a página com Ctrl + R para ver o tráfego de rede da versão Socket.IO.

Para desinstalar:

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

Compatibilidade do navegador

Em junho de 2016, o WebSocket funcionava em tudo, exceto no Opera Mini, incluindo o IE superior a 9.

Esta é a compatibilidade do navegador do WebSocket no Can I Use a partir de junho de 2016:

Consulte http://caniuse.com/websockets para obter informações atualizadas.

Vou fornecer um argumento contra o uso do socket.io.

Eu acho que usar socket.io apenas porque tem fallbacks não é uma boa idéia. Deixe o IE8 rasgar.

No passado, houve muitos casos em que novas versões do NodeJS quebraram o socket.io. Você pode verificar essas listas para obter exemplos ... https://github.com/socketio/socket.io/issues?q=install+error

Se você desenvolver um aplicativo para Android ou algo que precise trabalhar com o aplicativo existente, provavelmente estará bem trabalhando com o WS imediatamente, o socket.io poderá lhe dar alguns problemas ...

Além disso, o módulo WS para Node.JS é incrivelmente simples de usar.

Usar o Socket.IO é basicamente como usar o jQuery - você deseja oferecer suporte a navegadores mais antigos, precisa escrever menos código e a biblioteca fornecerá fallbacks. O Socket.io usa a tecnologia websockets, se disponível, e se não, verifica o melhor tipo de comunicação disponível e o utiliza.

Mesmo que os navegadores modernos ofereçam suporte ao WebSockets agora, acho que não há necessidade de jogar fora o SocketIO e ele ainda tem seu lugar em qualquer projeto atual. É fácil de entender e, pessoalmente, aprendi como o WebSockets funciona graças ao SocketIO.

Como dito neste tópico, existem várias bibliotecas de integração para tipos de definição Angular, React etc., e de definição para TypeScript e outras linguagens de programação.

O outro ponto que eu acrescentaria às diferenças entre o Socket.io e o WebSockets é que o clustering com o Socket.io não é um grande problema. O Socket.io oferece adaptadores que podem ser usados ​​para vinculá-lo ao Redis para aprimorar a escalabilidade. Você possui ioredis e socket.io-redis, por exemplo.

Sim, eu sei, o SocketCluster existe, mas isso é fora de tópico.

O Socket.IO usa o WebSocket e, quando o WebSocket não está disponível, usa algo de fallback para fazer conexões em tempo real.

https://socket.io/docs/#What-Socket-IO-is-not (com minha ênfase )

O que o Socket.IO não é

O Socket.IO NÃO é uma implementação do WebSocket. Embora o Socket.IO realmente use o WebSocket como transporte quando possível, ele adiciona alguns metadados a cada pacote: o tipo de pacote, o espaço para nome e a identificação do pacote quando uma confirmação de mensagem é necessária. É por isso que um cliente WebSocket não poderá se conectar com êxito a um servidor Socket.IO , e um cliente Socket.IO também não poderá se conectar a um servidor WebSocket . Por favor, veja a especificação do protocolo aqui .

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