JavaScript WebSocket: описание, принцип работы, применение

WebSockets (WS) – взаимосвязь сервера и клиента для получения информации со стороны сервера без необходимости предварительно запрашивать клиентскую часть, получая так называемое PUSH-уведомление. Идеальная схема взаимодействия JavaScript WebSocket выглядит так, чтобы в серверной части был один поток, который обрабатывает информацию, например, прослушивает изменения БД или события, запускаемые другими процессами, для одновременной отправки информации всем клиентам без использования ресурсов. Клиент WebSocket в JS и HTML5 с использованием интерфейса WS, предоставляется большинством современных браузеров: IE 10 +, Chrome 16+, Firefox 11+, Safari 6+.

Определение WebSockets

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

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

Основные особенности JavaScript WebSocket следующие:

1. Протокол стандартизирован, что означает возможность с помощью организовать связь между веб-серверами и клиентами в режиме реального времени.
2. Веб-сокеты превращаются в кроссплатформенный стандарт для связи в реальном времени между клиентом и сервером.
3. Стандарт допускает новый вид приложений.
4. С помощью этой технологии предприятия, работающие в режиме реального времени, могут ускорить работу.

Самое большое преимущество JavaScript WebSocket — это двусторонняя связь (полный дуплекс) по одному TCP-соединению. HTTP имеет свой собственный набор схем, таких как http и https. Протокол веб-сокета также имеет аналогичную схему, определенную в его шаблоне URL. Последняя спецификация протокола WS определяется, как RFC 6455 - предлагаемый стандарт. RFC 6455 поддерживается различными браузерами, такими как Internet Explorer, Mozilla Firefox, Google Chrome.

Дуплексная связь

Прежде чем перейти к необходимости применения веб-сокетов, необходимо взглянуть на существующие методы, которые используются для дуплексной связи client Java WebSocket. Они заключаются в следующем:

• голосование;
• длинный опрос;
• streaming;
• постбэк и AJAX;
• HTML5.

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

Длинный опрос, как следует из названия, включает в себя похожую технику опроса. Клиент и сервер поддерживают соединение активным, пока не будут получены некоторые данные или не истечет время ожидания. Если соединение потеряно по каким-либо причинам, client Java WebSocket может начать процедуру заново и выполнить последовательный запрос. Длинный опрос — не что иное, как улучшение производительности по сравнению с процессом опроса, но постоянные запросы могут замедлять процесс.

Варианты Streaming и AJAX

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

Это сокращенная форма асинхронного Javascript и XML. Объект XmlHttpRequest позволяет выполнять Javascript без перезагрузки всей веб-страницы. AJAX отправляет и получает только часть веб-страницы. Основными недостатками AJAX по сравнению с вебсокетами JavaScript являются:

1. Отправляют заголовки HTTP, что увеличивает общий размер.
2. Связь полудуплексная.
3. Веб-сервер потребляет больше ресурсов.

HTML5 - это надежная структура для разработки и проектирования веб-приложений. Основными столпами являются API-интерфейсы разметки, CSS3 и Javascript.

Функциональные возможности

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

Важность WS для разработчиков и архитекторов:

1. Независимый протокол на основе TCP, предназначен для поддержки любого другого протокола, который традиционно работает только поверх чистого TCP-соединения.
2. Транспортный уровень, поверх которого может работать любой другой протокол.

Websocket API поддерживает возможность определения субпротоколов — библиотек протоколов, которые могут интерпретировать определенные их типы. Примеры таких протоколов включают XMPP, STOMP и AMQP. Разработчикам больше не нужно думать над типом соединения с точки зрения парадигмы HTTP «запрос-ответ».

Единственное требование на стороне браузера — это запуск библиотеки JavaScript, которая может интерпретировать рукопожатие WS, устанавливать и поддерживать соединение. На стороне сервера промышленным стандартом является использование существующих библиотек протоколов, которые работают поверх TCP и используют шлюз.

Функциональные возможности веб-сокетов:

1. Соединения через WebSocket инициируются через HTTP.
2. HTTP-серверы обычно интерпретируют рукопожатия WS как запрос на обновление.
3. Веб-сокеты могут быть дополнением к существующей среде HTTP и могут предоставить необходимую инфраструктуру для добавления веб-функциональности. Они опираются на более совершенные полнодуплексные протоколы, которые позволяют передавать данные в обоих направлениях между клиентом client JavaScript WebSocket и сервером.

Реализация клиента в JavaScript

Исходный код JavaScript файла с именем wsclient.js включают в страницу HTML5, чтобы он мог открыть соединение WebSocket. Сценарий содержит код для создания клиента WS с использованием его интерфейса.

Простая страница HTML5 используется для создания формы подключения к конечной точке сервера и обмена сообщениями. HTML-страница использует wsclient.js скрипт, чтобы запустить HTML-файл, открыть его в браузере, например, в Google Chrome, выбрав «Файл» -> «Открыть».

Простой сервер может быть легко реализован на Java. Он просто возвращает сообщение, полученное от клиента, в верхнем регистре:

1. Открывают wsclient form.html в веб-браузере, и вводят необходимые параметры подключения WebSocket, а затем нажимают кнопку «Подключиться». Если соединение было установлено успешно, кнопка будет отключена, а кнопка «Отключить» будет включена.
2. Водят сообщение в поле «Текст сообщения», и нажимают кнопку «Отправить». Сервер отобразит его заглавными буквами, а клиент JavaScript покажет в текстовой области.
3. "Инструменты разработчика" Google Chrome являются хорошим инструментом для изучения соединений WebSocket. В окне "Инструменты разработчика" переходят на вкладку "Сеть" и выбирают WS, чтобы просмотреть список всех подключений для текущей страницы.
4. Нажимают на вкладку «Заголовок», чтобы просмотреть значения запроса и ответа.
5. На вкладке Frames перечислены все исходящие и входящие сообщения. Первое сообщение — это то, что было отправлено от клиента на сервер, а второе сообщение — эхо-сигнал сервера заглавными буквами.
6. Timing вкладка показывает, как долго соединение было открыто.
7. Консоли используются, чтобы посмотреть на текущий экземпляр WS, что находится в пределах области действия HTML страницы.
8. Вводят имя переменной WebSocket JavaScript, WS и консоль напечатает JSON-представление объекта.
9. ReadyState. Свойство объекта отображает состояние соединения. Значение 1 означает, что оно открыто, и готово к приему и отправке сообщений. Его можно использовать для проверки соединения WS перед попыткой передать данные. Если соединение закрыто, может быть реализована логика его повторного автоматического подключения.
10. Wireshark — это очень всеобъемлющий и полезный инструмент для мониторинга трафика в сети. Его можно бесплатно загрузить с официального сайта. После установки запускают его и выбирают сетевой интерфейс для захвата трафика.
11. Чтобы просмотреть только трафик WS, вводят websocket в поле фильтра. Нажимают на фрейм, чтобы просмотреть содержимое, включая фактическую полезную нагрузку сообщения. Прокручивают вниз до Line-based text data узла и разворачивают его.
12. Нажимают правой кнопкой мыши сжатую полезную нагрузку и выбирают «Показать байты пакета». В диалоговом окне выбирают «Сжатый» в раскрывающемся списке «Декодировать», чтобы просмотреть полезную нагрузку в виде простого текста.

Настройка Java WebSocket spring

Spring-boot-starter-websocket — предоставляет полезные значения по умолчанию для WS. Прежде всего, настраивают брокер сообщений STOMP. В нем WebSocketConfig.Java определяют конечную точку STOMP брокера сообщений и конечную точку приложения websocket.@Configuration — класс конфигурации Spring.

EnableWebSocketMessageBroker — включает обработку сообщений, поддерживаемую брокером. Здесь используют STOMP в качестве брокера сообщений.

Метод ConfigureMessageBroker () позволяет простому посреднику на основе памяти передавать сообщения клиенту по адресатам с префиксами «/topic» и «/queue». Он также обозначает префикс «/app» для тех, что связаны с аннулированными методами @Message Mapping в классе контроллера. Этот префикс будет использоваться для определения всех отображений сообщений. Например, «/app/message» — это конечная точка, для которой сопоставлен метод WebSocket Controller.processMessage From Client ().

Аналогично, RegisterStompEndpoints () включает поддержку STOMP и регистрирует конечные точки stomp в «/приветствии». При этом все сообщения веб-сокета JavaScript будут направляться через STOMP, что также добавляет дополнительный уровень безопасности к конечной точке веб-сокета. При создании соединения WS из javascript используют только эту конкретную конечную точку Stomp.

В приведенной ниже конфигурации, чтобы включить поддержку SockJs для предоставления опционального обратного действия, необходимо внести следующие изменения: registry.addEndpoint («/ приветствие») .withSockJS ().

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

Обработка ошибок

Как только между клиентом и сервером установлено соединение, из экземпляра WS запускается событие Open. Ошибки, которые имеют место быть во время общения, генерируются. Это определяется с помощью события OnError. Возникновение ошибки всегда сопровождается разрывом соединения.

OnError — событие вызывается, когда что-то не так происходит между коммуникациями. За ошибкой события следует завершение соединения. Рекомендуется всегда информировать пользователя о непредвиденных ошибках, и пытаться снова подключить соединение.

Когда дело доходит до обработки ошибок, нужно учитывать как внутренние, так и внешние параметры:

1. Внутренние параметры включают ошибки, которые могут быть сгенерированы из-за ошибок в коде или неожиданного поведения пользователя.
2. Внешние ошибки не имеют ничего общего с приложением, скорее, они связаны с параметрами, которыми нельзя управлять. Наиболее важным из них является подключение к сети.
3. Любое интерактивное двунаправленное веб-приложение требует активного подключения к интернету.

Проверка доступности сети

В современных настольных и мобильных приложениях обычной задачей является проверка доступности сети. Наиболее распространенный способ для WebSocket php JavaScript — выполнить HTTP-запрос к веб-сайту, который должен быть активирован, например, google.com. Если запрос выполняется успешно, настольное или мобильное устройство сообщает, что существует активное соединение. Аналогично в HTML есть XMLHttpRequest для определения доступности сети.

HTML5 же сделал этот процесс еще проще, и представил способ проверить, может ли браузер принимать веб-ответы. Это достигается с помощью навигатора объекта.

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

Testing Java WebSocket использует простой WS-client. Как только соединение установлено, отправляют данные на сервер и распечатывают полученный ответ: import websocket.

События OnOpen, OnClose и OnMessage

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

Сервер WebSocket работает аналогично клиентам. Он реагирует на события и, при необходимости, выполняет действия. Независимо от используемого языка программирования, каждый сервер WebSocket выполняет определенные процедуры. Он инициализируется по адресу веб-сокета, обрабатывает события OnOpen, OnClose и OnMessage, а также отправляет сообщения клиентам. Существует четыре основных события Websocket API:

• открыто;
• сообщение;
• закрыто;
• ошибка.

Каждое из событий обрабатывается посредством реализации таких функций, как OnOpen, OnMessage , OnClose и OnError соответственно. Это также может быть реализовано с помощью метода addEventListener.

Экземпляр веб-сокетов в Java

Каждому серверу WS требуется действительный хост и порт. Пример создания экземпляра Websocket на сервере: var server = new WebSocketServer(«ws://localhost:8181»).

Любой действительный URL может использоваться со спецификацией порта, который ранее не использовался. Очень полезно вести учет подключенных клиентов, так как он накапливает и сохраняет различные данные или отправляет разные сообщения каждому из них.

Fleck представляет входящие соединения (клиенты) с интерфейсом IwebSocketConnection. Всякий раз, когда кто-то подключается или отключается от сервиса, можно создать или обновить пустой список: var clients = new List ().

После этого вызывают метод Start, и дожидаются подключения клиентов. После запуска сервер может принимать входящие соединения. В Fleck методу Start нужен параметр, который указывает сокет, вызвавший события: server.Start(socket) =>{});

Для того чтобы реализовать сервер WebSocket в C#, нужно использовать внешнюю библиотеку. Для получения того же результата на Java, используются преимущества технологии, включенной в стандартную библиотеку с использованием пакета javax.websocket, начиная с Java EE 7.

Создают проект Java WebSocket client на основе Java EE 7 с помощью одной из бесплатных онлайн-сред IDE, например, Eclipse и NetBeans. В NetBeans создают новое веб-приложение и обязательно используют GlassFish в качестве сервера (версия 4.0). Если пользователь предпочитает использовать Eclipse, ему придется выбрать Tomcat 8. Таким образом, определяют пакет, который можно назвать MyServer, и внутри него создают класс WebSocket Server. Код для реализации сервера вполне читабелен, и его поведение легко понять.

Преимущества веб-сокета

WS решает несколько проблем с REST или HTTP. HTTP — это однонаправленный протокол, в котором клиент всегда инициирует запрос. Сервер обрабатывает и возвращает ответ, а затем клиент использует его. Websocket — это двунаправленный протокол, в котором нет предопределенных шаблонов сообщений, таких как запрос/ответ. Либо клиент, либо сервер может отправить сообщение другой стороне.

HTTP позволяет сообщению запроса перейти от клиента к серверу, а затем он отправляет ответ. В определенный момент времени клиент общается с сервером или наоборот. Как правило, новое соединение TCP инициируется для HTTP-запроса и прекращается после получения ответа. Необходимо установить новое TCP-соединение для другого HTTP-запроса / ответа.

Для WS HTTP-соединение обновляется с использованием стандартного механизма обновления. Клиент и сервер обмениваются данными через одно и то же TCP-соединение в пределах жизненного цикла соединения WS.

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

WS — это протокол с отслеживанием состояния, тогда как HTTP — это протокол без сохранения состояния.

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

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