Building a Live Scoreboard with a Sports Data API (Vanilla JS + WebSocket)

#javascript #webdev #tutorial #api

In this tutorial we'll build a working live scoreboard — the kind you'd embed on a sports site or a fan-engagement app — using Orbistats as the data source. We'll cover the initial fixture fetch, the WebSocket connection for live updates, and basic UI rendering. No framework required; this works as a drop-in you can adapt into React/Vue later if you want. What We're Building A scoreboard that: Loads today's fixtures on page load (REST) Connects to a live feed and updates scores in real time (WebSocket) Shows a pulsing "LIVE" badge on in-progress matches Falls back gracefully if the socket drops Step 1: Get an API Key (or Skip This Entirely) You can test everything in this tutorial without signing up at all, using Orbistats' public sandbox — pick an endpoint, run it, see the JSON. When you're ready to wire it into a real app, grab a free-tier key from the pricing page (150 requests/day, all endpoints, no card required). Step 2: Fetch Today's Fixtures javascript const API_KEY = "YOUR_API_KEY"; const BASE_URL = "<a href="https://api.orbistats.com/v1">https://api.orbistats.com/v1</a>"; async function getFixtures() { const res = await fetch(<code>${BASE_URL}/football/fixtures?date=today</code>, { headers: { Authorization: <code>Bearer ${API_KEY}</code>, }, }); if (!res.ok) { throw new Error(<code>Fixtures request failed: ${res.status}</code>); } return res.json(); } Response shape follows the standard pattern documented on the Sports Data API page — same structure you'd get for basketball or any other sport, just swap the path segment. Step 3: Render the Initial Board javascript function renderScoreboard(fixtures) { const container = document.getElementById("scoreboard"); container.innerHTML = ""; fixtures.forEach((match) => { const card = document.createElement("div"); card.className = "match-card"; card.dataset.matchId = match.id; card.innerHTML = <code> <div class="teams"> ${match.home.name} ${match.home.score ?? "-"} : ${match.away.score ?? "-"} ${match.away.name} </div> <div class="status ${match.status === "live" ? "live" : ""}"> ${match.status === "live" ?</code>🔴 LIVE ${match.minute}'<code>: match.status} </div> </code>; container.appendChild(card); }); } Step 4: Connect to the Live Feed This is the part that separates a real scoreboard from a static page that refreshes every 30 seconds. Instead of polling, we open a persistent WebSocket connection: javascript function connectLiveFeed(onUpdate) { const ws = new WebSocket(<code>wss://api.orbistats.com/v1/live?token=${API_KEY}</code>); ws.onopen = () => console.log("Live feed connected"); ws.onmessage = (event) => { const update = JSON.parse(event.data); onUpdate(update); }; ws.onerror = (err) => console.error("WebSocket error:", err); ws.onclose = () => { console.warn("Live feed disconnected, retrying in 3s..."); setTimeout(() => connectLiveFeed(onUpdate), 3000); }; return ws; } That onclose retry is easy to forget but matters a lot in production — sockets drop on tab backgrounding, network hiccups, and server restarts, and a scoreboard that silently goes stale is worse than one that never went live at all. Step 5: Wire the Update Handler javascript function handleLiveUpdate(update) { const card = document.querySelector(<code>[data-match-id="${update.match_id}"]</code>); if (!card) return; const scoreEl = card.querySelector(".score"); scoreEl.textContent = <code>${update.home.score} : ${update.away.score}</code>; const statusEl = card.querySelector(".status"); if (update.status === "live") { statusEl.className = "status live"; statusEl.textContent = <code>🔴 LIVE ${update.minute}'</code>; } else if (update.status === "finished") { statusEl.className = "status"; statusEl.textContent = "FT"; } } The payload here follows the shape documented on the Live Scores API page — match_id, status, minute, and per-team score, which is exactly what we need to patch the DOM without re-rendering the whole board. Step 6: Put It Together javascript async function initScoreboard() { const fixtures = await getFixtures(); renderScoreboard(fixtures); connectLiveFeed(handleLiveUpdate); } initScoreboard(); Step 7: Basic CSS css .match-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 8px; background: #12151c; color: #f5f5f5; margin-bottom: 8px; font-family: system-ui, sans-serif; } .teams { display: flex; justify-content: space-between; align-items: center; font-weight: 600; } .score { font-size: 1.2rem; color: #ff7a00; } .status { font-size: 0.85rem; color: #999; } .status.live { color: #ff4444; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } What to Add Next A few directions worth taking this further: Fallback to polling if WebSocket isn't available in the environment — check the Webhooks API as an alternative delivery method if you'd rather receive server-side push events instead of holding a client-side socket open. Odds column — if you want to show live betting lines alongside scores, the Odds API returns normalized odds you can slot into another column on each card. Multi-sport support — since the schema is consistent across sports, swapping /football/ for /basketball/ in Steps 2 and 4 is close to the entire change needed. Skip building the UI at all — if you just need something embeddable fast, Orbistats also ships pre-built widgets that do this out of the box. Full endpoint reference and more language examples (Python, PHP, Go, etc.) are in the API reference and SDK examples if you want to port this to a backend service instead of client-side JS.

Top comments (1)

Khawaja Khurram (MAK) • Sep 20

Nice work done, looking forward to work on project like this where you get live data and manipulate it :)