Помилкові уявлення
Існує кілька поширених помилок щодо WebSocket та Socket.IO:
Перша помилкова думка полягає в тому, що використовувати Socket.IO значно простіше, ніж використовувати WebSocket, що, здається, не так. Дивіться приклади нижче.
Друга помилкова думка полягає в тому, що WebSocket не широко підтримується в браузерах. Дивіться нижче для отримання додаткової інформації.
Третя помилкова думка полягає в тому, що Socket.IO погіршує з’єднання як резервне використання у старих браузерах. Він фактично передбачає, що браузер старий і запускає AJAX-з'єднання з сервером, яке згодом оновлюється в браузерах, що підтримують WebSocket, після обміну деяким трафіком. Детальніше дивіться нижче.
Мій експеримент
Я написав модуль npm, щоб продемонструвати різницю між WebSocket і Socket.IO:
Це простий приклад коду на стороні сервера та на стороні клієнта - клієнт підключається до сервера за допомогою WebSocket або Socket.IO, а сервер надсилає три повідомлення з інтервалом в 1s, які додаються до DOM клієнтом.
На стороні сервера
Порівняйте на прикладі сервера приклад використання WebSocket і Socket.IO, щоб зробити те саме в додатку Express.js:
WebSocket Server
Приклад сервера WebSocket за допомогою 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');
Джерело: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
Сервер Socket.IO
Приклад сервера Socket.IO за допомогою 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');
Джерело: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
Клієнтська сторона
Порівняйте клієнтський приклад використання WebSocket і Socket.IO, щоб зробити те саме в браузері:
Клієнт WebSocket
Приклад клієнта WebSocket за допомогою ванільного 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); });
Джерело: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
Socket.IO Клієнт
Приклад клієнта Socket.IO за допомогою ванільного 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); });
Джерело: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
Мережевий трафік
Щоб побачити різницю в мережевому трафіку, ви можете запустити мій тест . Ось результати, які я отримав:
Результати WebSocket
2 запити, 1,50 Кб, 0,05 с
З цих 2 запитів:
- Сама сторінка HTML
- оновлення підключення до WebSocket
(Запит на оновлення з'єднання видно на інструментах розробника з відповіддю 101 протоколів комутації.)
Socket.IO Результати
6 запитів, 181,56 Кб, 0,25 с
З цих 6 запитів:
- сама HTML-сторінка
- JavaScript Socket.IO (180 кілобайт)
- перший запит на довгий опитування AJAX
- другий довгий запит на опитування AJAX
- третій тривалий запит на опитування AJAX
- оновлення підключення до WebSocket
Скріншоти
Результати WebSocket, які я отримав у localhost:
Результати Socket.IO, які я отримав у localhost:
Перевірте себе
Швидкий старт:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Відкрийте http: // localhost: 3001 / у своєму браузері, відкрийте інструменти для розробників за допомогою Shift + Ctrl + I, відкрийте вкладку «Мережа» та перезавантажте сторінку за допомогою Ctrl + R, щоб побачити мережевий трафік для версії WebSocket.
Відкрийте http: // localhost: 3002 / у своєму браузері, відкрийте інструменти для розробників за допомогою Shift + Ctrl + I, відкрийте вкладку «Мережа» та перезавантажте сторінку за допомогою Ctrl + R, щоб побачити мережевий трафік для версії Socket.IO.
Щоб видалити:
# Uninstall:
npm rm -g websocket-vs-socket.io
Сумісність браузера
Станом на червень 2016 року WebSocket працює над усім, крім Opera Mini, включаючи IE вище 9.
Це сумісність веб-переглядача WebSocket в Чи можу я використовувати з червня 2016 року:
Дивіться http://caniuse.com/websockets для отримання актуальної інформації.