Как работать c Websocket в js?

При приеме на работу дали такое тестовое задание задние:

(Ориентировочное время выполнения 4-8 часов

Разработать SPA приложение по заданию ниже.
В качестве фреймворка предпочтительнее использовать vue.js. Но также рассматриваем кандидатов с выполненным заданием на react или angular.
В качестве сборщика предпочтительнее использовать Webpack.

--- ПРИЛОЖЕНИЕ и ЯДРО ---

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

Далее необходимо разработать мини-ядро, которое будет грузиться вместе с родительским приложенияем и иметь api для загрузки дополнительных плагинов. Ядро должно быть доступно из кода каждой страницы родительского приложения.

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

Вторым плагином ядра будет плагин, реализующий SDK для взимодействия с биржей binance (только 2 метода: получить биржевой стакан по определенному символу по REST и подписаться на обновления стакана по WS). (См. раздел Diff. Depth Stream в документации: https://github.com/binance-exchange/binance-offici...).

--- GUI КОМПОНЕНТЫ ---

В приложении на первой странице расположить компонент, который при помощи плагина ядра "SDK" забирает состояние стакана по определенному символу с биржи binance (можно применить limit=500, чтобы не тянуть стакан на всю глубину), подключается на обновления данных по ws для этого символа (по умолчанию берется по BTCUSDT) и отрисовывает стакан в подобном формате

|----------|----------|----------||----------|----------|----------|
|--Amount--|--Price---|--Total---||--Amount--|--Price---|--Total---|
|----------|----------|----------||----------|----------|----------|
| ... | ... | ... || ... | ... | ... |

Где левые три колонки относятся к ордерам тиба Bid, правые к ордерам типа Ask.
Price и Amount (Quantity) получаются из binance. Total рассчитывается на клиенте как Price * Amount.

Для верстки желательно использовать правила именования по БЭМу.
Цвета и отступы можно использовать на свой вкус.

Верстка должа быть резиновая и адаптивная для мобилки и десктопа. Breakpoint можно выбрать самостоятельно.
В мобильной версии отображать только колонки с Price и Amount.

Таблица должна помещаться по вертикали на странице (без скрола на страница) и должна содержать свой скрол-бар.
Скролл в таблице должен появляться по ховеру на таблицу, сама таблица и ее контент должны оставаться на месте при этом.
Внешний вид скроллбара не принципиален. Таблица скроллится внутри, шапка остаётся на месте.
Полоса скролл бара начинается под шапкой. При скролле значения в таблице не должны наезжать на шапку.

Компонент должен уметь:
* читать сообщение об изменении читаемого символа из плагина "шина данных". При изменении символа компонент должен очищать свое содержимое по предыдущему символу и загрузить данные по новому.
* транслировать в шину данных в виде сообщений все примененные diff-изменения.

На второй странице расположить компонент, сожержащий в себе:
* DropDown перечнем символов. Их можно зашить статически BTCUSDT, BNBBTC и ETHBTC
* Cписочный элемент

DropDown при изменении выбранного элемента отправляет в шину данных событие об изменении активного символа.
Cписочный элемент читает шину данных и отображает информацию о каждом diff-изменении в новой строке.

Дополнительное задание (если успеваете):
* Релизовать SSR для приложения

Всё, что покажется в задании непонятным или неоднозначным к трактовке, делайте на свое усмотрение, соблюдая здоровый рационализм.
Главное - это общий полученный результат. Если возникнет непреодолимое по вашему мнению препятствие, пиши свой(и) вопрос(ы) нам. По завершении нам нужна ссылка выложенного тестового на GitHub Pages и ссылка на код.)

В итоге я застрял. У меня опыт с vue небольшой. Js нормально знаю, но с websocket не работал. С шиной и компонентами я еще разберусь, а вот с остальным вряд ли. Может кто-нибудь делал что-то подобное или видел пример. Буду признателен, если подскажете
  • Вопрос задан
  • 507 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
https://socket.io/docs/client-api/

https://github.com/binance-exchange/binance-offici...

судя по всему, для начала можно потыкаться в wss://stream.binance.com:9443 и посмотреть что бинанс будет отвечать

а что такое паттерн "шина данных", как-то вообще ничего не находится про такое, кроме гитхаба с готовым этим заданием лол https://github.com/anatolyukropov/BuildTestTask
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы