CryptoScope: real-time курсы криптовалют с нескольких бирж

Для CryptoScope собрали real-time агрегацию курсов с нескольких криптобирж: WebSocket-подключения, единый формат данных и фронт, который не проседает при обновлениях каждую секунду.

Задача звучала коротко: показывать актуальные курсы и давать сравнивать спреды между площадками. На практике в таких системах быстро всплывают два слоя проблем. Первый — данные приходят из разных источников и их нельзя напрямую положить в одну таблицу. Второй — даже если поток уже собран, интерфейс начинает страдать от слишком частых обновлений.

Было: данные есть, сравнения нет

До сборки общей схемы каждая биржа фактически жила отдельно. У площадок свои форматы сообщений, свои названия полей, свои правила обновления значений. Для человека это выглядит как «курс BTC есть и там, и там». Для кода — как несколько разных контрактов данных, которые нужно привести к одному виду.

А CryptoScope нужен был не как набор виджетов по биржам. Главная ценность — сравнительный анализ спредов между площадками. Значит, данные должны быть сопоставимыми: один формат инструмента, цены, времени обновления и источника.

Поэтому первым шагом сделали слой нормализации. Всё, что приходит из WebSocket-подключений к биржам, приводится к единой структуре. Дальше приложение уже работает не с «сообщением биржи A» или «сообщением биржи B», а с внутренним форматом CryptoScope.

Так проще считать разницу между площадками и проще расширять список источников: новая биржа добавляет адаптер, а не меняет всю логику анализа.

Поток в реальном времени

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

Поток устроили так:

• подключаемся к источникам курсов;
• принимаем обновления в реальном времени;
• приводим сообщения к единому формату;
• передаём нормализованные данные дальше для отображения и сравнения спредов.

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

Живая деталь проекта: самым спорным местом оказался не сам WebSocket, а то, как часто отдавать изменения в UI. Хотелось показывать рынок максимально свежим, но фронт не должен перерисовывать всё подряд только потому, что пришёл очередной пакет данных.

Как удержали UI от просадок

На фронте использовали три вещи: виртуализацию, debounce и мемоизацию.

Виртуализация нужна, чтобы не держать в DOM все строки, если пользователь видит только часть списка. Это снижает нагрузку на отрисовку и помогает таблице оставаться отзывчивой.

Debounce сглаживает частые обновления. Данные могут приходить регулярно, но интерфейсу не всегда нужно реагировать на каждое микрособытие отдельной перерисовкой. В случае CryptoScope важен баланс: не потерять ощущение real-time и не превратить экран в генератор лишних render-циклов.

Мемоизация закрывает ещё один источник лишней работы: повторные вычисления и перерисовки там, где входные данные для конкретного компонента не изменились. Для таблиц с курсами это особенно заметно, потому что часть значений обновляется, а часть остаётся прежней.

В результате фронт получает секундные обновления, но не пытается каждый раз пересобрать весь экран. Меняются только те части, которым действительно пришли новые данные.

Стало: единый поток для анализа спредов

После изменений CryptoScope работает как общая прослойка между несколькими биржами и интерфейсом анализа:

• курсы приходят по WebSocket в реальном времени;
• обновления доходят до фронта каждую секунду;
• данные нормализуются в единый формат;
• интерфейс использует виртуализацию, debounce и мемоизацию;
• пользователь сравнивает спреды между площадками в одном представлении.

Главный результат — мы отделили хаос внешних источников от внутренней модели продукта. Биржи могут присылать данные по-разному, но внутри CryptoScope остаётся один понятный формат, с которым уже можно строить сравнение курсов и спредов.