¡Gran anuncio!
He comenzado mi viaje de aprendizaje diario de Diseño de sistemas frontend. Y compartiré ideas de cada módulo en los blogs. Así que ¡aquí está el comienzo y hay mucho más por venir!

En este blog, exploraremos diferentes mecanismos de obtención de datos esenciales para el diseño de sistemas front-end, incluidos sondeos cortos, sondeos largos, WebSockets, eventos enviados por el servidor (SSE) y webhooks. Cada técnica aborda necesidades específicas para entregar datos hacia y desde el cliente y el servidor, y comprenderlas es crucial para diseñar aplicaciones web escalables en tiempo real.

1. Encuesta breve

El sondeo corto es un método en el que el cliente envía repetidamente solicitudes al servidor a intervalos regulares para buscar actualizaciones.

setInterval(async () => {
  const response = await fetch('/api/get-posts');
  const data = await response.json();
  // Update UI with new data
}, 5000); // Poll every 5 seconds

• Comunicación breve en vivo
• No hay persistencia de los datos
• Menos utilidad de recursos
• Carga del servidor debido a las solicitudes repetidas
• Aumento del uso de ancho de banda

Por ejemplo, ticker del mercado de valores, feeds de redes sociales

2. Encuesta larga

El sondeo largo es una mejora con respecto al sondeo corto, donde el cliente envía una solicitud y el servidor mantiene abierta la conexión hasta que tiene nuevos datos para devolver.

Desde el back-end, la respuesta se enviará solo cuando se actualicen los datos, hasta entonces retendrá la solicitud. Si no hay ninguna actualización durante mucho tiempo, se procesa el tiempo de espera.

Lado del cliente

async function subscribe() {
  let response = await fetch("/subscribe");

  if (response.status == 502) {
    // Status 502 is a connection timeout error, let's reconnect
    await subscribe();
  } else if (response.status != 200) {
    // An error - let's show it
    showMessage(response.statusText);
    // Reconnect in one second
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
    // Get and show the message
    let message = await response.text();
    showMessage(message);
    // Call subscribe() again to get the next message
    await subscribe();
  }
}

subscribe();

• Conexión única de larga duración
• Proporciona actualizaciones en tiempo real con menos solicitudes que encuestas breves.
• Reduce la transferencia de datos innecesaria cuando no hay actualizaciones.
• La conexión se puede mantener abierta durante períodos prolongados, lo que aumenta la carga del servidor.

Por ejemplo: chats de atención al cliente en vivo

3. Enchufes web

WebSockets permite la comunicación full-duplex entre el cliente y el servidor, lo que lo convierte en el método más eficiente para la transferencia de datos en tiempo real.

El cliente abre una conexión WebSocket con el servidor y tanto el cliente como el servidor pueden enviarse mensajes entre sí a través de esta única conexión.

webSocket = new WebSocket(url, protocols);

// Send message
webSocket.send("Here's some text that the server is urgently awaiting!");

// Receive message
webSocket.onmessage = (event) => {
  console.log(event.data);
};

• Comunicación bidireccional continua
• Múltiples bibliotecas para implementarlo: ws, socket.io, etc.
• Eficiente para actualizaciones de alta frecuencia con bajos gastos generales
• Desafíos: mantener la comunicación con 1 servidor, manejar fallas y escalar, ocupa los recursos.

Por ejemplo: aplicaciones de chat en vivo, juegos multijugador en línea

4. Eventos enviados por el servidor (SSE)

SSE proporciona un flujo unidireccional de actualizaciones desde el servidor al cliente a través de una conexión HTTP.

const evtSource = new EventSource("ssedemo.php");

evtSource.onmessage = (event) => {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = `message: ${event.data}`;
  eventList.appendChild(newElement);
};

• Larga vida a la comunicación unidireccional
• Conexión HTTP única
• Desafíos: utilización de recursos, compatibilidad del navegador y comportamiento en pestañas inactivas

Por ejemplo: feeds, notificaciones

5. Webhooks

Los webhooks son un mecanismo de comunicación de servidor a servidor donde el servidor envía datos a una URL predefinida cuando ocurre un evento. El cliente no necesita seguir revisando el servidor en busca de actualizaciones.

Popular para desencadenar acciones entre sistemas, como notificaciones de pago, eventos de GitHub o integraciones de servicios de terceros.

Conclusión

La elección del método de comunicación correcto depende de los requisitos de su aplicación. WebSockets y SSE son perfectos para transmisión de datos y en tiempo real, mientras que el sondeo prolongado ofrece un equilibrio entre rendimiento y facilidad de uso. El sondeo breve es una solución sencilla para actualizaciones poco frecuentes, pero puede consumir muchos recursos, y los webhooks son ideales para notificaciones de servidor a servidor.

Cada técnica tiene sus propias ventajas y limitaciones. Comprenderlos puede ayudarle a tomar decisiones informadas para crear aplicaciones web eficientes y responsivas.

¡Este blog está abierto a sugerencias y debates!