Labs

Realtime Crypto Dashboard

Live BTC, ETH, and SOL price streaming via Binance WebSocket API. Demonstrates high-frequency UI updates, canvas-based data visualization, and WebSocket architecture with auto-reconnect.

WebSocketCanvas 2DRAF AnimationReact RefsAuto-reconnectZero-rerender ChartTime Buckets

realtime-chart.tsx

live

BTC / USDT1 min window

debug//ws stream

disconnected

endpointwss://stream.binance.com

streamsbtc / eth / sol @trade

msg/sec—

latency—

total msg—

performance notes

›Chart renders via Canvas 2D — no React re-renders
›Timestamped price ticks stored in useRef
›Aggregated into 80 time-buckets per frame
›X axis = time → smooth scroll, no index-jump
›State updates throttled to ~5 fps for price cards
›WebSocket singleton shared, auto-reconnects on drop

architecture

CryptoSocketService

src/services/cryptoSocket.ts

·Singleton WebSocket manager
·Exponential back-off reconnect
·Parses Binance trade stream events
·Tracks MPS & latency stats

useCryptoTicker()

src/hooks/use-crypto-ticker.ts

·Subscribes to socket service
·Rolling history buffer in useRef
·Throttled state → price-card UI
·Dirty flags for chart RAF loop

CryptoChart

src/components/labs/crypto-chart.tsx

·Canvas 2D rendering
·requestAnimationFrame loop
·Reads from history ref directly
·Zero React state — zero re-renders

Live data from Binance WebSocket API — public stream, no API key required.