Live Events & Scores

npm install socket.io-client

yarn add socket.io-client

// For Raw JS — include via CDN:
// <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
// For frameworks:
import { io } from "socket.io-client";

let socket = null;

export function tennisApiLiveSocketConn() {
  if (!socket) {
    socket = io(YOUR_SOCKET_URL, {
      auth: { apiKey: YOUR_API_KEY },
      transports: ["websocket"],
      reconnection: true,
      autoConnect: true,
    });

    socket.on("connect", () => console.log("Socket connected:", socket.id));
    socket.on("connect_error", (err) => console.log("Connect error:", err));
    socket.on("disconnect", (reason) => console.log("Disconnected:", reason));
  }

  return socket;
}

useEffect(() => {
  const socket = tennisApiLiveSocketConn();

  socket.emit("join-event", eventId);

  const handleEventUpdate = (data) => setEventData(data);
  const handleOddsUpdate  = (data) => setOddsData(data);

  socket.on("event-update", handleEventUpdate);
  socket.on("odds-update",  handleOddsUpdate);

  return () => {
    socket.off("event-update", handleEventUpdate);
    socket.off("odds-update",  handleOddsUpdate);
    socket.emit("leave-event", eventId);
  };
}, [eventId]);

useEffect(() => {
  if (!sportSlug) return;
  const socket = tennisApiLiveSocketConn();

  socket.emit("join-live-events-all", sportSlug);

  const handleUpdate = (data) => setData(data);
  socket.on("live-events-all-update", handleUpdate);

  return () => {
    socket.off("live-events-all-update", handleUpdate);
    socket.emit("leave-live-events-all", sportSlug);
  };
}, [sportSlug]);

import { Component, OnInit, OnDestroy } from '@angular/core';
import { tennisApiLiveSocketConn } from './tennis-api-live-socket';

@Component({ selector: 'app-live-match', templateUrl: './live-match.component.html' })
export class LiveMatchComponent implements OnInit, OnDestroy {
  eventData: any = null;
  oddsData:  any = null;
  eventId = 123456;
  private socket = tennisApiLiveSocketConn();
  private _handleEventUpdate: any;
  private _handleOddsUpdate:  any;

  ngOnInit() {
    this.socket.emit('join-event', this.eventId);
    this._handleEventUpdate = (data: any) => this.eventData = data;
    this._handleOddsUpdate  = (data: any) => this.oddsData  = data;
    this.socket.on('event-update', this._handleEventUpdate);
    this.socket.on('odds-update',  this._handleOddsUpdate);
  }

  ngOnDestroy() {
    this.socket.off('event-update', this._handleEventUpdate);
    this.socket.off('odds-update',  this._handleOddsUpdate);
    this.socket.emit('leave-event', this.eventId);
  }
}

import { ref, onMounted, onUnmounted } from 'vue';
import { tennisApiLiveSocketConn } from '@/libs/tennis-api-live-socket';

const eventData = ref(null);
const oddsData  = ref(null);
const eventId   = 123456;
const socket    = tennisApiLiveSocketConn();

const handleEventUpdate = (data) => { eventData.value = data; };
const handleOddsUpdate  = (data) => { oddsData.value  = data; };

onMounted(() => {
  socket.emit('join-event', eventId);
  socket.on('event-update', handleEventUpdate);
  socket.on('odds-update',  handleOddsUpdate);
});

onUnmounted(() => {
  socket.off('event-update', handleEventUpdate);
  socket.off('odds-update',  handleOddsUpdate);
  socket.emit('leave-event', eventId);
});

const socket  = tennisApiLiveSocketConn();
const eventId = 123456;

const handleEventUpdate = (data) => console.log('Event Update:', data);
const handleOddsUpdate  = (data) => console.log('Odds Update:',  data);

socket.emit('join-event', eventId);
socket.on('event-update', handleEventUpdate);
socket.on('odds-update',  handleOddsUpdate);

window.addEventListener('beforeunload', () => {
  socket.off('event-update', handleEventUpdate);
  socket.off('odds-update',  handleOddsUpdate);
  socket.emit('leave-event', eventId);
});