it-swarm.com.de

Unterschiede zwischen socket.io und websockets

Was sind die Unterschiede zwischen socket.io und websockets in node.js?
Sind beide Server-Push-Technologien? Die einzigen Unterschiede, die ich spürte, waren:

  1. socket.io erlaubte mir, Nachrichten durch Angabe eines Ereignisnamens zu senden/zu senden.

  2. Im Falle von socket.io wird eine Nachricht vom Server auf allen Clients ankommen, aber für das gleiche in websockets war ich gezwungen, ein Array aller Verbindungen zu behalten und es zu durchlaufen, um Nachrichten an alle Clients zu senden.

Ich frage mich auch, warum Web-Inspektoren (wie Chrome/Firebug/Fiddler) diese Nachrichten (von socket.io/websocket) nicht vom Server abfangen können.

Bitte klären Sie dies.

381
Vivek

Die Vorteile sind, dass es die Verwendung von WebSockets vereinfacht, wie Sie es in Nummer 2 beschrieben haben, und wahrscheinlich noch wichtiger ist, dass es Failover für andere Protokolle bietet, falls WebSockets vom Browser oder Server nicht unterstützt werden. Ich würde es vermeiden, WebSockets direkt zu verwenden, wenn Sie nicht genau wissen, in welchen Umgebungen sie nicht funktionieren und Sie in der Lage sind, diese Einschränkungen zu umgehen.

Dies ist eine gute Lektüre sowohl für WebSockets als auch für Socket.IO.

http://davidwalsh.name/websocket

297

Missverständnisse

In Bezug auf WebSocket und Socket.IO gibt es nur wenige häufige Missverständnisse:

  1. Das erste Missverständnis ist, dass die Verwendung von Socket.IO erheblich einfacher ist als die Verwendung von WebSocket, was anscheinend nicht der Fall ist. Siehe Beispiele unten.

  2. Das zweite Missverständnis ist, dass WebSocket in den Browsern nicht allgemein unterstützt wird. Weitere Informationen finden Sie weiter unten.

  3. Das dritte Missverständnis ist, dass Socket.IO die Verbindung als Ersatz für ältere Browser herabsetzt. Tatsächlich wird davon ausgegangen, dass der Browser veraltet ist und eine AJAX) Verbindung zum Server herstellt, die später auf Browsern, die WebSocket unterstützen, aktualisiert wird, nachdem ein Teil des Datenverkehrs ausgetauscht wurde. Weitere Informationen finden Sie weiter unten.

Mein Experiment

Ich habe ein npm-Modul geschrieben, um den Unterschied zwischen WebSocket und Socket.IO zu demonstrieren:

Dies ist ein einfaches Beispiel für serverseitigen und clientseitigen Code: Der Client stellt über WebSocket oder Socket.IO eine Verbindung zum Server her, und der Server sendet drei Nachrichten in 1-Sekunden-Intervallen, die vom Client zum DOM hinzugefügt werden.

Serverseitig

Vergleichen Sie das serverseitige Beispiel für die Verwendung von WebSocket und Socket.IO, um dasselbe in einer Express.js-App zu tun:

WebSocket Server

Beispiel für einen WebSocket-Server mit 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');

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

Socket.IO Server

Beispiel für einen Socket.IO-Server mit 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');

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

Client-Seite

Vergleichen Sie das clientseitige Beispiel für die Verwendung von WebSocket und Socket.IO, um dasselbe im Browser zu tun:

WebSocket Client

Beispiel für einen WebSocket-Client mit Vanilla JavaScript:

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); });

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

Socket.IO Client

Beispiel für einen Socket.IO-Client mit Vanilla-JavaScript:

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); });

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

Netzwerktraffic

Um den Unterschied im Netzwerkverkehr zu sehen, können Sie meinen Test ausführen . Hier sind die Ergebnisse, die ich bekommen habe:

WebSocket-Ergebnisse

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

Aus diesen 2 Anfragen:

  1. HTML-Seite selbst
  2. verbindungs-Upgrade auf WebSocket

(Die Verbindungsaktualisierungsanforderung wird in den Entwicklertools mit einer Antwort von 101 Switching Protocols angezeigt.)

