Grande annonce !
J'ai commencé mon parcours d'apprentissage quotidien sur la Conception de systèmes frontend. Et je partagerai les informations de chaque module dans les blogs. Alors, voici le début et il y a bien plus à venir !

Dans ce blog, nous explorerons différents mécanismes de récupération de données essentiels à la conception de systèmes frontaux, notamment les interrogations courtes, les interrogations longues, les WebSockets, les événements envoyés par le serveur (SSE) et les webhooks. Chaque technique répond à des besoins spécifiques en matière de fourniture de données vers et depuis le client et le serveur, et leur compréhension est cruciale pour concevoir des applications Web évolutives en temps réel.

1. Sondage court

L'interrogation courte est une méthode par laquelle le client envoie à plusieurs reprises des requêtes au serveur à intervalles réguliers pour vérifier les mises à jour.

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

• Communication en direct courte
• Aucune persistance des données
• Moins d'utilité des ressources
• Charge du serveur due aux requêtes répétées
• Utilisation accrue de la bande passante

Par exemple – Ticker boursier, flux de médias sociaux

2. Longue interrogation

L'interrogation longue est une amélioration par rapport à l'interrogation courte, où le client envoie une requête et le serveur maintient la connexion ouverte jusqu'à ce qu'il ait de nouvelles données à renvoyer.

Depuis le back-end, la réponse sera envoyée uniquement lorsque les données seront mises à jour, jusque-là, la demande sera conservée. S'il n'y a pas de mise à jour pendant une longue période, le délai d'attente est traité.

Côté client

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

• Connexion unique de longue durée
• Fournit des mises à jour en temps réel avec moins de requêtes que les interrogations courtes.
• Réduit les transferts de données inutiles en l'absence de mises à jour.
• La connexion peut rester ouverte pendant de longues durées, augmentant ainsi la charge du serveur.

Par exemple – Chats d'assistance client en direct

3. Prises Web

Les WebSockets permettent une communication en duplex intégral entre le client et le serveur, ce qui en fait la méthode la plus efficace pour le transfert de données en temps réel.

Le client ouvre une connexion WebSocket avec le serveur et le client et le serveur peuvent s'envoyer des messages via cette connexion unique.

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

• Communication bidirectionnelle continue
• Plusieurs bibliothèques pour l'implémenter - ws, socket.io etc.
• Efficace pour les mises à jour à haute fréquence avec une faible surcharge
• Défis : maintenir la communication avec 1 serveur, gérer les pannes et la mise à l'échelle, occupe les ressources.

Par exemple : applications de chat en direct, jeux multijoueurs en ligne

4. Événements envoyés par le serveur (SSE)

SSE fournit un flux unidirectionnel de mises à jour du serveur vers le client via une connexion 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);
};

• Vive la communication unidirectionnelle
• Connexion HTTP unique
• Défis : utilisation des ressources, compatibilité du navigateur et comportement sur les onglets inactifs

Par exemple : Flux, notifications

5. Webhooks

Les webhooks sont un mécanisme de communication de serveur à serveur dans lequel le serveur envoie des données à une URL prédéfinie lorsqu'un événement se produit. Le client n'a pas besoin de continuer à vérifier les mises à jour sur le serveur.

Populaire pour déclencher des actions entre les systèmes, telles que des notifications de paiement, des événements GitHub ou des intégrations de services tiers.

Conclusion

Le choix de la bonne méthode de communication dépend des exigences de votre application. Les WebSockets et SSE sont parfaits pour les données en temps réel et en streaming, tandis que les interrogations longues offrent un équilibre entre performances et facilité d'utilisation. L'interrogation courte est une solution simple pour les mises à jour peu fréquentes, mais peut être gourmande en ressources, et les webhooks sont idéaux pour les notifications de serveur à serveur.

Chaque technique a ses propres avantages et limites. Les comprendre peut vous aider à prendre des décisions éclairées pour créer des applications Web efficaces et réactives.

Ce blog est ouvert aux suggestions et aux discussions !