заблуждения
Существует несколько распространенных заблуждений относительно WebSocket и Socket.IO:
Первое заблуждение заключается в том, что использовать Socket.IO значительно проще, чем использовать WebSocket, что, похоже, не так. Смотрите примеры ниже.
Второе заблуждение заключается в том, что WebSocket не широко поддерживается в браузерах. Смотрите ниже для получения дополнительной информации.
Третье заблуждение заключается в том, что Socket.IO снижает версию соединения как запасной вариант в старых браузерах. Фактически предполагается, что браузер устарел и устанавливает AJAX-соединение с сервером, которое впоследствии обновляется в браузерах, поддерживающих WebSocket, после обмена некоторым трафиком. Смотрите ниже для деталей.
Мой эксперимент
Я написал модуль npm, чтобы продемонстрировать разницу между WebSocket и Socket.IO:
Это простой пример кода на стороне сервера и на стороне клиента: клиент подключается к серверу с помощью WebSocket или Socket.IO, а сервер отправляет три сообщения с интервалом в 1 с, которые клиент добавляет в 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 Switching Protocols.)
Результаты 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 для получения актуальной информации.