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 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.
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 pollingshortPolling()
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 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.
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 pollinglongPolling()
La implementación del código del backend que gestiona las respuestas depende en gran medida del lenguaje usado.
Puede consumir recursos del servidor al mantener conexiones abiertas. No es tan eficiente como otras técnicas más recientes.
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.
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.
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 servidorescucharEventosServidor()
Para aplicaciones que requieren actualizaciones en tiempo real y en las que la transmisión de datos desde el servidor al cliente es suficiente.
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.
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 WebSocketconectarWebSockets()
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.
Elegir la técnica adecuada para obtener datos en tiempo real depende de los requisitos específicos de tu aplicación. En resumen:
Es importante evaluar las necesidades de tu aplicación y las capacidades de compatibilidad antes de elegir la mejor opción.