Socket.IO Ergebnisse

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

Aus diesen 6 Anfragen:

  1. die HTML-Seite selbst
  2. JavaScript von Socket.IO (180 KB)
  3. erste lange Abfrage AJAX Anfrage
  4. zweites langes Polling AJAX request
  5. dritte lange Abfrage AJAX Anfrage
  6. verbindungs-Upgrade auf WebSocket

Screenshots

WebSocket-Ergebnisse, die ich auf localhost erhalten habe:

WebSocket results - websocket-vs-socket.io module

Socket.IO-Ergebnisse, die ich auf localhost erhalten habe:

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

Teste dich selbst

Schnellstart:

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

Öffnen Sie http: // localhost: 3001 / in Ihrem Browser, öffnen Sie die Entwicklertools mit Umschalt + Strg + I, öffnen Sie die Registerkarte Netzwerk und laden Sie die Seite mit Strg + R neu, um den Netzwerkverkehr für WebSocket anzuzeigen Ausführung.

Öffnen Sie http: // localhost: 3002 / in Ihrem Browser, öffnen Sie die Entwicklertools mit Umschalt + Strg + I, öffnen Sie die Registerkarte Netzwerk und laden Sie die Seite mit Strg + R neu, um den Netzwerkverkehr für den Socket anzuzeigen .IO Version.

So deinstallieren Sie:

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

Browser-Kompatibilität

Ab Juni 2016 funktioniert WebSocket auf allen außer Opera Mini, einschließlich IE höher als 9).

Dies ist die Browserkompatibilität von WebSocket auf Kann ich verwenden Stand Juni 2016:

enter image description here

Aktuelle Informationen finden Sie unter http://caniuse.com/websockets .

432
rsp

Ich werde ein Argument gegen die Verwendung von socket.io liefern.

Ich denke, Socket.io nur zu verwenden, weil es Fallbacks hat, ist keine gute Idee. Lassen Sie IE8 RIP.

In der Vergangenheit gab es viele Fälle, in denen neue Versionen von NodeJS socket.io kaputt gemacht haben. Sie können diese Listen auf Beispiele überprüfen ... https://github.com/socketio/socket.io/issues?q=install+error

Wenn Sie eine Android App oder etwas, das mit Ihrer vorhandenen App funktionieren muss, entwickeln möchten, ist die Arbeit mit WS wahrscheinlich in Ordnung. Socket.io kann Ihnen dort Probleme bereiten. .

Außerdem ist das WS-Modul für Node.JS erstaunlich einfach zu bedienen.

26
Victorio Berra

Die Verwendung von Socket.IO entspricht im Wesentlichen der Verwendung von jQuery. Wenn Sie ältere Browser unterstützen möchten, müssen Sie weniger Code schreiben, und die Bibliothek bietet Fallbacks. Socket.io verwendet, falls verfügbar, die Websockets-Technologie. Wenn nicht, überprüft Socket.io den besten verfügbaren Kommunikationstyp und verwendet ihn.

18
Dev Agrawal

Socket.IO verwendet WebSocket, und wenn WebSocket nicht verfügbar ist, verwendet Socket algo, um Echtzeitverbindungen herzustellen.

3
Nitin Tyagi

Selbst wenn moderne Browser jetzt WebSockets unterstützen, muss SocketIO meines Erachtens nicht weggeworfen werden, und es hat immer noch seinen Platz in jedem heutigen Projekt. Es ist leicht zu verstehen und ich persönlich habe dank SocketIO gelernt, wie WebSockets funktionieren.

Wie in diesem Thema erwähnt, gibt es zahlreiche Integrationsbibliotheken für Angular, React usw. und Definitionstypen für TypeScript und andere Programmiersprachen.

Der andere Punkt, den ich zu den Unterschieden zwischen Socket.io und WebSockets hinzufügen möchte, ist, dass das Clustering mit Socket.io keine große Sache ist. Socket.io bietet Adapter , mit denen es mit Redis verknüpft werden kann, um die Skalierbarkeit zu verbessern. Sie haben zum Beispiel ioredis und socket.io-redis .

Ja, ich weiß, SocketCluster existiert, aber das ist kein Thema.

1
Maxime Lafarie