Missverständnisse

Es gibt einige verbreitete Missverständnisse über WebSocket und Socket.IO:

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

2. Der zweite Irrglaube ist, dass WebSocket von den Browsern nicht unterstützt wird. Siehe unten für weitere Informationen.

3. Der dritte Irrglaube ist, dass Socket.IO die Verbindung bei älteren Browsern als Fallback herabstuft. In Wirklichkeit geht Socket.IO davon aus, dass der Browser alt ist und startet eine AJAX-Verbindung zum Server, die später auf Browsern, die WebSocket unterstützen, hochgestuft wird, nachdem etwas Datenverkehr ausgetauscht wurde. Siehe unten für Details.

Mein Experiment

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

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

Es ist ein einfaches Beispiel für serverseitigen und clientseitigen Code - der Client verbindet sich mit dem Server entweder über WebSocket oder Socket.IO und der Server sendet drei Nachrichten in 1s-Intervallen, die vom Client zum DOM hinzugefügt werden.

Server-seitig

Vergleichen Sie das serverseitige Beispiel für die Verwendung von WebSocket und Socket.IO mit einer Express.js-Anwendung, die dasselbe tut:

WebSocket Server

WebSocket-Server-Beispiel 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

Socket.IO Server Beispiel 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-seitig

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

WebSocket-Client

WebSocket-Client-Beispiel 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

Socket.IO-Client-Beispiel 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

Netzwerkverkehr

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

WebSocket-Ergebnisse

2 Anfragen, 1.50 KB, 0.05 s

Von diesen 2 Anfragen:

1. HTML-Seite selbst
2. Verbindungsaufbau zu WebSocket

(Die Anforderung zur Verbindungsaktualisierung ist in den Entwicklertools mit einer 101 Switching Protocols-Antwort sichtbar).

Socket.IO Ergebnisse

6 Anfragen, 181.56 KB, 0.25 s

Von diesen 6 Anfragen:

1. die HTML-Seite selbst
2. Socket.IO's JavaScript (180 Kilobytes)
3. die erste lange AJAX-Anfrage (Polling)
4. zweite AJAX-Anfrage mit langer Abfrage
5. dritte AJAX-Anfrage mit langer Abfrage
6. Upgrade der Verbindung auf WebSocket

Bildschirmfotos

WebSocket-Ergebnisse, die ich auf localhost erhalten habe:

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

Testen Sie 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 Shift+Strg+I, öffnen Sie die Registerkarte Netzwerk und laden Sie die Seite mit Strg+R neu, um den Netzwerkverkehr für die WebSocket-Version zu sehen.

Ö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 die Socket.IO-Version zu sehen.

Zum Deinstallieren:

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

Browser-Kompatibilität

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

Dies ist die Browserkompatibilität von WebSocket auf Can I Use, Stand Juni 2016:

Siehe http://caniuse.com/websockets für aktuelle Informationen.

Seine Vorteile sind, dass es die Verwendung von WebSockets vereinfacht, wie Sie in #2 beschrieben haben, und, was wahrscheinlich noch wichtiger ist, es bietet Ausweichmöglichkeiten zu anderen Protokollen für den Fall, dass WebSockets vom Browser oder Server nicht unterstützt werden. Ich würde es vermeiden, WebSockets direkt zu verwenden, es sei denn, Sie sind sehr vertraut mit den Umgebungen, in denen sie nicht funktionieren, und Sie sind in der Lage, diese Einschränkungen zu umgehen.

Dies ist eine gute Lektüre über WebSockets und Socket.IO.

http://davidwalsh.name/websocket

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

Ich denke, mit socket.io nur weil es Fallbacks ist nicht eine gute Idee. Lassen Sie IE8 RIP.

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

Wenn Sie eine Android-App oder etwas anderes entwickeln wollen, das mit Ihrer bestehenden App zusammenarbeiten muss, würden Sie wahrscheinlich sofort mit WS arbeiten, socket.io könnte Ihnen da einige Probleme bereiten...

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