Найти тему
Wissance

Тестируем WebSocket на раз два.

Оглавление

О том как же протестировать WebSockets ...

Смотри как без особых проблем тестировать приложения с WebSocket интерфейсом
Смотри как без особых проблем тестировать приложения с WebSocket интерфейсом

Сегодня используя Web сервисы и сайты мы привыкли к тому, что даже самый тривиальный интернет магазин может использовать чат для связи с менеджером и уточнения деталей заказа в режиме реального времени. Все это, конечно, было возможно и до появления WebSocket-протокола (Далее просто WS), например, технология Comet, но c WS это стало в разы проще. В этой статье мы рассмотрим вкратце особенности протокола и перейдем к более интересному вопросу, а как это протестировать. Дорогой читатель, мы будем благодарны тебе если ты:

  • подпишешься на нас в Yandex Zen
  • подпишешься на наш Youtube-канал (в конце будет ссылка на видео, которое показывает как пользоваться нашим инструментом).
  • поставишь звездочку нашему приложению по тестированию интерфейсов с Web Socket
  • или все вышеперечисленное.

Поехали!

Отличия WebSocket от классического Request-Response

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

Периодический опрос Сервера для проверки готовности ресурса
Периодический опрос Сервера для проверки готовности ресурса

Если рассматривать приложение чата, то клиент вынужден опрашивать периодически сервер для проверки пришли ли новые сообщения или нет. Такой подход создает лишний сетевой трафик и дополнительную нагрузку как на клиентском приложении, так и на сервере. Для того, чтобы не строить такого монстра логично использовать уведомления от сервера когда что-то поменялось (пришли новые сообщения). Для этого сервер должен знать куда отправить, поэтому классический HTTP не годится, а используется протокол WebSocket. В WebSocket устанавливается постоянное двустороннее соединение, который на сервере представлен открытым сетевым соединением (сокетом), в которое в любое время можно отправить данные, что в итоге многое упрощает и хорошо влияет на быстродействие.

Инструменты для работы (тестирования)

Немаловажный вопрос а как протестировать взаимодействие, т.к. WebSocket предусматривает наличие открытого соединения. Кроме того, как правило, разработка фронтэнд и бэкэнд частей приложения выполняется отдельно, а иногда и вовсе отдельными командами в разных репозиториях. Т.е. в моей практике возникали задачи: подготовить веб сокет интерфейс и протестировать его. Подготовить-то я подготовил, а тестировать как? При этом хотелось иметь достаточно универсальный инструмент, через который можно тестировать любой другой бэкэнд.

Так вот на самом деле, возможно, что я плохо искал, но таких инструментов либо крайне мало, либо их нет. Пишут, что последние версии Postman позволяют тестировать WebSocket. Но с Postman также есть несколько проблем:

1. Postman дурной и все коллекции запросов хранит где-то у себя на сервере, а при обновлении я как-то потерял все коллекции сохраненных запросов.

2. Postman запускается только в одном окне, я не тестировал WebSocket от Postman и точно не знаю позволит ли он по вебсокету подсоединиться более чем в одно соединение.

3. Postman громоздкий и тяжеловесный.

Исходя из всего вышеперечисленного, а также, что на моент поиска решения в Postman не было поддержки WebSocket мы (Wissance) решили, что стоит подготовить легковесное решение для тестирования - wstester (наше опэнсорс приложение).

Wstester - наш инструмент для тестирования Websocket

Когда мы проектировали было принято решение использовать JavaScript , а сам интерфейс построить на html, чтобы модифицировать решение было максимально просто и легко.

Из ключевых особенностей:

  • отсуствие необходимости использовать сборщики, которые вызывают проблемы - npm и т.п.
  • отсутствие сложных библиотек и зависимостей, используется только jQuery и то от jQuery можно отказаться
  • отсутсвие громоздких библиотек для разметки и стилистики, таких как Bootstrap, весь интерфейс создан с использованием одного css-файла Pure
  • такая банальная вещь как подстановка протокола WebSocket'ов - ws://
  • достаточно простой интерфейс

А вот и сам интерфейс (для тестирования открываем в браузере файл tester.html):

Все достаточно просто: данные шлем, данные получаем
Все достаточно просто: данные шлем, данные получаем

Для тех, кто хочет посмотреть наше видео (дорогой друг, подпишись на наш канал и поставь лайк видео) с краткой теорией и процессом тестирования :

Заключение

В целом в приложении есть проблемы, но связаны они исключительно с интерфейсом и нехваткой некоторых функций (таких как сохранение запросов и т.п.), но при налчиии достаточного интереса к проекту (30 звезд и более на github мы готовы потратить свое время и продолжить его развивать). Спасибо, что дочитали и удачи!