Веб-сокеты — современная технология, которая используется  для создания современных веб-приложений реального времени. В блоге студии web-разработки YuSMP Group рассказали подробнее о том, что такое WebSockets и как их используют на React.

Что представляет из себя веб-сокет

REST был бесспорным чемпионом веб-API. Он сверг старый SOAP и его многословный XML в пользу JSON поверх HTTP. REST также имел довольно сложную концептуальную модель, основанную на ресурсах и глаголах.

Но REST не идеально подходил для решения всех проблем, связанных с веб-коммуникациями. Разработчики из кожи вон лезли и пытались вписать все требования к связи и обмену данными в шаблон RESTful.

В настоящее время современные группы разработчиков программного обеспечения, как правило, развивают взаимодействие своих веб-служб с помощью WebSockets, GraphQL, gRPC и HTTP/2 по традиционному шаблону RESTful.

WebSockets protocol — это протоколы связи на основе соединений, которые поддерживают полнодуплексную связь в реальном времени.

Каждый современный веб-браузер поддерживает websockets java, и каждый популярный язык бэкенда имеет серверные библиотеки websocket wss либо в виде сторонних модулей, либо в виде стандартных библиотечных модулей. 

Давайте посмотрим на следующую схему и поймем, как формируется полнодуплексный канал связи websocket client-server:

Как показано на приведенной выше диаграмме, клиент сначала пытается инициализировать соединение WebSocket с сервером, отправляя HTTP-запрос.

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

Websockets vs HTTP

До появления веб-сокетов вы могли выполнять операции HTTP-запрос-ответ только в веб-браузере.

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

HTTP/HTTPS - в чем разница между этими протоколами

Во-первых, адрес сайта будет выглядеть иначе: для HTTP — http://, а для HTTPS, соответственно, — https://. Еще HTTPS - это защищенное соединение: для него нужен подписанный SSL-сертификат, соединение требует проверки домена, а также протокол шифрует данные. Для HTTP ничего из этого не нужно, он передает данные через порт 80, в то время как HTTPS использует порт 443.

Чем полезны веб-сокеты

Websocket js действительно полезны, когда сервер хочет передать много данных и/или часто обновлять браузер (например, многопользовательские игры или чаты). Традиционный шаблон RESTful представляет собой синхронный механизм, основанный на запросе и ответе, и не подходит для полнодуплексных сценариев реального времени. С WebSockets все эти проблемы устранены — сервер находится под контролем и точно знает, сколько клиентов подключено в каждый момент времени.

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

Базовая настройка для React Native Websocket

Пример с проекта: было необходимо отправлять пинг на сервер каждые 30 секунд, чтобы сообщить серверу, что приложение все еще находится в сети, а также отслеживать пользователя, вошедшего в приложение, и продолжительность его пребывания в сети. Требовалось постоянно общаться с сервером, а использование REST API для этого было бы неэффективным.

В приведенном выше фрагменте WebSocket назван Main Component.

Прежде всего, мы создаем новый экземпляр WebSocket как свойство класса ws. Затем в componentDidMount методе мы можем подписаться и прослушивать некоторые события, предоставляемые нам WebSocket.

• onopen: прослушиватель событий onopen вызывается при установлении соединения WebSocket.
• onmessage: событие onmessage отправляется при получении данных с сервера.
• onclose: прослушиватель onclose вызывается при закрытии соединения WebSocket.

Итак, все это настроено в componentDidMount, потому что мы хотим, чтобы эти прослушиватели событий были доступны, когда компонент отображается в DOM. Кроме того, мы можем передать экземпляр WebSocket в качестве реквизита дочернему компоненту, как мы это делали в <ChildComponent/>. Чтобы мы могли прослушивать любое событие в этом экземпляре WebSocket без необходимости создавать новый экземпляр в каждом компоненте, в котором нам нужно использовать этот WebSocket.

Но есть проблема с этой настройкой, когда возникает ошибка или соединение WebSocket закрывается по какой-то причине, например, сервер не работает или проблемы с сетью и т. д. Соединение не будет восстановлено до тех пор, пока вы не вызовите componentDidMount снова, возможно, через обновление этой страницы . 

Что важно запомнить

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

Доверьте техническую сторону вашего проекта профессионалам. Веб-услуги и разработка в YuSMP Group - это открытость, прозрачность и высокое качество. Кейсы YuSMP Group подтверждают высокую экспертизу команды. Мы всегда открыты, прислушиваемся к клиентам и создаем продукты, которые приносят бизнесам пользу. Оставили контакты для связи. Напишите нам, чтобы получить бесплатную консультацию и примерный расчет бюджета.