Cómo comenzar a trabajar con WebSocket en Tennis API

 Mientras desarrollaba un ejemplo de integración con JavaScript y WebSocket con Tennis API, descubrí que la información está distribuida en dos sitios distintos. Al principio intenté conectarme únicamente con la guía general de WebSocket y, aunque logré autenticarme correctamente, todavía no era evidente qué eventos o endpoints debía utilizar para recibir información en tiempo real.

El primer recurso que recomiendo leer es la guía Tennis WebSocket API Guide. En este artículo se explica el concepto de la integración mediante WebSocket, las ventajas frente a una API REST y el uso de Socket.IO para recibir actualizaciones en tiempo real sin realizar consultas HTTP constantes.

Sin embargo, durante mis pruebas descubrí que esa guía está enfocada en explicar el funcionamiento general de la tecnología y no contiene todos los detalles necesarios para comenzar a consumir los eventos disponibles. Para conocer los eventos, endpoints y métodos específicos que utiliza la plataforma es necesario consultar la documentación técnica de Matchstat Live API Documentation.

Antes de construir un dashboard completo decidí crear una página de prueba de conexión. El objetivo de esta primera versión fue validar paso a paso que todo el proceso funcionara correctamente:

• Obtener el WebSocket Token mediante la API.
• Conectarse al servidor Socket.IO.
• Verificar que la autenticación fuera exitosa.
• Registrar todos los eventos enviados y recibidos.
• Probar diferentes métodos de suscripción hasta encontrar los eventos documentados.

Gracias a esta página de diagnóstico fue posible identificar el flujo correcto de conexión y comprobar que el servidor respondía con eventos como event-update, lo que confirmó que la integración estaba funcionando correctamente.

Les comparto la url de la Demo Tennis API Socket.IO Explorer V2

Mi recomendación es seguir este mismo orden si vas a desarrollar una aplicación con Tennis API:

1. Leer la guía general de WebSocket para comprender cómo funciona la comunicación en tiempo real.
2. Revisar la documentación técnica para identificar los endpoints y eventos disponibles.
3. Crear una página sencilla de prueba que permita validar la autenticación y registrar todos los mensajes del servidor antes de desarrollar un dashboard o una aplicación completa.

Les comparto la url de la Demo Tennis API Socket.IO Explorer V2

Esta estrategia me permitió entender mucho mejor el funcionamiento de la API y evitó perder tiempo intentando adivinar eventos o canales de suscripción. En las siguientes publicaciones mostraré cómo utilizar esta conexión para construir un dashboard de tenis en tiempo real con JavaScript y Socket.IO, consumiendo los eventos enviados directamente por el servidor.

Otra Nota importante necesitan tener el Plan MEGA para poder utilizar websocket, les comparto un video explicando un poco mas a detalle .

Algunas funciones en Javascript

async function start(){

 const key=w("apikey").value.trim();

 if(!key){alert("Pega tu API Key");return;}

 w("status").innerHTML="Obteniendo token...";

 const tk=await getToken(key);

 log(tk);

 if(!tk.success){

   w("status").innerHTML="<span class='err'>No se obtuvo token</span>";

   return;

 }

 token=tk.token;

 socket=io("https://live.matchstat.com",{

    auth:{token:token},

    transports:["websocket"]

 });

 socket.on("connect",()=>{

   w("status").innerHTML="<span class='ok'>Conectado</span>";

   log({connected:true,socketId:socket.id});

   getLiveEvents(key);

 });

 socket.on("disconnect",r=>log({disconnect:r}));

 socket.on("connect_error",e=>log({connect_error:e.message}));

 socket.on("error",e=>log({error:e}));

 socket.on("live-events-all-update",d=>log({event:"live-events-all-update",data:d}));

 socket.on("event-update",d=>log({event:"event-update",data:d}));

 socket.on("odds-update",d=>log({event:"odds-update",data:d}));

 socket.onAny((e,...a)=>log({incoming:e,data:a}));

}

async function getLiveEvents(key){

 try{

 const r=await fetch("https://tennis-api-atp-wta-itf.p.rapidapi.com/tennis/v2/extend/api/events/live",{

 headers:{

 "x-rapidapi-key":key,

 "x-rapidapi-host":"tennis-api-atp-wta-itf.p.rapidapi.com"

 }});

 const j=await r.json();

 w("events").textContent=JSON.stringify(j,null,2);

 log({liveEvents:j});

 let id=null;

 if(Array.isArray(j)&&j.length) id=j[0].eventId||j[0].event_id||j[0].id;

 else if(j.data&&j.data.length) id=j.data[0].eventId||j.data[0].event_id||j.data[0].id;

 if(id){

   w("eventId").value=id;

   log({autoEventId:id});

 }

 }catch(e){

  log({liveEventsError:e.message});

 }

}