Разработка T&S ленты для криптобирж под ключ

Однажды трейдер заметил, что после публикации макростатистики биржевой поток сделок резко ускорился — 30+ сделок в секунду на BTC/USDT. Стандартный React-интерфейс начал тормозить, пропуская до 40% обновлений. Клиент пришёл к нам с запросом на построение T&S, не теряющего ни одной сделки при пиковых нагрузках. Потери при таких пиках оборачиваются упущенной прибылью: трейдер не видит крупных продаж, опаздывает с входом, а slippage съедает существенную часть сделки. Экономия на slippage может достигать $5000 в месяц для активного трейдера.

Мы разрабатываем T&S-ленты под ключ для криптобирж и проп-трейдингов. 5+ лет опыта и 10+ проектов в crypto позволяют гарантировать стабильность даже при 1000 сделок/сек.

Почему T&S важен для рыночного анализа?

Time & Sales — это пульс рынка. В отличие от свечных графиков, где данные спрессованы в интервалы, T&S показывает каждую сделку: время, цена, объём, агрессивная сторона. Профессиональные трейдеры читают поток как индикатор скрытого давления: серия крупных покупок на уровне поддержки — сигнал к развороту.

Структура ленты сделок

interface Trade { id: string; timestamp: number; // unix milliseconds price: number; quantity: number; side: 'buy' | 'sell'; // агрессивная сторона value: number; // price * quantity в USD isLargeTrade: boolean; // выше порога значимого объёма } 

Каждая строка T&S содержит:

• Время: HH:MM:SS.mmm (с миллисекундами для профессиональных платформ)
• Цена: с выделением направления изменения
• Объём: в base asset
• Сторона: Buy (зелёный) / Sell (красный)

Какой бэкенд выдерживает 1000 сделок/сек?

Используем Go с кольцевым буфером для O(1) вставки и WebSocket-хабом для стриминга. Новый клиент сразу получает последние 100 сделок из буфера — без лага на заполнение. WebSocket API (см. MDN WebSocket API) обеспечивает двустороннюю связь с минимальным overhead.

type TimeAndSalesHub struct { trades chan Trade clients map[string]map[*WSClient]bool // pair -> clients mu sync.RWMutex recentBuf map[string]*RingBuffer // хранит последние N сделок для новых подключений } type RingBuffer struct { items []Trade head int size int mu sync.Mutex } func (rb *RingBuffer) Add(trade Trade) { rb.mu.Lock() defer rb.mu.Unlock() rb.items[rb.head%rb.size] = trade rb.head++ } func (rb *RingBuffer) GetAll() []Trade { rb.mu.Lock() defer rb.mu.Unlock() result := make([]Trade, 0, rb.size) start := rb.head - rb.size if start < 0 { start = 0 } for i := start; i < rb.head; i++ { result = append(result, rb.items[i%rb.size]) } return result } func (hub *TimeAndSalesHub) OnTrade(trade Trade) { hub.recentBuf[trade.Pair].Add(trade) hub.mu.RLock() defer hub.mu.RUnlock() data, _ := json.Marshal(trade) for client := range hub.clients[trade.Pair] { select { case client.send <- data: default: go client.close() } } } func (hub *TimeAndSalesHub) OnClientConnect(client *WSClient, pair string) { hub.mu.Lock() hub.clients[pair][client] = true hub.mu.Unlock() recent := hub.recentBuf[pair].GetAll() for _, trade := range recent { data, _ := json.Marshal(trade) client.send <- data } } 

Как добиться 60 FPS на фронтенде?

T&S обновляется очень часто — на BTC/USDT до 10–20 сделок в секунду в активные периоды. Стандартный React список будет тормозить. Прямое DOM manipulation без React re-render даёт 60 FPS при 200 строках.

import { useRef, useEffect, useCallback } from 'react'; const MAX_ROWS = 200; function TimeAndSalesList({ pair }: { pair: string }) { const containerRef = useRef<HTMLDivElement>(null); const tradesRef = useRef<Trade[]>([]); const wsRef = useRef<WebSocket | null>(null); const appendTrade = useCallback((trade: Trade) => { const container = containerRef.current; if (!container) return; const row = document.createElement('div'); row.className = `trade-row ${trade.side} ${trade.isLargeTrade ? 'large' : ''}`; const time = new Date(trade.timestamp); const timeStr = `${time.getHours().toString().padStart(2,'0')}:` + `${time.getMinutes().toString().padStart(2,'0')}:` + `${time.getSeconds().toString().padStart(2,'0')}`; row.innerHTML = ` <span class="time">${timeStr}</span> <span class="price">${formatPrice(trade.price)}</span> <span class="qty">${formatQuantity(trade.quantity)}</span> <span class="value">$${formatVolume(trade.value)}</span> `; container.insertBefore(row, container.firstChild); while (container.children.length > MAX_ROWS) { container.removeChild(container.lastChild!); } if (trade.isLargeTrade) { row.classList.add('flash'); setTimeout(() => row.classList.remove('flash'), 500); } }, []); useEffect(() => { wsRef.current = new WebSocket(`wss://api.exchange.com/ws`); wsRef.current.send(JSON.stringify({ op: 'subscribe', channel: `trades.${pair}` })); wsRef.current.onmessage = (e) => { const trade = JSON.parse(e.data); appendTrade(trade); }; return () => wsRef.current?.close(); }, [pair, appendTrade]); return ( <div className="time-and-sales"> <div className="ts-header"> <span>Time</span> <span>Price</span> <span>Size</span> <span>Value</span> </div> <div ref={containerRef} className="ts-body" /> </div> ); } 

Прямое DOM manipulation лучше React Virtualized в 2 раза по FPS при 200 строках — это критично при пиковых нагрузках.

Как настроить фильтры для крупных сделок?

Для фокуса на значимых событиях настраиваем фильтры по минимальному объёму, стороне и порогу крупных блоков. Крупные сделки подсвечиваются иконкой и flash-анимацией, чтобы трейдер не пропустил их в потоке. В коде это реализуется CSS-классами с transition.

Как работает агрегация по времени?

Для менее плотных рынков — объединение сделок за короткий интервал (100–500 мс) снижает частоту обновлений без потери информации. Ниже — пример агрегатора на TypeScript:

class TradeAggregator { private buffer: Trade[] = []; private flushInterval: number = 100; private onFlush: (aggregated: AggregatedTrade[]) => void; add(trade: Trade) { this.buffer.push(trade); } private flush() { if (this.buffer.length === 0) return; const groups = new Map<string, AggregatedTrade>(); for (const trade of this.buffer) { const key = `${trade.price}:${trade.side}`; const existing = groups.get(key); if (existing) { existing.quantity += trade.quantity; existing.value += trade.value; existing.count++; } else { groups.set(key, { ...trade, count: 1 }); } } this.onFlush([...groups.values()].sort((a, b) => b.timestamp - a.timestamp)); this.buffer = []; } } 

Статистика потока сделок

Рядом с лентой показываем агрегированную статистику за последние 10 секунд: объём покупок/продаж, дельту, процентное соотношение. Это помогает быстро оценить баланс сил без переключения на другие виджеты.

Процесс работы над T&S-лентой

1. Аналитика — обсуждаем источники данных, протоколы WebSocket, требования к производительности.
2. Проектирование — создаём схему бэкенда с ring buffer, определяем формат сообщений, фиксируем фильтры.
3. Реализация — пишем код на Go и TypeScript, настраиваем прямой DOM manipulation, интегрируем WebSocket.
4. Тестирование — нагрузочное тестирование до 1000 сделок/сек, проверка zero-loss, тесты на просадки.
5. Деплой — разворачиваем на ваших серверах или в облаке, документируем API.

Ориентировочные сроки: базовая лента готова за 3–4 недели. Стоимость рассчитывается индивидуально — свяжитесь с нами для оценки.

Что входит в разработку

Заказ разработки

Оценим ваш проект бесплатно — пришлите требования на почту или в Telegram. Получите T&S-ленту под ключ за 3–4 недели с гарантией стабильности. Свяжитесь с нами для консультации и закажите разработку T&S-ленты сегодня.