Missverständnisse
Es gibt nur wenige häufige Missverständnisse in Bezug auf WebSocket und Socket.IO:
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.
Das zweite Missverständnis ist, dass WebSocket in den Browsern nicht allgemein unterstützt wird. Siehe unten für weitere Informationen.
Das dritte Missverständnis ist, dass Socket.IO die Verbindung als Fallback für ältere Browser herunterstuft. Es wird davon ausgegangen, dass der Browser alt ist und eine AJAX-Verbindung zum Server herstellt, die später in Browsern, die WebSocket unterstützen, aktualisiert wird, nachdem ein Teil des Datenverkehrs 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:
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 Intervallen von 1 Sekunde, 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 Vanille-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 Vanille-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 erhalten habe:
WebSocket-Ergebnisse
2 Anfragen, 1,50 KB, 0,05 s
Aus diesen 2 Anfragen:
- HTML-Seite selbst
- 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:
- die HTML-Seite selbst
- JavaScript von Socket.IO (180 Kilobyte)
- erste lange Abfrage AJAX-Anfrage
- zweite lange Abfrage AJAX-Anfrage
- dritte lange Abfrage AJAX-Anfrage
- Verbindungs-Upgrade auf WebSocket
Screenshots
WebSocket-Ergebnisse, die ich auf localhost erhalten habe:
Socket.IO Ergebnisse, die ich auf localhost erhalten habe:
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 die WebSocket-Version anzuzeigen.
Ö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 anzuzeigen.
So deinstallieren Sie:
# Uninstall:
npm rm -g websocket-vs-socket.io
Browser-Kompatibilität
Ab Juni 2016 funktioniert WebSocket mit Ausnahme von Opera Mini, einschließlich IE über 9.
Dies ist die Browserkompatibilität von WebSocket für Kann ich ab Juni 2016 verwenden:
Aktuelle Informationen finden Sie unter http://caniuse.com/websockets .