node.js - tutorial - Différences entre socket.io et websockets




socket.io tutorial (4)

Idées fausses

Il y a peu d'idées fausses communes concernant WebSocket et Socket.IO:

  1. La première idée fausse est que l'utilisation de Socket.IO est nettement plus facile que l'utilisation 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 supporté dans les navigateurs. Voir ci-dessous pour plus d'informations.

  3. La troisième idée fausse est que Socket.IO dégrade la connexion en tant que solution de repli sur les anciens navigateurs. Il suppose en fait que le navigateur est ancien et démarre une connexion AJAX au serveur, qui est ensuite mise à niveau sur les navigateurs prenant en charge WebSocket, après échange de 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é client - le client se connecte au serveur en utilisant WebSocket ou Socket.IO et le serveur envoie trois messages à intervalles de 1s, qui sont ajoutés au DOM par le client.

Du côté serveur

Comparez l'exemple côté serveur d'utilisation de WebSocket et de 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 JavaScript de 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 JavaScript de 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 dans le trafic réseau, vous pouvez exécuter mon test . Voici les résultats que j'ai obtenus:

Résultats WebSocket

2 requêtes, 1.50 KB, 0.05 s

De ces 2 demandes:

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

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

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 requête AJAX longue interrogation
  4. deuxième requête AJAX longue interrogation
  5. troisième requête AJAX longue interrogation
  6. mise à niveau de connexion à WebSocket

Captures d'écran

Résultats WebSocket que j'ai obtenus sur localhost:

Socket.IO résultats que j'ai obtenu sur localhost:

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 Maj + Ctrl + I, ouvrez l'onglet Réseau et rechargez la page avec Ctrl + R pour voir le trafic réseau de la version WebSocket.

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

Pour désinstaller:

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

Compatibilité du navigateur

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

Voici la compatibilité de WebSocket sur Can I Use à partir de juin 2016:

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

Quelles sont les différences entre socket.io et websockets dans node.js?
Sont-ils tous les deux des technologies de serveur push? Les seules différences que j'ai ressenties,

  1. socket.io m'a permis d'envoyer / d'é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 les websockets, j'ai été obligé de garder un tableau de toutes les connexions et de le parcourir pour envoyer des messages à tous les clients.

Aussi, je me demande pourquoi les inspecteurs web (comme Chrome / firebug / fiddler) sont incapables d'attraper ces messages (de socket.io/websocket) du serveur?

S'il vous plaît clarifier ceci.


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

Je pense en utilisant socket.io uniquement parce qu'il a fallbacks n'est pas une bonne idée. Laissez IE8 RIP.

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

Si vous allez développer une application Android ou quelque chose qui a besoin de fonctionner avec votre application existante, vous travaillerez sans doute avec WS tout de suite, socket.io pourrait vous causer des problèmes ...

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


Socket.IO utilise WebSocket et lorsque WebSocket n'est pas disponible utilise fallback algo pour établir des connexions en temps réel.


Socket.IO utilise WebSockets quand cela est possible.

Ses avantages sont qu'il simplifie l'utilisation de WebSockets comme vous l'avez décrit dans # 2, et probablement plus important, il fournit des basculements vers d'autres protocoles dans le cas où les WebSockets ne sont pas pris en charge sur le navigateur ou le serveur. J'éviterais d'utiliser directement WebSockets à moins que vous ne connaissiez très bien les environnements dans lesquels ils ne fonctionnent pas et que vous soyez capable de contourner ces limitations.

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

http://davidwalsh.name/websocket





socket.io