Nieporozumienia

Istnieje kilka typowych nieporozumień dotyczących WebSocket i Socket.IO:

1. Pierwszym błędnym założeniem jest to, że za pomocą Socket.IO jest znacznie łatwiejsze niż korzystanie z WebSocket, co wydaje się nie mieć miejsca. Zobacz przykłady poniżej.

2. Drugim błędnym założeniem jest to, że WebSocket nie jest szeroko obsługiwany w przeglądarkach. Zobacz poniżej, aby uzyskać więcej informacji.

3. Trzecie błędne przekonanie jest takie, że Socket.IO downgrades the connection jako alternatywa dla starszych przeglądarek. W rzeczywistości zakłada, że przeglądarka jest stara i rozpoczyna połączenie AJAX z serwerem, który zostaje później zaktualizowany 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:

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-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 wiadomości w odstępach 1s, które są dodawane do DOM przez Klienta.

Po stronie serwera

Porównaj przykład użycia WebSocket po stronie serwera oraz Socket.IO zrobić to samo w ekspresie.aplikacja js:

WebSocket Server

WebSocket serwer przykład 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

Socket.IO Serwer

Socket.IO przykład serwera za pomocą programu 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

Client-side

Porównaj przykład po stronie klienta korzystania z WebSocket i Socket.IO aby zrobić to samo w przeglądarce:

WebSocket Client

Przykład klienta WebSocket przy użyciu 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); });

Źródło: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html

Socket.IO Klient

Socket.IO przykład klienta przy użyciu 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); });

Źródło: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html

Sieć traffic

Aby zobaczyć różnicę w ruchu sieciowym, możesz uruchomić mój test . Oto wyniki, które otrzymałem:

Wyniki WebSocket

2 zapytań, 1.50 KB, 0.05 s

Z tych 2 żądań:

1. sama strona HTML
2. Aktualizacja połączenia do WebSocket

(żądanie aktualizacji połączenia jest widoczne w narzędziach programistycznych z odpowiedzią 101 protokołów przełączania.)

Socket.IO Wyniki

6 zapytań, 181.56 KB, 0.25 s

Z tych 6 żądań:

1. sama strona HTML
2. Socket.IO " s JavaScript (180 kilobajtów)
3. pierwsza długa ankieta
4. second long ankiet AJAX request
5. Third long ankiet AJAX request
6. Aktualizacja połączenia do WebSocket

Screeny

Wyniki WebSocket, które dostałem na localhost:

Socket.IO wyniki, 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 przeł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 przeładuj stronę za pomocą Ctrl + R, aby zobaczyć sieć traffic for the Socket.IO wersja.

Aby odinstalować:

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

Zgodność przeglądarki

Od czerwca 2016 WebSocket działa na wszystkim oprócz Opery Mini, w tym IE wyższej niż 9.

Zobacz http://caniuse.com/websockets dla aktualnych informacji.

Im przedstawi argument przeciwko używaniu socket.io.

Myślę, że używając socket.io wyłącznie dlatego, że ma upadki nie jest dobrym pomysłem. Let IE8 RIP.

W przeszłości było wiele przypadków, w których nowe wersje NodeJS zostały złamane socket.io. możesz sprawdzić te listy pod kątem przykładów... https://github.com/socketio/socket.io/issues?q=install + błąd

Jeśli pójdziesz do opracowania aplikacji na Androida lub coś, co musi działać z istniejącą aplikacją, prawdopodobnie praca z WS od zaraz, socket.io to może przysporzyć ci kłopotów...

Plus moduł ws dla węzła.JS jest niezwykle prosty w użyciu.

Za pomocą Socket.IO to w zasadzie jak korzystanie z jQuery - chcesz obsługiwać starsze przeglądarki, musisz napisać mniej kodu, a biblioteka dostarczy Ci fallbacks. Socket.io używa technologii websockets, jeśli jest dostępna, a jeśli nie, sprawdza najlepszy dostępny typ komunikacji i korzysta z niej.

Socket.IO używa WebSocket, a gdy WebSocket nie jest dostępny, używa fallback algo do nawiązywania połączeń w czasie rzeczywistym.