заблуждения

существует несколько распространенных заблуждений относительно WebSocket и сокета.ИО:

1. первое заблуждение заключается в том, что с помощью сокета.IO значительно проще, чем использовать WebSocket, что, похоже, не так. См. примеры ниже.

2. второе заблуждение заключается в том, что с WebSocket не поддерживается в браузерах. См. ниже для получения дополнительной информации.

3. третье заблуждение это розетка.IO понижает соединение как резервный вариант для старых браузеров. Он фактически предполагает, что браузер старый и запускает соединение AJAX с сервером, которое позже обновляется в браузерах, поддерживающих WebSocket, после обмена некоторым трафиком. Подробнее см. ниже.

мой эксперимент

я написал модуль npm, чтобы продемонстрировать разницу между WebSocket и Розетка.ИО:

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-socket.io

это простой пример кода на стороне сервера и клиента-клиент подключается к серверу с помощью WebSocket или сокета.IO и сервер отправляют три сообщения в интервалах 1s, которые добавляются в DOM с помощью клиент.

на стороне сервера

сравните пример использования WebSocket и Socket на стороне сервера.IO, чтобы сделать то же самое в экспрессе.приложение ДШ:

С WebSocket-Сервера

пример сервера 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

гнездо.ИО сервера

гнездо.Пример использования IO server Экспресс.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

гнездо.Клиент ИО

гнездо.Пример клиента ввода-вывода с использованием 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); });

источник:https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html

сетевой трафик

чтобы увидеть разницу в сетевом трафике вы можете запустить мой тест. Вот результаты, которые я got:

Результаты WebSocket

2 запроса, 1.50 КБ, 0.05 с

из этих 2 запросов:

1. сама HTML-страница
2. обновление соединения до WebSocket

(запрос на обновление соединения отображается на инструментах разработчика с ответом на 101 протокол переключения.)

гнездо.Результаты ИО

6 запросов, 181.56 КБ, 0.25 с

из этих 6 запросы:

1. сама HTML-страница
2. гнездо.ИО по JavaScript (180 КБ)
3. первый длинный запрос AJAX опроса
4. второй длинный опрос AJAX запрос
5. третий длинный запрос AJAX опроса
6. обновление соединения до WebSocket

скриншоты

результаты WebSocket, которые я получил на localhost:

гнездо.IO результаты, которые я получил на localhost:

Я собираюсь предоставить аргумент против использования сокета.Ио.

Я думаю, используя сокет.io только потому, что у него есть резервные копии, это не очень хорошая идея. Пусть IE8 RIP.

в прошлом было много случаев, когда новые версии NodeJS сломали сокет.Ио. Вы можете проверить эти списки для примеров... https://github.com/socketio/socket.io/issues?q=install + ошибка

Если вы идете разрабатывать приложение для Android или что-то, что должно работать с вашим существующее приложение, вы, вероятно, будет хорошо работать с WS сразу, сокет.Ио может доставить вам неприятности...

плюс модуль WS для узла.JS удивительно прост в использовании.

Использование Сокета.IO в основном похож на использование jQuery - вы хотите поддерживать старые браузеры, вам нужно писать меньше кода, и библиотека предоставит резервные копии. Розетка.io использует технологию websockets, если она доступна, а если нет, проверяет лучший доступный тип связи и использует его.

гнездо.IO использует WebSocket, а когда WebSocket недоступен, использует резервный algo для подключения в реальном времени.