How to Build a Live Cricket Scores App Using an API

User Browser or Mobile App
          |
          v
Your Application Backend
          |
          +-- REST requests for fixtures and current state
          |
          +-- WebSocket connection for live match events
          |
          +-- Cache or database for shared match state
          |
          v
     Cricket API

GET https://api.example.com/v1/cricket/matches/live

Authorization: Bearer YOUR_API_KEY
Accept: application/json

{
  "data": [
    {
      "match_id": "match_84219",
      "competition": {
        "id": "competition_91",
        "name": "Example T20 League"
      },
      "status": "live",
      "format": "T20",
      "teams": {
        "home": {
          "id": "team_18",
          "name": "Team A"
        },
        "away": {
          "id": "team_29",
          "name": "Team B"
        }
      },
      "current_innings": {
        "number": 2,
        "score": 148,
        "wickets": 4,
        "overs": "16.2",
        "target": 181
      },
      "updated_at": "2026-08-04T10:15:21Z"
    }
  ]
}

const API_BASE_URL = 'https://api.example.com/v1';
const API_KEY = process.env.CRICKET_API_KEY;

async function getLiveMatches() {
  const response = await fetch(
    `${API_BASE_URL}/cricket/matches/live`,
    {
      headers: {
        Authorization: `Bearer ${API_KEY}`,
        Accept: 'application/json'
      },
      signal: AbortSignal.timeout(15000)
    }
  );

  if (!response.ok) {
    throw new Error(
      `Cricket API request failed with status ${response.status}`
    );
  }

  const payload = await response.json();

  return payload.data;
}

import os
import requests

API_BASE_URL = "https://api.example.com/v1"
API_KEY = os.environ["CRICKET_API_KEY"]


def get_live_matches():
    response = requests.get(
        f"{API_BASE_URL}/cricket/matches/live",
        headers={
            "Authorization": f"Bearer {API_KEY}",
            "Accept": "application/json",
        },
        timeout=15,
    )

    response.raise_for_status()
    return response.json().get("data", [])

<?php

function getLiveMatches(): array
{
    $apiKey = getenv('CRICKET_API_KEY');

    if (!$apiKey) {
        throw new RuntimeException('Missing CRICKET_API_KEY');
    }

    $ch = curl_init(
        'https://api.example.com/v1/cricket/matches/live'
    );

    curl_setopt_array($ch, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER => [
            'Authorization: Bearer ' . $apiKey,
            'Accept: application/json',
        ],
        CURLOPT_CONNECTTIMEOUT => 5,
        CURLOPT_TIMEOUT => 15,
    ]);

    $body = curl_exec($ch);

    if ($body === false) {
        $error = curl_error($ch);
        curl_close($ch);

        throw new RuntimeException($error);
    }

    $status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($status < 200 || $status >= 300) {
        throw new RuntimeException(
            'Cricket API returned HTTP ' . $status
        );
    }

    $payload = json_decode(
        $body,
        true,
        512,
        JSON_THROW_ON_ERROR
    );

    return $payload['data'] ?? [];
}

import WebSocket from 'ws';

const socket = new WebSocket(
  'wss://stream.example.com/v1/cricket',
  {
    headers: {
      Authorization: `Bearer ${process.env.CRICKET_API_KEY}`
    }
  }
);

socket.on('open', () => {
  socket.send(
    JSON.stringify({
      action: 'subscribe',
      match_ids: ['match_84219']
    })
  );
});

socket.on('message', async rawMessage => {
  const event = JSON.parse(rawMessage.toString());

  if (!event.event_id || !event.match_id) {
    return;
  }

  const alreadyProcessed = await eventStore.exists(
    event.event_id
  );

  if (alreadyProcessed) {
    return;
  }

  await applyMatchEvent(event);
  await eventStore.save(event.event_id);
  await broadcastToUsers(event.match_id, event);
});

socket.on('close', scheduleReconnect);

<div id="live-match" aria-live="polite">
  <p id="match-status">Loading match...</p>
  <h2 id="teams"></h2>
  <p id="score"></p>
  <p id="match-context"></p>
  <small id="updated-at"></small>
</div>

<script>
async function loadMatch(matchId) {
  const response = await fetch(`/api/live-matches/${matchId}`);

  if (!response.ok) {
    throw new Error('Unable to load the match');
  }

  const match = await response.json();

  document.querySelector('#match-status').textContent =
    match.statusLabel;

  document.querySelector('#teams').textContent =
    `${match.homeTeam.name} vs ${match.awayTeam.name}`;

  document.querySelector('#score').textContent =
    `${match.score.runs}/${match.score.wickets} ` +
    `(${match.score.overs} overs)`;

  document.querySelector('#match-context').textContent =
    match.score.target
      ? `Target: ${match.score.target}`
      : '';

  document.querySelector('#updated-at').textContent =
    `Updated ${new Date(match.lastUpdated).toLocaleTimeString()}`;
}
</script>

async function fetchWithRetry(url, options, attempts = 3) {
  let lastError;

  for (let attempt = 1; attempt <= attempts; attempt += 1) {
    try {
      const response = await fetch(url, {
        ...options,
        signal: AbortSignal.timeout(15000)
      });

      if (response.status === 429) {
        const retryAfter = Number(
          response.headers.get('retry-after') || 2
        );

        await wait(retryAfter * 1000);
        continue;
      }

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }

      return await response.json();
    } catch (error) {
      lastError = error;

      if (attempt < attempts) {
        await wait(attempt * 1000);
      }
    }
  }

  throw lastError;
}

function wait(milliseconds) {
  return new Promise(resolve => {
    setTimeout(resolve, milliseconds);
  });
}