Grande anúncio!
Comecei minha jornada diária de aprendizado de design de sistema front-end. E estarei compartilhando insights de cada módulo nos blogs. Então, aqui está o começo e há muito mais por vir!

Neste blog, exploraremos diferentes mecanismos de busca de dados essenciais para o design do sistema front-end, incluindo pesquisas curtas, pesquisas longas, WebSockets, eventos enviados pelo servidor (SSE) e webhooks. Cada técnica atende a necessidades específicas de entrega de dados de e para o cliente e servidor, e compreendê-las é crucial para projetar aplicações web escalonáveis ​​e em tempo real.

1. Pesquisa curta

Short polling é um método em que o cliente envia repetidamente solicitações ao servidor em intervalos regulares para verificar se há atualizações.

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

• Comunicação curta ao vivo
• Sem persistência dos dados
• Menos utilidade de recursos
• Carga do servidor devido a solicitações repetidas
• Maior uso de largura de banda

Ex: ticker do mercado de ações, feeds de mídia social

2. Pesquisa longa

A sondagem longa é uma melhoria em relação à sondagem curta, em que o cliente envia uma solicitação e o servidor mantém a conexão aberta até que tenha novos dados para retornar.

No Back-end, a resposta será enviada somente quando os dados forem atualizados, até então irá reter a solicitação. Se não houver atualização por um longo período, o tempo limite será processado.

Lado do 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();

• Conexão única de longa duração
• Fornece atualizações em tempo real com menos solicitações do que pesquisas curtas.
• Reduz a transferência desnecessária de dados quando não há atualizações.
• A conexão pode ser mantida aberta por longos períodos, aumentando a carga do servidor.

Ex: chats de suporte ao cliente ao vivo

3. Soquetes da Web

WebSockets permitem comunicação full-duplex entre o cliente e o servidor, tornando-o o método mais eficiente para transferência de dados em tempo real.

O cliente abre uma conexão WebSocket com o servidor e tanto o cliente quanto o servidor podem enviar mensagens entre si por meio dessa única conexão.

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);
};

• Comunicação bidirecional contínua
• Várias bibliotecas para implementá-lo - ws, socket.io etc.
• Eficiente para atualizações de alta frequência com baixa sobrecarga
• Desafios - manter a comunicação com 1 servidor, lidar com falhas e dimensionamento, ocupar os recursos.

Ex: aplicativos de chat ao vivo, jogos multijogador online

4. Eventos enviados pelo servidor (SSE)

SSE fornece um fluxo unidirecional de atualizações do servidor para o cliente por meio de uma conexão 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);
};

• Viva a comunicação unidirecional
• Conexão HTTP única
• Desafios - utilização de recursos, compatibilidade do navegador e comportamento em abas inativas

Ex: Feeds, Notificações

5. Webhooks

Webhooks são um mecanismo de comunicação entre servidores onde o servidor envia dados para um URL predefinido quando ocorre um evento. O cliente não precisa ficar verificando se há atualizações no servidor.

Popular para acionar ações entre sistemas, como notificações de pagamento, eventos GitHub ou integrações de serviços de terceiros.

Conclusão

A escolha do método de comunicação correto depende dos requisitos da sua aplicação. WebSockets e SSE são perfeitos para dados em tempo real e streaming, enquanto pesquisas longas oferecem um equilíbrio entre desempenho e facilidade de uso. A pesquisa curta é uma solução simples para atualizações pouco frequentes, mas pode consumir muitos recursos, e os webhooks são ideais para notificações de servidor para servidor.

Cada técnica tem suas próprias vantagens e limitações. Compreendê-los pode ajudá-lo a tomar decisões informadas para criar aplicativos da Web eficientes e responsivos.

Este blog está aberto para sugestões e discussões!