class OrderBookManager {
    private bids: Map<number, number> = new Map();
    private asks: Map<number, number> = new Map();
    private lastUpdateId: number = 0;
    private buffer: OrderBookDiff[] = [];

    async initialize(symbol: string) {
        const ws = this.connectToStream(`${symbol.toLowerCase()}@depth`);
        const snapshot = await fetchOrderBookSnapshot(symbol, 1000);
        this.lastUpdateId = snapshot.lastUpdateId;
        this.bids = new Map(snapshot.bids.map(([p, q]) => [+p, +q]));
        this.asks = new Map(snapshot.asks.map(([p, q]) => [+p, +q]));
        for (const diff of this.buffer) {
            if (diff.U <= this.lastUpdateId + 1 && diff.u >= this.lastUpdateId + 1) {
                this.applyDiff(diff);
            }
        }
        this.buffer = [];
    }

    applyDiff(diff: OrderBookDiff) {
        if (diff.U !== this.lastUpdateId + 1) {
            console.error('Gap detected, reinitializing...');
            this.initialize(this.symbol);
            return;
        }
        for (const [price, qty] of diff.b) {
            if (+qty === 0) this.bids.delete(+price);
            else this.bids.set(+price, +qty);
        }
        for (const [price, qty] of diff.a) {
            if (+qty === 0) this.asks.delete(+price);
            else this.asks.set(+price, +qty);
        }
        this.lastUpdateId = diff.u;
        this.notifySubscribers();
    }

    getTopLevels(depth: number = 20) {
        const sortedBids = [...this.bids.entries()]
            .sort(([a], [b]) => b - a)
            .slice(0, depth);
        const sortedAsks = [...this.asks.entries()]
            .sort(([a], [b]) => a - b)
            .slice(0, depth);
        return { bids: sortedBids, asks: sortedAsks };
    }
}

שלבים ליישום פנקס ההזמנות:

1. טעינת הסנאפשוט הראשוני דרך REST.
2. התחברות לזרם WebSocket.
3. אגירת דיפים נכנסים.
4. החלת דיפים לאחר הסנאפשוט, תוך בדיקת רצף.
5. רינדור רק רמות גלויות באמצעות וירטואליזציה.

לתצוגה, אנו משתמשים בווירטואליזציה דרך @tanstack/react-virtual כדי לרנדר רק שורות גלויות. זה מאפשר טיפול ב-500+ רמות ללא פגיעה בביצועים. גישת העדכונים הדיפרנציאליים שלנו מהירה פי 3 מטעינה מלאה כל 100 אלפיות השנייה, ואגירה מבטיחה עקביות גם במהלך הפרעות רשת זמניות.

גרפים: TradingView Lightweight Charts מול חלופות

לגרפי נרות אנו משתמשים ב-Lightweight Charts. ספרייה זו מהירה פי 2 מ-Chart.js ברינדור נרות ומספקת תמיכה מובנית בנתונים פיננסיים. השוואה:

דוגמת הגדרה:

import { createChart, CandlestickSeries } from 'lightweight-charts';

function TradingChart({ symbol }: { symbol: string }) {
  const chartContainerRef = useRef<HTMLDivElement>(null);
  const seriesRef = useRef<CandlestickSeries>();

  useEffect(() => {
    const chart = createChart(chartContainerRef.current!, {
      width: chartContainerRef.current!.clientWidth,
      height: 400,
      layout: {
        background: { color: '#1a1a2e' },
        textColor: '#d1d4dc',
      },
      grid: {
        vertLines: { color: '#2d2d4e' },
        horzLines: { color: '#2d2d4e' },
      },
      crosshair: { mode: 1 },
      timeScale: {
        borderColor: '#485c7b',
        timeVisible: true,
      },
    });

    const candleSeries = chart.addCandlestickSeries({
      upColor: '#26a69a',
      downColor: '#ef5350',
      borderUpColor: '#26a69a',
      borderDownColor: '#ef5350',
    });

    seriesRef.current = candleSeries;

    loadHistoricalData(symbol, '1h').then((candles) => {
      candleSeries.setData(candles);
      chart.timeScale().fitContent();
    });

    const unsubscribe = wsGateway.subscribe(`candle:${symbol}:1h`, (candle) => {
      candleSeries.update(candle);
    });

    return () => {
      unsubscribe();
      chart.remove();
    };
  }, [symbol]);

  return <div ref={chartContainerRef} className="chart-container" />;
}

export function useWebSocket(url: string) {
  const wsRef = useRef<WebSocket | null>(null);
  const reconnectTimerRef = useRef<NodeJS.Timeout>();
  const reconnectCountRef = useRef(0);

  const connect = useCallback(() => {
    wsRef.current = new WebSocket(url);
    wsRef.current.onclose = (e) => {
      if (!e.wasClean) {
        const delay = Math.min(1000 * 2 ** reconnectCountRef.current++, 30000);
        reconnectTimerRef.current = setTimeout(connect, delay);
      } else {
        reconnectCountRef.current = 0;
      }
    };
    wsRef.current.onerror = () => wsRef.current?.close();
  }, [url]);

  useEffect(() => {
    connect();
    return () => {
      clearTimeout(reconnectTimerRef.current);
      wsRef.current?.close();
    };
  }, [connect]);

  return wsRef;
}