Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 10 days ago

Commit

a5396a6

verified ·

1 Parent(s): 92a4fc5

Update app.py

Browse files

Files changed (1) hide show

app.py +211 -175

app.py CHANGED Viewed

@@ -1,243 +1,279 @@
 import asyncio
 import json
-from aiohttp import web
-import websockets
 import logging
 import time
-# Configure logging
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
-# In-memory storage
-symbol_data = {}
-# HTML Template with Plotly.js for rendering the Depth Chart
-HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Orderbook Depth Chart - {symbol}</title>
     <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
     <style>
-        body { margin: 0; padding: 0; background-color: #111; color: #eee; font-family: sans-serif; }
-        #chart { width: 100%; height: 100vh; }
-        .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
     </style>
 </head>
 <body>
-    <div id="loading" class="loading">Loading Orderbook Data for {symbol}...</div>
     <div id="chart"></div>
     <script>
-        const symbol = "{symbol_url}";
-        let firstRun = true;
-        async function fetchData() {
-            try {
-                const response = await fetch(`/${symbol}/json`);
-                const data = await response.json();
-                if (data.error || data.bids.x.length === 0) return;
-                document.getElementById('loading').style.display = 'none';
-                const traceBids = {
                     x: data.bids.x,
                     y: data.bids.y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
-                    name: 'Bids (Buy)',
-                    line: {color: '#00ff00', width: 2}
-                };
-                const traceAsks = {
                     x: data.asks.x,
                     y: data.asks.y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
-                    name: 'Asks (Sell)',
-                    line: {color: '#ff0000', width: 2}
-                };
-                const layout = {
-                    title: `Orderbook Depth: ${symbol.toUpperCase()} | Price: $${data.price}`,
-                    paper_bgcolor: '#111',
-                    plot_bgcolor: '#111',
-                    font: { color: '#eee' },
-                    xaxis: { title: 'Price', gridcolor: '#333' },
-                    yaxis: { title: 'Cumulative Volume', gridcolor: '#333' },
-                    showlegend: true,
-                    margin: { t: 40, b: 40, l: 60, r: 20 }
-                };
-                const config = { responsive: true };
-                if (firstRun) {
-                    Plotly.newPlot('chart', [traceBids, traceAsks], layout, config);
-                    firstRun = false;
-                } else {
-                    // Use react for efficient updates
-                    Plotly.react('chart', [traceBids, traceAsks], layout, config);
-                }
-            } catch (e) {
-                console.error("Error fetching data", e);
-            }
-        }
-        // Poll every 1 second
-        setInterval(fetchData, 1000);
-        fetchData();
     </script>
 </body>
 </html>
 """
-async def kraken_client(symbol):
-    """Background task to fetch data from Kraken and update memory."""
-    data = symbol_data[symbol]
-    B, A = data["B"], data["A"]
     while True:
         try:
-            logging.info(f"Connecting to Kraken WebSocket for {symbol}...")
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
-                logging.info(f"Connected to Kraken for {symbol}!")
-                # Subscribe to book and ticker
-                params_book = {"channel": "book", "symbol": [symbol], "depth": 500}
-                params_ticker = {"channel": "ticker", "symbol": [symbol]}
-                await ws.send(json.dumps({"method": "subscribe", "params": params_book}))
-                await ws.send(json.dumps({"method": "subscribe", "params": params_ticker}))
-                async for msg in ws:
-                    d = json.loads(msg)
-                    ch = d.get("channel")
-                    if d.get('event') == 'heartbeat':
-                        continue
-                    # Update Last Price
-                    if ch == "ticker":
-                        dat = d.get("data", [{}])[0]
-                        if 'last' in dat:
-                            data["lp"] = float(dat['last'])
                         continue
-                    # Update Orderbook
-                    if ch == "book":
-                        dat = d.get("data", [])
-                        for x in dat:
-                            # Process Bids
-                            for i in x.get('bids', []):
-                                p, q = float(i['price']), float(i['qty'])
-                                if q == 0: B.pop(p, None)
-                                else: B[p] = q
-                            # Process Asks
-                            for i in x.get('asks', []):
-                                p, q = float(i['price']), float(i['qty'])
-                                if q == 0: A.pop(p, None)
-                                else: A[p] = q
-                        data['last_update'] = time.time()
         except Exception as e:
-            logging.error(f"Kraken error for {symbol}: {e}. Reconnecting...")
-            await asyncio.sleep(5)
-async def page_handler(request):
     """Serve the HTML page."""
-    symbol_url = request.match_info['symbol'].lower()
-    if '-' not in symbol_url:
-        return web.Response(text="Invalid symbol. Use format: btc-usd", status=400)
-    # Convert url format (btc-usd) to Kraken format (BTC/USD)
-    parts = symbol_url.split('-')
-    symbol_kraken = f"{parts[0].upper()}/{parts[1].upper()}"
-    # Ensure background task is running
-    if symbol_kraken not in symbol_data:
-        symbol_data[symbol_kraken] = {
-            "B": {}, "A": {}, "lp": 0.0, "last_update": 0,
-            "task": asyncio.create_task(kraken_client(symbol_kraken))
-        }
-    html = HTML_TEMPLATE.format(symbol=symbol_kraken, symbol_url=symbol_url)
-    return web.Response(text=html, content_type='text/html')
-async def data_handler(request):
-    """API Endpoint: Returns processed JSON data for the chart."""
-    symbol_url = request.match_info['symbol'].lower()
-    parts = symbol_url.split('-')
-    symbol_kraken = f"{parts[0].upper()}/{parts[1].upper()}"
-    if symbol_kraken not in symbol_data:
-        return web.json_response({"error": "Data not initialized"}, status=404)
-    data = symbol_data[symbol_kraken]
-    B, A = data["B"], data["A"]
-    # Sort Bids (Descending) and Asks (Ascending)
-    sorted_bids = sorted(B.items(), key=lambda x: -x[0])
-    sorted_asks = sorted(A.items(), key=lambda x: x[0])
-    # Limit depth for the chart to keep it responsive (e.g., closest 200 points)
-    depth_limit = 300
-    sorted_bids = sorted_bids[:depth_limit]
-    sorted_asks = sorted_asks[:depth_limit]
-    # Calculate Cumulative Volume
-    bids_x, bids_y = [], []
-    cum_vol = 0
     for p, q in sorted_bids:
-        cum_vol += q
-        bids_x.append(p)
-        bids_y.append(cum_vol)
-    # Reverse bids so the line draws from left to right correctly in Plotly
-    bids_x.reverse()
-    bids_y.reverse()
-    asks_x, asks_y = [], []
-    cum_vol = 0
     for p, q in sorted_asks:
-        cum_vol += q
-        asks_x.append(p)
-        asks_y.append(cum_vol)
     return web.json_response({
-        "price": data["lp"],
-        "bids": {"x": bids_x, "y": bids_y},
-        "asks": {"x": asks_x, "y": asks_y}
     })
 async def main():
     app = web.Application()
-    # Route for the HTML page
-    app.router.add_get('/{symbol}', page_handler)
-    # Route for the JSON data (polled by the HTML page)
-    app.router.add_get('/{symbol}/json', data_handler)
     runner = web.AppRunner(app)
     await runner.setup()
-    site = web.TCPSite(runner, '0.0.0.0', 7860)
     await site.start()
-    print("=" * 60)
-    print("📈 Orderbook Depth Chart Server Running")
-    print("👉 Open in Browser: http://localhost:7860/btc-usd")
-    print("👉 Or:             http://localhost:7860/sol-usd")
-    print("=" * 60)
     await asyncio.Event().wait()
-if __name__ == '__main__':
     try:
         asyncio.run(main())
     except KeyboardInterrupt:
-        pass

 import asyncio
 import json
 import logging
 import time
+from aiohttp import web
+import websockets
+# --- Configuration ---
+SYMBOL_DISPLAY = "BTC-USD"
+SYMBOL_KRAKEN = "BTC/USD"
+PORT = 7860
+# --- Logging ---
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
+# --- In-Memory State ---
+# We store the orderbook in dictionaries: price -> quantity
+# This allows O(1) updates when Kraken sends changes.
+market_state = {
+    "bids": {},
+    "asks": {},
+    "price": 0.0,
+    "ready": False
+}
+# --- HTML Frontend (Plotly.js) ---
+HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
+    <title>BTC-USD Depth Chart</title>
     <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
     <style>
+        body {{ margin: 0; padding: 0; background-color: #0e0e0e; color: #ccc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }}
+        #chart {{ width: 100vw; height: 100vh; }}
+        #status {{ position: absolute; top: 10px; left: 60px; z-index: 10; font-size: 14px; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 4px; pointer-events: none;}}
+        .green {{ color: #00e676; }}
+        .red {{ color: #ff1744; }}
     </style>
 </head>
 <body>
+    <div id="status">Connecting...</div>
     <div id="chart"></div>
     <script>
+        const chartDiv = document.getElementById('chart');
+        const statusDiv = document.getElementById('status');
+        let initialized = false;
+        async function updateChart() {{
+            try {{
+                const res = await fetch('/data');
+                const data = await res.json();
+                if (data.error) {{
+                    statusDiv.innerHTML = "Waiting for data...";
+                    return;
+                }}
+                statusDiv.innerHTML = `Price: <span class="${{data.price >= data.prev_price ? 'green' : 'red'}}">$${{data.price.toLocaleString()}}</span> | Bids: ${{data.bids_count}} | Asks: ${{data.asks_count}}`;
+                const traceBids = {{
                     x: data.bids.x,
                     y: data.bids.y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
+                    name: 'Bids',
+                    line: {{color: '#00e676', width: 2}}
+                }};
+                const traceAsks = {{
                     x: data.asks.x,
                     y: data.asks.y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
+                    name: 'Asks',
+                    line: {{color: '#ff1744', width: 2}}
+                }};
+                const layout = {{
+                    title: '<b>BTC/USD Depth</b>',
+                    paper_bgcolor: '#0e0e0e',
+                    plot_bgcolor: '#0e0e0e',
+                    font: {{ color: '#aaa' }},
+                    showlegend: false,
+                    xaxis: {{
+                        title: 'Price (USD)',
+                        gridcolor: '#333',
+                        tickformat: '.0f'
+                    }},
+                    yaxis: {{
+                        title: 'Volume (BTC)',
+                        gridcolor: '#333'
+                    }},
+                    margin: {{ t: 40, b: 40, l: 50, r: 20 }},
+                    hovermode: 'x unified'
+                }};
+                const config = {{ responsive: true, displayModeBar: false }};
+                if (!initialized) {{
+                    Plotly.newPlot(chartDiv, [traceBids, traceAsks], layout, config);
+                    initialized = true;
+                }} else {{
+                    Plotly.react(chartDiv, [traceBids, traceAsks], layout, config);
+                }}
+            }} catch (e) {{
+                console.error("Fetch error:", e);
+                statusDiv.innerText = "Connection lost. Retrying...";
+            }}
+        }}
+        // Poll every 500ms
+        setInterval(updateChart, 500);
+        updateChart();
     </script>
 </body>
 </html>
 """
+async def kraken_worker():
+    """Connects to Kraken WS and maintains the orderbook in memory."""
+    global market_state
     while True:
         try:
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
+                logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
+                # Subscribe
+                msg = {
+                    "method": "subscribe",
+                    "params": {
+                        "channel": "book",
+                        "symbol": [SYMBOL_KRAKEN],
+                        "depth": 500
+                    }
+                }
+                await ws.send(json.dumps(msg))
+                # Also subscribe to ticker for the last traded price
+                msg_ticker = {
+                    "method": "subscribe",
+                    "params": {
+                        "channel": "ticker",
+                        "symbol": [SYMBOL_KRAKEN]
+                    }
+                }
+                await ws.send(json.dumps(msg_ticker))
+                async for message in ws:
+                    payload = json.loads(message)
+                    channel = payload.get("channel")
+                    data_entries = payload.get("data", [])
+                    if payload.get("type") == "error":
+                        logging.error(f"Kraken Error: {payload}")
                         continue
+                    if channel == "ticker":
+                        # Update Last Price
+                        for item in data_entries:
+                            if 'last' in item:
+                                market_state['price'] = float(item['last'])
+                    elif channel == "book":
+                        # Update Orderbook
+                        for item in data_entries:
+                            # Update Bids
+                            for bid in item.get('bids', []):
+                                price = float(bid['price'])
+                                qty = float(bid['qty'])
+                                if qty == 0:
+                                    market_state['bids'].pop(price, None)
+                                else:
+                                    market_state['bids'][price] = qty
+                            # Update Asks
+                            for ask in item.get('asks', []):
+                                price = float(ask['price'])
+                                qty = float(ask['qty'])
+                                if qty == 0:
+                                    market_state['asks'].pop(price, None)
+                                else:
+                                    market_state['asks'][price] = qty
+                        market_state['ready'] = True
         except Exception as e:
+            logging.warning(f"⚠️ Kraken Connection lost: {e}. Reconnecting in 3s...")
+            await asyncio.sleep(3)
+async def handle_index(request):
     """Serve the HTML page."""
+    return web.Response(text=HTML_PAGE, content_type='text/html')
+async def handle_data(request):
+    """Return the calculated cumulative volume arrays for Plotly."""
+    if not market_state['ready']:
+        return web.json_response({"error": "Initializing..."})
+    # Prepare data snapshots (Thread-safe enough for this use case due to GIL/asyncio)
+    bids = market_state['bids'].copy()
+    asks = market_state['asks'].copy()
+    current_price = market_state['price']
+    # Sort Bids: High -> Low
+    sorted_bids = sorted(bids.items(), key=lambda x: -x[0])
+    # Sort Asks: Low -> High
+    sorted_asks = sorted(asks.items(), key=lambda x: x[0])
+    # Slice to keep chart performant (e.g., closest 300 orders)
+    DEPTH = 400
+    sorted_bids = sorted_bids[:DEPTH]
+    sorted_asks = sorted_asks[:DEPTH]
+    # Calculate Cumulative Volume for Bids
+    b_x, b_y = [], []
+    cum = 0
     for p, q in sorted_bids:
+        cum += q
+        b_x.append(p)
+        b_y.append(cum)
+    # Reverse bids for the chart line to draw outwards from center
+    b_x.reverse()
+    b_y.reverse()
+    # Calculate Cumulative Volume for Asks
+    a_x, a_y = [], []
+    cum = 0
     for p, q in sorted_asks:
+        cum += q
+        a_x.append(p)
+        a_y.append(cum)
     return web.json_response({
+        "price": current_price,
+        "bids": {"x": b_x, "y": b_y},
+        "asks": {"x": a_x, "y": a_y},
+        "bids_count": len(bids),
+        "asks_count": len(asks)
     })
+async def start_background_tasks(app):
+    app['kraken_task'] = asyncio.create_task(kraken_worker())
+async def cleanup_background_tasks(app):
+    app['kraken_task'].cancel()
+    await app['kraken_task']
 async def main():
     app = web.Application()
+    app.router.add_get('/', handle_index)
+    app.router.add_get('/data', handle_data)
+    app.on_startup.append(start_background_tasks)
+    app.on_cleanup.append(cleanup_background_tasks)
     runner = web.AppRunner(app)
     await runner.setup()
+    site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
+    print("="*50)
+    print(f"🚀 BTC-USD Orderbook Chart Running")
+    print(f"👉 Open: http://localhost:{PORT}")
+    print("="*50)
+    # Keep alive
     await asyncio.Event().wait()
+if __name__ == "__main__":
     try:
         asyncio.run(main())
     except KeyboardInterrupt:
+        print("\nStopping server...")