Первоначально я создал свое приложение SaaS, используя ws на моем сервере Node и нативную реализацию веб-сокетов на моем интерфейсе React. Я сделал это, потому что у меня был предыдущий опыт работы с нативной реализацией в стартапе, и поэтому я подумал, что будет быстрее использовать то, что мне наиболее удобно. Нативная реализация работала отлично, но проблема в том, что буквально каждый пример, который я мог найти в Интернете, использует socket.io. Реальность такова, что socket.io по-прежнему чрезвычайно популярен, и практически каждый онлайн-проект webRTC с открытым исходным кодом использует socket.io. Вместо того, чтобы создавать все с нуля, я решил построить этот отличный репозиторий с открытым исходным кодом, который использует socket.io для ускорения времени разработки. Кроме того, у socket.io есть несколько преимуществ, таких как отличная документация, большое сообщество, сердцебиение для проверки целостности соединения и встроенные методы, которые могут ускорить разработку, если вам нужно создавать комнаты и отправлять сообщения в подключенные клиенты.

Перенос моего приложения был не слишком сложным, единственная проблема, с которой я столкнулся, заключалась в том, что мое приложение снова работало локально, но не работало в продакшене. Мне пришлось выполнить некоторые настройки, чтобы заставить его работать в производственной среде, что включало редактирование моей конфигурации Nginx.

На стороне сервера это было очень просто настроить. Вот моя новая настройка сокета на сервере:

OLD WS INITIALIZATION 
const wss = new WebSocket.Server({ port: WS_PORT }, () => {
  console.log(`Listening on PORT ${WS_PORT} for websockets`)
})
NEW SOCKET.IO INITIALIZATION
const io = new Server(WS_PORT, {
/* options */
cors: {
  origin: '*',
  },
})

На стороне клиента вот моя основная логика, которая происходит в ловушке useEffect. Уникальность socket.io заключается в том, что сначала он устанавливает соединение с помощью длинного опроса HTTP, а затем обновляет его до соединения через веб-сокет. Из документов вот как это работает более подробно. Так что на самом деле я не мог заставить его работать так, поэтому я добавил возможность использовать ТОЛЬКО веб-сокеты и не использовать длинный опрос HTTP. Вот почему в коде вы видите {transports: [‘websocket’]}.

Последнее, что мне нужно было сделать, это изменить конфигурацию Nginx, поскольку я запускаю свой сервер на AWS EC2. Вот мой обновленный серверный блок Nginx.

В целом переключение с ws на socket io довольно просто. Socket.io, очевидно, добавляет больше накладных расходов, но у него потрясающая документация и поддержка сообщества. Кроме того, socket.io легче масштабировать по горизонтали, чем ванильные веб-сокеты, и в нем есть несколько встроенных методов, которые упрощают широковещательную передачу сообщений каждому подключенному клиенту. При этом есть явные недостатки. Для более подробного сравнения ознакомьтесь с этим прекрасным постом в блоге. Что касается моего проекта, я надеюсь, что использование socket.io продолжит ускорять разработку. Надеюсь, вы нашли эту статью полезной. Если да, то хлопайте :)