Actualizar datos en tiempo real

Aprende diferentes estrategias para mostrar datos actualizados en tiempo real sin refrescar el navegador.

Obtener datos de un servidor en tiempo real es fundamental en muchas aplicaciones web modernas. Hay varias técnicas que se pueden utilizar para lograrlo, cada una con sus propias ventajas y casos de uso específicos. Aquí te mostraré las más conocidas:

Short polling

Short polling es una técnica simple en la que el cliente realiza peticiones regulares al servidor a intervalos predefinidos para verificar si hay nuevos datos disponibles.

Cómo funciona:

El cliente realiza una solicitud HTTP al servidor a intervalos regulares (por ejemplo, cada pocos segundos). El servidor responde con los datos más recientes, si los hay, o con un mensaje indicando que no hay nuevos datos.

async function shortPolling() {
  try {
    while (true) {
      const response = await fetch('URL_DEL_ENDPOINT'); // Realiza la solicitud al servidor
      const data = await response.json(); // Procesa la respuesta como JSON
      
      // Haz algo con los datos recibidos, por ejemplo escribirlos en la consola:
      console.log('Datos recibidos:', data);

      // Espera antes de realizar la próxima solicitud (por ejemplo, cada 5 segundos)
      await new Promise(resolve => setTimeout(resolve, 5000));
    }
  } catch (error) {
    console.error('Error en la solicitud:', error);
  }
}

// Llama a la función para iniciar el short polling
shortPolling();

Ventajas:

• Fácil de implementar.
• Compatible con la mayoría de los navegadores y servidores web.

Desventajas:

• Consumo innecesario de ancho de banda, ya que se realizan solicitudes incluso si no hay nuevos datos.
• Los datos se actualizan en la siguiente petición después que se modifiquen en el backend, es decir, no son inmediatos.

Cuándo usarlo:

En aplicaciones donde la latencia no es un problema crítico y las actualizaciones periódicas que no requieren tiempos de respuesta instantáneos.

Long polling

Long polling es una variante del polling en la que la solicitud del cliente se mantiene abierta hasta que el servidor tiene nuevos datos para enviar o hasta que se alcanza un tiempo de espera límite.

Cómo funciona:

El cliente realiza una solicitud HTTP al servidor. Este retiene la solicitud dejando la conexión abierta hasta que tiene nuevos datos para enviar o hasta que se alcanza un tiempo de espera predefinido. Cuando hay nuevos datos o se alcanza el límite de tiempo, el servidor responde con los datos o una indicación de que no hay cambios.

La implementación también es similar a la de short polling, simplemente añadimos un header de keep-alive para que no se cierre la conexión. Hay que asegurarse de que la arquitectura del servidor permita estas conexiones.

async function longPolling() {
  try {
    while (true) {
      const response = await fetch('URL_DEL_ENDPOINT', { method: 'GET', headers: { 'Connection': 'keep-alive' }});
      const data = await response.json();
      
      console.log('Datos recibidos:', data);

      // Vuelve a hacer la solicitud después de recibir los datos
    }
  } catch (error) {
    console.error('Error en la solicitud:', error);
  }
}

// Llama a la función para iniciar el long polling
longPolling();

La implementación del código del backend que gestiona las respuestas depende en gran medida del lenguaje usado.

Ventajas:

• Reduce la carga del servidor en comparación con el polling frecuente.
• Los datos se entregan tan pronto como están disponibles, reduciendo la latencia en comparación con el short polling.

Desventajas:

Puede consumir recursos del servidor al mantener conexiones abiertas. No es tan eficiente como otras técnicas más recientes.

Cuándo usarlo:

En aplicaciones donde la actualización inmediata de datos no es crítica pero se necesita una reducción significativa en la latencia en comparación con el short polling.

Eventos push (Server-Sent Events - SSE)

Server-Sent Events (SSE) es una tecnología que permite al servidor enviar actualizaciones al cliente de forma asincrónica a través de una conexión HTTP única y de una sola vía.

Cómo funciona:

El cliente establece una conexión persistente con el servidor a través de un objeto EventSource. Luego el servidor envía actualizaciones cuando hay nuevos datos disponibles. En caso de que la conexión se interrumpa, el navegador intenta automáticamente reconectarse.

function escucharEventosServidor() {
  const eventSource = new EventSource('URL_DEL_ENDPOINT');

  eventSource.onopen = (event) => {
    console.log('Conexión establecida');
  };

  eventSource.onerror = (error) => {
    console.error('Error en la conexión:', error);
    eventSource.close();
  };

  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Datos recibidos:', data);

    // Haz algo con los datos recibidos
  };
}

// Llama a la función para iniciar la escucha de eventos del servidor
escucharEventosServidor();

Ventajas:

• Fácil de usar y entender.
• Muy eficiente. Menor sobrecarga en comparación con el polling continuo y el servidor sólo envía la información necesaria.
• Si se cierra la conexión por algun motivo se reconecta automáticamente sin tener que implementarlo.

Desventajas:

• Limitado a la transmisión unidireccional desde el servidor al cliente.
• Puede no ser compatible con los navegadores más antiguos.
• El protocolo estandard no permite pasar headers ni parámetros, por lo que se requieren librerías externas que implementen esta funcionalidad que a su vez dificultan depurar las respuestas.

Cuándo usarlo:

Para aplicaciones que requieren actualizaciones en tiempo real y en las que la transmisión de datos desde el servidor al cliente es suficiente.

WebSockets

Los WebSockets son un protocolo de comunicación bidireccional full-duplex que proporciona una conexión persistente entre el cliente y el servidor, permitiendo el intercambio de datos en tiempo real.

Cómo funciona:

El cliente y el servidor establecen una conexión WebSocket a través de un handshake. Una vez establecida la conexión, ambos pueden enviar y recibir datos simultáneamente sin la sobrecarga de las solicitudes HTTP.

function conectarWebSockets() {
  const socket = new WebSocket('ws://URL_DEL_WEBSOCKET');

  socket.onopen = (event) => {
    console.log('Conexión establecida');
  };

  socket.onerror = (error) => {
    console.error('Error en la conexión:', error);
  };

  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Datos recibidos:', data);

    // Haz algo con los datos recibidos
  };
}

// Llama a la función para establecer la conexión WebSocket
conectarWebSockets();

Ventajas:

• Baja latencia y sobrecarga reducida en comparación con otras técnicas.
• Comunicación bidireccional, lo que permite tanto al cliente como al servidor enviar datos en cualquier momento.

Desventajas:

• Más complejo de implementar en comparación con otras técnicas.
• Requiere compatibilidad del servidor y del cliente.

Cuándo usarlo:

En aplicaciones que requieren una comunicación bidireccional en tiempo real y baja latencia, como chats en vivo, juegos en tiempo real, aplicaciones colaborativas, etc.

Conclusión

Elegir la técnica adecuada para obtener datos en tiempo real depende de los requisitos específicos de tu aplicación. En resumen:

• Utiliza Short Polling para actualizaciones periódicas no críticas.
• Emplea Long Polling si la latencia es un factor importante pero no es necesaria la comunicación bidireccional.
• Considera Eventos Push (SSE) para actualizaciones unidireccionales desde el servidor al cliente.
• Adopta WebSockets para aplicaciones que requieran comunicación bidireccional en tiempo real con baja latencia.

Es importante evaluar las necesidades de tu aplicación y las capacidades de compatibilidad antes de elegir la mejor opción.