⚡️ Niveau 25 - Polling et tri de dates

Ce niveau est plus une brève introduction au principe de polling. Dans votre projet, que ce soit Discord ou Reddit, vous devrez faire du polling afin de récupérer automatiquement les nouveaux messages ou les nouveaux commentaires.

Le terme polling fait référence à une technique de vérification périodique de l'état d'un système. Plutôt que d'attendre qu'un événement se produise et d'être notifié de cet événement, le logiciel vérifie activement et régulièrement l'état ou la présence de nouvelles données.

Par exemple, vérifier s'il y a de nouveaux messages ou commentaires depuis un certain timestamp.

Bien que le polling puisse être efficace dans certains contextes, il peut également être coûteux en termes de ressources, car il nécessite une vérification constante, même lorsque rien n'a changé. Pour nos besoins, ce sera suffisant, mais sachez qu'il faudrait utiliser une autre technique pour un système à grande échelle (WebSocket, long polling, etc.).

Pour faire du polling, vous pourrez utiliser la fonction setInterval.

setInterval(async () => {
  // le code à exécuter à chaque interval
}, 5000)

info

La fonction setInterval exécutera la fonction anonyme passée en paramètre de façon répétée selon le délai passé en argument (5000 ms dans l'exemple, soit aux 5 secondes).

Vous pouvez modifier la valeur 5000 pour une autre valeur. La valeur est en millisecondes.

danger

Ne configurez pas un délai trop rapide, Supabase pourrait vous bloquer et le service impose des limites sur les forfaits gratuits.

Par exemple, en utilisant directement la console du navigateur pour afficher un message toutes les 5 secondes:

Ici, le message a été affiché 8 fois de suite puisque le console.log est exécuté toutes les 5 secondes.

Important: setInterval et ngOnDestroy

Dès que vous créez un interval avec setInterval, ce dernier restra actif dans l'application, même si vous changez de page ou que le composant n'est plus affiché!

Pour que l'interval soit annulé lorsque vous changez de page ou encore lorsque le composant dans lequel vous configurez l'interval n'est plus actif, il vous faut libérer l'interval.

Pour ce faire, sauvegardez une référence à l'interval configuré et lorsque le composant est "détruit" (ngOnDestroy), libérez l'interval. Un peu comme ceci:

export class MonComponentPage implements OnInit, OnDestroy {
  private intervalId: ReturnType<typeof setInterval> | null = null;

  ngOnInit(): void {
    this.intervalId = setInterval(() => {
      console.log('Interval exécuté');
    }, 5000);
  }

  ngOnDestroy(): void {
    if(this.intervalId) {
      clearInterval(this.intervalId); // Libère l'interval lorsque le composant est "détruit"
      console.log('Interval libéré');
    }
  }
}

Obtenir les entrées Supabase créées après une certaine date

Pour obtenir seulement des entrées APRÈS une certaine date ou heure, vous pouvez utiliser les filtres Supabase, un peu comme pour le id.

Par exemple, en ajoutant un param:

created_at: gt.2025-09-22

info

Évidemment, assurez-vous de modifier pour la date désirée.

Il est possible de préciser l'heure aussi,

created_at: gt.2025-09-22T13:55:52