Розробка 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 стрічки сьогодні.