Nieporozumienia
Istnieje kilka typowych nieporozumień dotyczących WebSocket i Socket.IO:
Pierwszym nieporozumieniem jest to, że używanie Socket.IO jest znacznie łatwiejsze niż używanie WebSocket, co nie wydaje się być prawdą. Zobacz przykłady poniżej.
Drugim nieporozumieniem jest to, że WebSocket nie jest szeroko obsługiwany w przeglądarkach. Zobacz więcej informacji.
Trzecie nieporozumienie polega na tym, że Socket.IO obniża połączenie jako awarię starszych przeglądarek. Zakłada, że przeglądarka jest stara i uruchamia połączenie AJAX z serwerem, które później jest uaktualniane w przeglądarkach obsługujących WebSocket, po wymianie ruchu. Szczegóły poniżej.
Mój eksperyment
Napisałem moduł npm, aby zademonstrować różnicę między WebSocket a Socket.IO:
Jest to prosty przykład kodu po stronie serwera i po stronie klienta - klient łączy się z serwerem za pomocą WebSocket lub Socket.IO, a serwer wysyła trzy komunikaty w odstępach 1s, które są dodawane do DOM przez klienta.
Po stronie serwera
Porównaj przykład użycia serwera WebSocket i Socket.IO do wykonania tego samego w aplikacji Express.js:
Serwer WebSocket
Przykład serwera WebSocket przy użyciu 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');
Źródło: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
Serwer Socket.IO
Przykład serwera Socket.IO przy użyciu 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');
Źródło: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
Strona klienta
Porównaj przykład użycia klienta WebSocket i Socket.IO do zrobienia tego samego w przeglądarce:
Klient WebSocket
Przykład klienta WebSocket z waniliowym 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); });
Źródło: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
Klient Socket.IO
Przykład klienta Socket.IO przy użyciu waniliowego 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); });
Źródło: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
Ruch sieciowy
Aby zobaczyć różnicę w ruchu sieciowym, możesz uruchomić mój test . Oto wyniki, które otrzymałem:
Wyniki WebSocket
2 żądania, 1,50 KB, 0,05 s
Z tych 2 wniosków:
- Sama strona HTML
- aktualizacja połączenia do WebSocket
(Żądanie aktualizacji połączenia jest widoczne w narzędziach programisty z odpowiedzią 101 Protokoły przełączające.)
Wyniki Socket.IO
6 wniosków, 181,56 KB, 0,25 s
Z tych 6 wniosków:
- sama strona HTML
- JavaScript Socket.IO (180 kilobajtów)
- pierwsze długie żądanie AJAX z odpytywaniem
- drugie długie żądanie AJAX z przepytywaniem
- trzecie długie żądanie AJAX z odpytywaniem
- aktualizacja połączenia do WebSocket
Zrzuty ekranu
Wyniki WebSocket, które otrzymałem na localhost:
Wyniki Socket.IO, które dostałem na localhost:
Sprawdź się
Szybki start:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Otwórz http: // localhost: 3001 / w przeglądarce, otwórz narzędzia programistyczne za pomocą Shift + Ctrl + I, otwórz kartę Sieć i ponownie załaduj stronę za pomocą Ctrl + R, aby zobaczyć ruch sieciowy dla wersji WebSocket.
Otwórz http: // localhost: 3002 / w przeglądarce, otwórz narzędzia programistyczne za pomocą Shift + Ctrl + I, otwórz kartę Sieć i ponownie załaduj stronę za pomocą Ctrl + R, aby zobaczyć ruch sieciowy dla wersji Socket.IO.
Aby odinstalować:
# Uninstall:
npm rm -g websocket-vs-socket.io
Kompatybilność z przeglądarkami
Od czerwca 2016 WebSocket działa na wszystkim oprócz Opery Mini, w tym IE wyższej niż 9.
Oto kompatybilność przeglądarki WebSocket w Czy mogę używać od czerwca 2016:
Aktualne informacje można znaleźć na stronie http://caniuse.com/websockets .