Это вторая запись в блоге из серии Упрощенные веб-сокеты. Если вы не читали первую часть, посмотрите ее здесь. Важно, чтобы вы прошли первую часть, чтобы лучше понять эту. Опять же, цель состоит в том, чтобы все было как можно проще. Так что я подойду к этой теме немного по-другому. Давайте начнем.

В предыдущем посте мы успешно создали наш базовый сервер и клиент WebSocket, и он работает. Итак, вам может быть интересно, зачем использовать socket.io? Зачем использовать сильно раздутую библиотеку, если без нее все работает нормально? Давайте рассмотрим этот сценарий:

Предположим, ваш начальник говорит вам добавить на веб-сайт общение в реальном времени, и вы решили использовать собственный WebSocket, а не какую-либо библиотеку вообще.
Вы правильно написали код WebSockets, и в основном он работает нормально ИСКЛЮЧАЯ тестирование показывает, что есть некоторые проблемы.

После некоторой отладки вы обнаружили, что он не работает, когда человек находится за брандмауэром или антивирусом.

WebSocket не работает идеально при наличии брандмауэра и антивируса.

Вы также обнаружили, что если клиент находится за прокси-сервером или балансировщиком нагрузки, WebSocket не будет работать.

WebSocket не работает идеально при наличии Proxy и Load Balancer.

Значит, вам придется решать все эти вопросы самостоятельно. Вы поработали несколько часов и добавили дополнительный код для решения всех этих проблем, и ваше соединение WebSocket, наконец, работает правильно. Посмотрите наглядное представление того, что мы сделали до сих пор:

Теперь предположим, что сервер по какой-то причине отключился, и соединение прервалось. В этой ситуации браузер теперь идеально сидит и ничего не делает, потому что для установления соединения снова требуется подтверждение связи. Итак, у вас есть еще одно дело:

Веб-сокеты должны автоматически повторно подключаться в случае отключения из-за сбоя сервера или по какой-либо другой причине.

Итак, теперь вы добавили больше кода и решили эту проблему. Довольно хорошо, вы очень хороший разработчик.

Ваш босс оценил ваши усилия, но теперь он говорит вам добавить поддержку изображений (капли).

Примечание. До сих пор мы отправляли данные JSON (простой текст).

Мало того, вам нужно добавить чат для групповых чатов, несколько конечных точек, чтобы вы могли подключать несколько веб-сокетов. Кроме того, могут быть некоторые старые браузеры, которые просто не поддерживают WebSockets, поэтому вам тоже придется позаботиться об этом.

Кажется, сейчас это много, не так ли?

Приложив еще немного кода и усердно поработав, вы тоже справились с этим. Теперь ваша реализация WebSocket выглядит примерно так:

Угадайте что, вся эта коллекция на самом деле то, что вы называете Socket.IO. Посмотрите изображение ниже, чтобы прояснить ситуацию.

Socket.io незаметно использует WebSockets и решает все эти проблемы, чтобы нам не приходилось решать их самостоятельно. Это просто оболочка над собственным WebSocket, которая предоставляет множество других интересных функций, которые упрощают нашу работу как разработчика.

Обзор socket.io

Socket.IO - это библиотека JavaScript для веб-приложений в реальном времени. Он обеспечивает двустороннюю связь в реальном времени между веб-клиентами и серверами.

Socket.IO в основном использует протокол WebSocket с опросом в качестве запасного варианта, предоставляя тот же интерфейс. Хотя его можно использовать как просто оболочку для WebSockets, он предоставляет гораздо больше функций, включая широковещательную рассылку для нескольких сокеты, хранение данных, связанных с каждым клиентом, и асинхронный ввод-вывод.

Примечание. Прочтите это еще раз и уделите особое внимание тексту, выделенному жирным шрифтом. Мы говорили именно об этом в разделе «Почему». Теперь это имеет смысл, верно?

Мы узнаем об основных функциях Socket.IO в третьей части этой серии. Давайте быстро конвертируем наши клиентские и серверные файлы WebSocket (созданные в первой части) для использования Socket.IO.

Как?

Я предполагаю, что вы прочитали первую часть и знаете, как работают собственные WebSockets. Давайте быстро обновим это до Socket.io.

Прокомментированный код - это использование WebSocket. Я добавил его для сравнения.

Сервер

Объяснение

  1. Вместо импорта websocket from ‘ws’ мы импортируем socketio from ‘socket.io’ библиотеку.
  2. Создание сервера и передача его socketio вместо websocket.
  3. Вместо send теперь используется функция emit для объекта io. Единственная разница в том, что мы добавили название события в качестве первого аргумента. Мы будем использовать это название события, чтобы получить сообщение на стороне клиента.
  4. Метод «on» по-прежнему работает так же, с той лишь разницей, что добавлено название события. Достаточно просто?

Клиент

Объяснение

  1. Импорт библиотеки «socket.io», поскольку она не предусмотрена JavaScript «из коробки». Это откроет пространство имен «io».
  2. Предоставление URL-адреса для подключения io. (Мы не используем новую клавиатуру, в отличие от использования WebSocket, потому что это необязательно. Вам решать, хотите вы ее использовать или нет.)
  3. Снова «send» заменен на «emit», и мы добавили имя события (проверьте строку 21 серверной части).
  4. Метод «on» остается тем же самым с добавлением имени события (проверьте строку 20 серверной части). Имеет смысл?

Ваше здоровье! Мы создали наши простые сервер и клиент Socket.IO.

Я старался, чтобы все было как можно проще. Мы более подробно рассмотрим Socket.IO в третьей части этой серии. Сообщите мне, было ли это полезно.
Шад

Ссылка

Первоначально опубликовано на https://iamshadmirza.hashnode.dev.