web-dev-qa-db-fra.com

Différences entre socket.io et websockets

Quelles sont les différences entre socket.io et websockets dans node.js?
S'agit-il de technologies Push serveur? La seule différence que je ressentais était,

  1. socket.io m'a permis d'envoyer/émettre des messages en spécifiant un nom d'événement.

  2. Dans le cas de socket.io, un message du serveur atteindra tous les clients, mais pour la même chose dans websockets, je suis obligé de conserver un tableau de toutes les connexions et de le parcourir pour envoyer des messages à tous les clients.

De plus, je me demande pourquoi les inspecteurs Web (tels que Chrome/firebug/fiddler) ne parviennent pas à récupérer ces messages (à partir de socket.io/websocket) à partir du serveur?

S'il vous plaît clarifier ceci.

node.jsgoogle-chromefirebugwebsocketsocket.io
381
Vivek

Ses avantages sont qu’il simplifie l’utilisation de WebSockets comme vous l’avez décrit à la rubrique 2 et qu’il est probablement plus important de fournir des basculements vers d’autres protocoles dans le cas où les WebSockets ne seraient pas pris en charge sur le navigateur ou le serveur. J'éviterais d'utiliser WebSockets directement, sauf si vous connaissez très bien les environnements dans lesquels ils ne fonctionnent pas et si vous êtes capable de contourner ces limitations.

C'est une bonne lecture à la fois sur WebSockets et sur Socket.IO.

http://davidwalsh.name/websocket

297
Timothy Strimple

Idées fausses

Il existe peu d'idées fausses concernant WebSocket et Socket.IO:

  1. La première idée fausse est que l'utilisation de Socket.IO est nettement plus simple que celle de WebSocket, ce qui ne semble pas être le cas. Voir les exemples ci-dessous.

  2. La deuxième idée fausse est que WebSocket n'est pas largement pris en charge par les navigateurs. Voir ci-dessous pour plus d'informations.

  3. La troisième idée fausse est que Socket.IO rétrograde la connexion en tant que solution de secours sur les navigateurs plus anciens. Il suppose en réalité que le navigateur est ancien et démarre une connexion AJAX au serveur, qui est mise à niveau ultérieurement sur les navigateurs prenant en charge WebSocket, après échange du trafic. Voir ci-dessous pour plus de détails.

Mon expérience

J'ai écrit un module npm pour démontrer la différence entre WebSocket et Socket.IO:

C'est un exemple simple de code côté serveur et côté code client - le client se connecte au serveur à l'aide de WebSocket ou de Socket.IO et le serveur envoie trois messages à intervalles de 1 secondes, qui sont ajoutés au DOM par le client.

Du côté serveur

Comparez l’exemple côté serveur d’utilisation de WebSocket et Socket.IO pour faire de même dans une application Express.js:

Serveur WebSocket

Exemple de serveur WebSocket utilisant 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');

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

Socket.IO Server

Exemple de serveur Socket.IO utilisant 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');

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

Côté client

Comparez l'exemple client d'utilisation de WebSocket et de Socket.IO pour faire de même dans le navigateur:

WebSocket Client

Exemple de client WebSocket utilisant le code 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); });

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

Socket.IO Client

Exemple de client Socket.IO utilisant le code 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); });

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

Trafic réseau

Pour voir la différence de trafic réseau, vous pouvez exécuter mon test . Voici les résultats que j'ai obtenus:

Résultats WebSocket

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

Parmi ces 2 demandes:

  1. Page HTML elle-même
  2. mise à niveau de la connexion vers WebSocket

(La demande de mise à niveau de la connexion est visible sur les outils de développement avec une réponse 101 Switching Protocols.)

Socket.IO Résultats

6 demandes, 181,56 Ko, 0,25 s

De ces 6 demandes:

  1. la page HTML elle-même
  2. JavaScript de Socket.IO (180 kilo-octets)
  3. première interrogation longue AJAX demande
  4. deuxième longue interrogation AJAX demande
  5. troisième interrogation longue AJAX demande
  6. mise à niveau de la connexion vers WebSocket

Captures d'écran

Les résultats WebSocket que j'ai sur localhost:

WebSocket results - websocket-vs-socket.io module

Les résultats de Socket.IO que j'ai obtenus sur localhost:

Socket.IO results - websocket-vs-socket.io module

Testez-vous

Démarrage rapide:

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

Ouvrez http: // localhost: 3001 / dans votre navigateur, ouvrez les outils de développement avec les touches Maj + Ctrl + I, ouvrez l'onglet Réseau et rechargez la page avec Ctrl + R pour afficher le trafic réseau du WebSocket. version.

Ouvrez http: // localhost: 3002 / dans votre navigateur, ouvrez les outils de développement avec les touches Maj + Ctrl + I, ouvrez l'onglet Réseau et rechargez la page avec Ctrl + R pour voir le trafic réseau du Socket. Version .IO.

Pour désinstaller:

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

Compatibilité du navigateur

Depuis juin 2016, WebSocket fonctionne sur tout, sauf Opera Mini, y compris IE supérieur à 9.

Voici la compatibilité du navigateur de WebSocket sur puis-je utiliser à compter de juin 2016:

enter image description here

Voir http://caniuse.com/websockets pour des informations à jour.

432
rsp

Je vais fournir un argument contre l'utilisation de socket.io.

Je pense que l’utilisation de socket.io uniquement parce qu’elle a des replis n’est pas une bonne idée. Laissez IE8 RIP.

Dans le passé, il y a eu de nombreux cas où de nouvelles versions de NodeJS ont cassé socket.io. Vous pouvez consulter ces listes pour des exemples ... https://github.com/socketio/socket.io/issues?q=install+error

Si vous développez une application Android ou quelque chose qui doit fonctionner avec votre application existante, vous pourrez probablement travailler avec WS tout de suite, socket.io peut vous causer des problèmes ...

De plus, le module WS pour Node.JS est incroyablement simple à utiliser.

26
Victorio Berra

Utiliser Socket.IO revient en gros à utiliser jQuery - vous souhaitez prendre en charge les navigateurs plus anciens, vous devez écrire moins de code et la bibliothèque fournira des solutions de secours. Socket.io utilise la technologie websockets si disponible, et sinon, vérifie le meilleur type de communication disponible et l’utilise.

18
Dev Agrawal

Socket.IO utilise WebSocket et lorsque WebSocket n’est pas disponible, l’option de secours est utilisée pour établir des connexions en temps réel.

3
Nitin Tyagi

Même si les navigateurs modernes prennent en charge WebSockets à présent, je pense qu'il n'est pas nécessaire de jeter SocketIO et qu'il a toujours sa place dans tous les projets actuels. C'est facile à comprendre et, personnellement, j'ai appris le fonctionnement de WebSockets grâce à SocketIO.

Comme indiqué dans cette rubrique, il existe de nombreuses bibliothèques d'intégration pour Angular, React, etc., ainsi que des types de définition pour TypeScript et d'autres langages de programmation.

L'autre point que j'ajouterais aux différences entre Socket.io et WebSockets est que la mise en cluster avec Socket.io n'est pas une grosse affaire. Socket.io offre Adapters qui peut être utilisé pour le relier à Redis afin d’améliorer l’évolutivité. Vous avez ioredis et socket.io-redis par exemple.

Oui, je sais, SocketCluster existe, mais c'est hors sujet.

1
Maxime Lafarie