We’ll build a lightning‑fast quotes board that streams live bid/ask prices for FX, oil, gold, crypto, and the UK100 index — without hammering a REST API. The backend (Python + Flask‑SocketIO) connects to a market data WebSocket and pushes updates to the browser via Socket.IO. The frontend (HTML + JS) renders ticks in real time.
Series roadmap: Part 1 (this post): Stand up the streaming backend and a minimal UI to show live quotes. Part 2: Enrich the frontend — tick charts, spreads, connect/disconnect controls, and flashing price updates.
What you’ll build
A “Quotes Board” that:
Subscribes to multiple symbols (FX, UKOIL, XAUUSD, Crypto, UK100).
Streams low‑latency updates from a WebSocket feed.
Broadcasts each tick to connected browsers via Socket.IO.
Renders a simple table with bid/ask updating in place.
This class connects to the market data feed, subscribes to the requested symbols, handles reconnects, and forwards messages to the browser via Socket.IO.
# ---- configuration ---- def set_ws_key(self, api_key): """Set the TraderMade WebSocket API key""" self.api_key = api_key def set_symbols(self, symbols_string): """Set comma-separated symbols to subscribe to""" self.symbols = [s.strip() for s in symbols_string.split(',') if s.strip()]
# ---- streaming loop ---- async def connect_and_stream(self): """Connect to the WebSocket and stream ticks to Socket.IO""" if not self.api_key: raise ValueError("API Key not set. Use set_ws_key() first.") if not self.symbols: raise ValueError("No symbols set. Use set_symbols() first.") self.running = True while self.running: try: uri = f"wss://marketdata.tradermade.com/feedadv?api_key={self.api_key}" async with websockets.connect(uri) as websocket: self.websocket = websocket self.reconnect_attempts = 0 print("WebSocket connection established") # subscribe to symbols subscribe_msg = { "userKey": self.api_key, "symbol": ",".join(self.symbols) } await websocket.send(json.dumps(subscribe_msg)) # process messages while self.running: message = await websocket.recv() if not message.strip(): continue if message.strip().lower() == "connected": # initial confirmation message continue try: data = json.loads(message) except json.JSONDecodeError as e: print("JSON decode error:", e, "message:", message[:120]) continue self.process_message(data) except websockets.exceptions.ConnectionClosed: print("WebSocket connection closed") await self.handle_reconnect() except Exception as e: print(f"WebSocket error: {e}") await self.handle_reconnect()
Create a single instance we can use in our routes and events:
async def handle_reconnect(self): """Backoff and retry on connection errors""" if not self.running: return if self.reconnect_attempts < self.max_reconnect_attempts: self.reconnect_attempts += 1 delay = self.reconnect_delay * self.reconnect_attempts print(f"Reconnecting in {delay}s " f"({self.reconnect_attempts}/{self.max_reconnect_attempts})...") await asyncio.sleep(delay) else: print("Max reconnect attempts reached-check your network or API key.") self.running = False # ---- message handling ----
def process_message(self, data): """Store the latest tick and broadcast to clients""" if isinstance(data, dict) and 'symbol' in data: symbol = data['symbol'] latest_data[symbol] = data socketio.emit('market_update', data) # ---- lifecycle helpers ---- def disconnect(self): self.running = False print("Streaming stopped") def start_streaming(self): """Run the async loop in a background thread so Flask can serve clients""" def run(): loop = asyncio.new_event_loop() asyncio.set_event_loop(loop) loop.run_until_complete(self.connect_and_stream()) thread = threading.Thread(target=run, daemon=True) thread.start()
tm_stream = TraderMadeStream()
6) Routes & Socket.IO events
Serve index.html at /.
When a browser connects, kick off streaming (if not already running) and send an initial snapshot so the table fills immediately.
