Содержание
как работает и когда использовать
Существуют разные способы передачи данных от браузера или приложения к серверам и обратно.
Правила этих способов описаны в специальных протоколах. Некоторые применяют там, где нет необходимости обмениваться данными быстро, например на информационных сайтах, другие там, где важна скорость, в частности в интернете вещей.
Мы совместно с экспертами из компании Git in Sky решили рассказать об одной из таких технологий — протоколе передачи данных веб-сокет (WebSocket) — и объяснить принцип его работы и преимущества на простых примерах.
Чтобы понять, что такое протокол WebSocket, давайте посмотрим, каким был интернет до него
Раньше, чтобы получить новую информацию от сервера, клиент (браузер) должен был направить ему запрос, а сервер отправлял ответ. Без запроса не было ответа, то есть обновления страницы — сервер не мог ничего отправить сам. Например, пользователь получил сообщение или push-уведомление на сайте. Чтобы клиент об этом узнал, он должен опрашивать сервер с некоторой периодичностью, нет ли новых данных.
Другой вариант — клиент узнавал о новых данных только тогда, когда пользователь взаимодействовал с сайтом: переходил на другие страницы, вручную обновлял вкладку или открывал сайт заново. Как правило, использовался первый метод: клиент, к примеру, раз в 5 секунд отправлял запрос на сервер; если было что-то новое, сервер отдавал эту информацию в ответ.
В таком подходе были недостатки:
- Лишняя сетевая нагрузка. Клиент должен постоянно отправлять запросы на сервер, даже если новой информации нет.
- Накладные расходы на установление нового соединения при каждом запросе/ответе. При этом расходуется и какое-то время. Забегая вперед, отметим, что в WebSocket соединение устанавливается один раз и держится открытым, поэтому дополнительных накладных расходов нет.
- Низкая частота обновления данных. Клиент не может получить данные сразу, как только они появились на сервере. Новые данные поступают к клиенту только после того, как сервер получил запрос.
Если важно получить данные как можно скорее, то можно было обращаться к серверу чаще, например один раз в 0,5 секунды. Однако это приводило к дополнительной нагрузке на сеть и сервер, которым приходилось проводить и обрабатывать множество запросов.
Если важно получить данные как можно скорее, то можно было обращаться к серверу чаще, например один раз в 0,5 секунды. Однако это приводило к дополнительной нагрузке на сеть и сервер, которым приходилось проводить и обрабатывать множество запросов.Веб-сокеты же позволяют устанавливать постоянное соединение, и теперь сервер может сам отправить клиенту новые данные, не дожидаясь запроса. Эта интерактивность устраняет вышеперечисленные недостатки. Чтобы увидеть преимущества протокола WebSocket, посмотрим, как он работает, сравнив его с протоколом HTTP.
Как работает WebSocket и в чем его отличия от HTTP
Протокол HTTP однонаправленный. После цикла «запрос — ответ» соединение закрывается, а любой следующий запрос каждый раз устанавливает новое соединение с сервером: сколько запросов, столько и соединений. Процесс передачи данных происходит с некоторыми задержками за счет того, что есть накладные расходы на установку нового соединения при каждом запросе/ответе, а также сетевая и серверная нагрузка из-за обилия периодических запросов.
В чистом виде протокол HTTP сейчас используется все реже, ему на смену приходит HTTPS. Это не отдельный протокол, а надстройка над HTTP, позволяющая шифровать данные.
Протокол WebSocket двунаправленный, полнодуплексный, что означает, что он может одновременно и получать, и передавать информацию. Веб-сокет делает это множество раз в одном открытом соединении. У такого соединения и скорость выше, чем у HTTP.
У веб-сокетов также есть возможность шифровать передаваемые данные, для этого используется надстройка над протоколом — WSS. Если передаваемые данные не зашифрованы, они становятся объектом для привлечения таких угроз, как несанкционированный доступ к клиенту третьих сторон, использование вредоносного ПО. Специальные надстройки протоколов передачи данных кодируют информацию на стороне отправителя и раскодируют на стороне получателя, оставляя ее зашифрованной для любых посредников. Так достигается безопасный транспортный уровень.
Для наглядности покажем, в чем различия технологий HTTP и WebSocket, на примере их работы в чатах.
Чтобы пользователи могли получать новые сообщения, браузер периодически опрашивал сервер: есть ли новые сообщения для пользователя? Каждый такой запрос устанавливал новое соединение и создавал лишнюю сетевую нагрузку.
Что такое вебсокеты и как их создать?
Для передачи данных от клиента к серверу и обратно используются различные протоколы, правила которых описываются в соответствующих стандартах. В этой статье расскажем об одном из таких протоколов передачи данных — веб-сокетах.
Что такое веб-сокет?
Веб-сокеты — это передовая технология, при помощи которой вы можете создать соединение между клиентом и сервером (браузером и сервером), чтобы обеспечить обмен сообщениями в реальном времени. Главное отличие веб-сокетов заключается в том, что они позволяют получать данные без необходимости отправлять отдельный запрос, как, например, это происходит в HTTP. После установки соединения данные будут приходить сами, не требуя отправки запроса. В этом и есть преимущество использования веб-сокетов в тех же чатах и биржевых сводках, где нужно получать постоянно обновляемую информацию.
Протокол веб-сокет может одновременно и получать, и передавать информацию, так как является двунаправленным. Более того, веб-сокет может производить это множество раз в одном установленном соединении, что обеспечивает более высокую скорость передачи информации.
Как работают веб-сокеты?
Соединение между клиентом и сервером остается открытым, пока не будет остановлено одной из сторон или будет закрыто по таймауту. Для установления соединения между клиентом и сервером они производят “рукопожатие” (handshake). Установленное соединение остается открытым, а связь осуществляется с использованием одного и того же канала, пока соединение не будет прервано на стороне клиента или сервера. Обмен сообщениями при этом происходит двунаправленно. Веб-сокеты позволяют шифровать данные, которые передаются. Для этого применяется надстройка над протоколом WSS, которая кодирует данные на стороне отправителя и раскодирует их на стороне получателя. Для любых посредников информация остается зашифрованной.
Без шифрования данные становятся объектом для привлечения угроз.
Когда использовать веб-сокеты?
Веб-сокеты идеально подходят для случаев, когда необходимо обновление данных в режиме реального времени и возможность отправлять сообщения клиенту. Вот одни из наиболее популярных случаев, когда используются веб-сокеты:
- биржевые платформы;
- игровые приложения;
- чат-боты;
- push-уведомления;
- социальные сети;
- чат-приложения;
- IoT-приложения.
Почему стоит рассмотреть использование протокола веб-сокет?
Веб-сокеты обеспечивают обновления в реальном времени, устанавливая соединение между сервером и клиентом. Веб-сокеты совместимы с HTML5 и обеспечивают обратную совместимость со старыми html-версиями. Поэтому они поддерживаются всеми современными веб-браузерами — Google Chrome, Mozilla Firefox, Safari и другими. Веб-сокеты также совместимы с платформами: Android, iOS, веб-приложениями и десктоп-приложениями.
Один сервер может иметь несколько открытых соединений одновременно и даже иметь несколько соединений с одним и тем же клиентом, что позволяет легко масштабироваться.
Как создать веб-сокет в AppMaster.io?
Разберем создание веб-сокета в AppMaster.io на простом примере чат-бота. Для создания веб-сокета понадобится создать бизнес-процесс в бэкенде приложения: Backend > Business Processes), который будет реагировать на сообщения пользователя и отправлять ответы.
БП принимает сообщение и в зависимости от содержимого отдает в ответ строку.
- Если message = “Привет”, то результатом выполнения данного БП будет строка “Привет!”;
- Если message = “Как дела?”, то БП вернёт строку “Отлично! Как у тебя?”
- В любом другом случае БП будет работать как эхо и вернёт в ответе ту же строку, которую получил на входе.
Дальше нужно создать WebSocket Endpoint: Backend > Endpoints > New Endpoint > WebSocket Endpoint для данного БП, при подключении к которому мы будем общаться с ботом.
В новом окне необходимо заполнить следующие параметры эндпоинта:
- Endpoint Type: GET;
- Endpoint URL: адрес, по которому будет происходить обращение к эндпоинту извне;
- Business Process: указывается БП, который будет работать на данном WS Endpoint;
После настройки Endpoint, требуется опубликовать приложение (Publish).
Протестировать работоспособность WS Endpoint можно с помощью Postman. Подробную инструкцию для WebSockets в Postman читайте тут.
После авторизации в Postman нужно создать новый WebSocket запрос: New > WebSocket Request.
В новом окне требуется ввести полный адрес веб-сокета. Получить его можно в Swagger (Preview > Development), отправив пустой запрос к созданному Endpoint. Полный адрес можно найти в блоке Request URL.
Скопировав его и вставив в соответствующее поле в Postman, необходимо заменить https на wss, так как именно по данному протоколу происходит общение с сервером.
Соединение WebSocket требует авторизации. Для этого нужно отправить запрос с заголовком (Header) Cookie, в котором прописывается токен доступа gen_app_auth_token=. Чтобы получить токен, нужно обратиться за авторизацией, запустив эндпоинт авторизации и передав свой логин и пароль.
Вручную найти Cookie можно следующим образом:
- в опубликованном веб-приложении в браузере нажать F12, чтобы перейти в инструмент разработчика;
- перейти в Network и переключиться на вкладку Headers;
- в разделе Request Headers найти Cookie и скопировать значение.
Добавив значение Cookie в заголовок запроса (Headers) к WebSocket в Postman и нажав на Connect, можно убедиться, что подключение к WS было успешно установлено. Результат успешного подключения представлен ниже.
Отправить сообщение можно в блоке New Message, но оно должно быть обязательно JSON-formatted.
То есть, если требуется отправить строку “Привет”, то сообщение будет выглядеть следующим образом: {“message” : “Привет”}. При этом, название ключа (т.е. message в данном случае) должно совпадать с названием переменной на входе БП.
Результат выполнения запроса:
Вот так создается WebSocket в AppMaster.io. Ищите больше полезной информации о работе на платформе в нашем Help Center.
WebSocket API (WebSockets) — веб-API
WebSocket API — это передовая технология, позволяющая открывать сеанс двусторонней интерактивной связи между браузером пользователя и сервером. С помощью этого API вы можете отправлять сообщения на сервер и получать ответы, управляемые событиями, без необходимости запрашивать ответ у сервера.
Примечание: Хотя соединение WebSocket функционально несколько похоже на стандартные сокеты в стиле Unix, они не связаны между собой.
-
Веб-сокет Основной интерфейс для подключения к серверу WebSocket и последующей отправки и получения данных о соединении.
-
CloseEvent Событие, отправленное объектом WebSocket при закрытии соединения.
-
Событие сообщения Событие, отправляемое объектом WebSocket при получении сообщения от сервера.
- Написание клиентских приложений WebSocket
- Запись серверов WebSocket
- Написание сервера WebSocket на C#
- Написание сервера WebSocket на Java
- AsyncAPI: Спецификация для описания архитектур, управляемых событиями, на основе таких протоколов, как WebSocket. Вы можете использовать его для описания API-интерфейсов на основе WebSocket так же, как вы бы описали API-интерфейсы REST с помощью спецификации OpenAPI. Узнайте, почему вам следует рассмотреть возможность использования AsyncAPI с WebSocket и как это сделать.
- HumbleNet: кроссплатформенная сетевая библиотека, работающая в браузере. Он состоит из C-оболочки WebSockets и WebRTC, которая абстрагируется от межбраузерных различий, облегчая создание многопользовательских сетевых функций для игр и других приложений.
- µWebSockets: Высокомасштабируемый сервер WebSocket и реализация клиента для C++11 и Node.js.
- Socket.IO: сторонний протокол передачи на основе длинного опроса/WebSocket для Node.js.
- SocketCluster: среда публикации/подписки WebSocket для Node.js с упором на масштабируемость.
- WebSocket-Node: реализация API сервера WebSocket для Node.js.
- Total.js: платформа веб-приложений для Node.js (пример: чат WebSocket)
- Faye:
WebSocket(двустороннее соединение) и EventSource (одностороннее соединение) для сервера и клиента Node.js. - SignalR: SignalR будет скрыто использовать WebSockets, когда они доступны, и изящно отступать к другим методам и технологиям, когда это не так, в то время как код вашего приложения остается прежним.
- Caddy: веб-сервер, способный проксировать произвольные команды (stdin/stdout) как веб-сокет.
- ws: популярная клиентская и серверная библиотека WebSocket для Node. js.
- jsonrpc-bidirectional: асинхронный RPC, который при одном подключении может экспортировать функции на сервер и одновременно на клиент (клиент может вызывать сервер, сервер также может вызывать клиент).
- cowboy: Cowboy — это небольшой, быстрый и современный HTTP-сервер для Erlang/OTP с поддержкой WebSocket.
- WebSocket King: клиентский инструмент для разработки, тестирования и работы с серверами WebSocket.
- Сервер PHP WebSocket: сервер, написанный на PHP для обработки соединений через веб-сокеты wss:// или ws:// и обычные сокеты через ssl://, tcp://
- : библиотека Django, которая добавляет поддержку WebSockets (и других протоколов, требующих длительных асинхронных соединений).
- Flask-SocketIO: предоставляет приложениям Flask доступ к двунаправленной связи с малой задержкой между клиентами и сервером.
- Gorilla WebSocket: Gorilla WebSocket — это реализация Go протокола WebSocket.
js.Каналы
- АЯКС
- JavaScript
| Спецификация | |
|---|---|
| WebSockets Standard # the-websocket-interface |
Включите JavaScript для просмотра данных.
и т. д. и тело, содержащее фактическое сообщение, которое передается на сервер. Размер заголовков HTTP варьировался от 200 байт до 2 КБ, общий размер заголовка HTTP составляет 700-800 байт. Когда веб-приложение использует больше файлов cookie и других инструментов на стороне клиента, которые расширяют возможности хранения агента, оно уменьшает полезную нагрузку HTTP-заголовка. 
Когда соединение установлено и активно, связь осуществляется с использованием того же канала соединения, пока оно не будет прервано.
В WebSocket данные постоянно отправляются/передаются в одно и то же соединение, которое уже открыто, поэтому WebSocket работает быстрее и повышает производительность приложения. 
| Соединение WebSocket | Соединение HTTP |
|---|---|
WebSocket представляет собой двунаправленный протокол передачи данных с сервера на сервер или с сервера на сервер.
|