Dashboard de Tenis en Tiempo Real con WebSocket y JavaScript

¿Por qué utilizar WebSocket en lugar de una API REST? El caso de Tennis API

Cuando trabajamos con APIs, normalmente pensamos en solicitudes HTTP tradicionales donde una aplicación consulta información cada cierto tiempo. Sin embargo, para aplicaciones que requieren datos en tiempo real, existe una alternativa mucho más eficiente: WebSocket.

Mientras exploraba las capacidades de Tennis API encontré su integración mediante Socket.IO, una tecnología que permite recibir actualizaciones en tiempo real sin necesidad de realizar consultas constantes al servidor.

¿Cómo funciona una API REST tradicional?

Con una API REST, la aplicación debe preguntar periódicamente si existen nuevos datos.

Por ejemplo:

setInterval(async () => {

    const response =
    await fetch("/live-scores");

    const data =
    await response.json();

    console.log(data);

}, 5000);

En este caso la aplicación realiza una consulta cada 5 segundos.

El problema es que muchas veces no existe información nueva y aun así estamos consumiendo recursos del servidor y realizando solicitudes innecesarias.

Si quieren ver más a detalle un ejemplo les comparto una conexión a tennis-api.com la entrada es Como crear un dashboard de ranking de ATP

¿Qué cambia con WebSocket?

Con WebSocket la conexión permanece abierta.

En lugar de preguntar constantemente por nuevos datos, el servidor envía automáticamente las actualizaciones cuando ocurre un cambio.

Esto resulta ideal para:

• Marcadores deportivos

• Mercados de apuestas en vivo

• Sistemas de monitoreo

• Chats

• Dashboards en tiempo real

• Aplicaciones financieras

Socket.IO en Tennis API

La documentación de Tennis API muestra una integración basada en Socket.IO.

https://tennis-api.com/news/tennis-websocket-api-guide-live-scores-live-odds-and-point-by-point-data-for-real-time-apps/

Yo les comparto como es la conexión

async function getWsToken(){

    try{

        document.getElementById(

            "status"

        ).innerHTML =

        "Solicitando token...";

        const response =

        await fetch(

        "https://tennis-api-atp-wta-itf.p.rapidapi.com/tennis/v2/extend/api/ws-token",

        {

            method:"GET",

            headers:{

                "x-rapidapi-host":

                "tennis-api-atp-wta-itf.p.rapidapi.com",

                "x-rapidapi-key":

                API_KEY

            }

        });

        const data =

        await response.json();

        log(data);

        return data;

    }catch(error){

        log(error);

        return null;

    }

}

Una vez conectado, el cliente puede recibir eventos automáticamente sin necesidad de realizar consultas periódicas.

Ventajas de WebSocket

1. Menor consumo de solicitudes

Con REST es común consultar la API cada pocos segundos.

Con WebSocket la conexión permanece abierta y los datos se reciben únicamente cuando existe una actualización.

2. Menor latencia

Las actualizaciones llegan casi instantáneamente.

Esto es especialmente importante en deportes como el tenis, donde un solo punto puede cambiar completamente el estado de un partido.

3. Mejor experiencia para el usuario

Los marcadores, estadísticas y eventos pueden actualizarse en tiempo real sin necesidad de recargar la página.

4. Ideal para datos deportivos

En tenis podemos recibir:

• Marcadores en vivo

• Actualizaciones punto por punto

• Eventos de partido

• Cambios de estado

• Información de odds en tiempo real

Todo ello mediante una única conexión persistente.

REST vs WebSocket

Característica	REST API	WebSocket
Datos históricos	Excelente	No recomendado
Rankings	Excelente	No recomendado
Perfiles de jugadores	Excelente	No recomendado
Marcadores en vivo	Posible	Excelente
Datos punto por punto	Limitado	Excelente
Notificaciones en tiempo real	Limitado	Excelente
Baja latencia	Difícil	Excelente

Consideraciones importantes

Tennis API requiere un token especial para acceder a su integración Socket.IO. el cual se obtiene de Rapidapi

Este acceso está disponible únicamente para usuarios del plan MEGA.

Conclusión

WebSocket representa una excelente alternativa cuando una aplicación necesita reaccionar inmediatamente a cambios en los datos.

Mientras que las APIs REST continúan siendo la mejor opción para rankings, perfiles, estadísticas históricas y consultas puntuales, las conexiones WebSocket permiten construir aplicaciones deportivas mucho más dinámicas gracias a la recepción instantánea de eventos.

Para proyectos relacionados con tenis, análisis deportivo o dashboards en vivo, comprender la diferencia entre REST y WebSocket puede ayudar a elegir la arquitectura adecuada desde el inicio.

Más información ver la documentación https://tennis-api.com/news/tennis-websocket-api-guide-live-scores-live-odds-and-point-by-point-data-for-real-time-apps/