bonjour,

je voulais savoir comment faisaient les applications Web pour pouvoir rafraîchir les informations déjà affichées sur une page d'un utilisateur quand un autre utilisateur modifie la BDD ?

exemple : l'utilisateur1 affiche une page qui liste des tâches enregistrées dans une BDD (tâche 1, tâche 2, tâche 3 ).
L'utilisateur2 supprime la tache 2.
la tache 2 disparaît pour l'utilisateur1 sans rafraîchir la page.

j'avais pensé avec du ajax qui refresh tout les 5 seconde mais je trouve ça très lourd.

merci de votre aide

3 réponses


tom256
Auteur
Réponse acceptée

merci beaucoup à vous deux pour la précision de vos réponses je pense que j'ai toutes les informations j'ai plus qu'à !

Hello,

Les grosses applications utilise souvant des événements côté serveur qui envoi une notification (push, sse, websocket, ...)

En gros tu as :

  • user1 et user2 qui sont sur la page
  • user2 fait un appel ajax pour supprimer la tâche 2
  • côté back cela supprime la tâche 2 en bdd
  • côté back toujours après la suppression on envoie un event "TaskDeleted" par exemple qui peut-être transmis aux différent clients connecté
  • côté front on reçoit cet événement et on l'écoute via un listener, soit on demande de refresh tout, soit on à la task qui a été supprimé dans les données de l'événement et on peut retirer la task directement pour éviter un autre call ajax.

Hello :)

Alors la technique du ajax qui refresh c'est un bricolage qui se faisait quand il n'y avait pas le choix, mais c'est très lourd ça gache des perfs et surtout à force ça augmente pas mal la facture du serveur x)

Il faut utiliser un tunnel pub/sub, publisher (le serveur qui lance l'event) subcriber (dans l'application, pour tout le monde, c'est une connection permanente avec le serveur qui envoie les notifs, c'est pour ça qu'on parle de tunnel)

La façon la plus courante c'est de passer par Redis et NodeJS, après tu peux utiliser une solution Cloud (Google Cloud PubSub ou Firebase Cloud Messaging, ou AWS EventBus/Lambda)

Sinon une autre solution possible mais je ne l'ai pas testé, c'est d'essayer la nouvelle feature de NodeJS Cluster (ok alors pour ça il faut NodeJS v19, ce n'est pas une version LTS du coup si c'est pour un projet perso tu peux tenter, si c'est pour un projet pro laisses tomber ou attends que la version 19 de Node passe en version stable x)

Si tu veux tester: https://nodejs.org/api/cluster.html apparement le système est en stable, mais c'est NodeJS v19 dans sa globalité qui ne l'est pas, du coup uniquement pour un projet perso :p

Pour Redis, alors en gros tu devra héberger une instance Redis qui tournera de son coté, il va s'occuper de recevoir un event et en réaction il va dispatch un event au réseau, les navigateurs vont se connecter en permanence au serveur Redis, du coup pas besoin de faire 100000 connections dessus, une seule connection au serveur et le tunnel reste ouvert tant que l'utilisateur reste sur la page, si Redis envoie un event, la machine va l'intercepter et réagir en lancant la fonction que tu aura préparé en callback

Bon mon explication est un peu bourrin x) Mais c'est juste pour donner l'idée générale, en gros c'est un peu comme le addEventListenner en JS et tu mets la réaction en callback, sauf que la il écoute un serveur rédis au lieux d'écouter un click ou un change :p

Tu peux checker cette doc: https://redis.io/docs/manual/pubsub/ pour comprendre le principe de pubsub

Et aussi ça: https://redis.io/docs/stack/get-started/tutorials/stack-node/ pour intégrer Redis avec NodeJS

Sinon un petit conseil pour éviter de faire refresh la page, utilises ça: https://turbo.hotwired.dev/handbook/introduction Au lieu de rafraichir la page tu peux juste rafraichir une div, ou plus simple coté front utilises React ou Vue, comme ça tu remplaces juste un état, après tu peux le faire en simple JS, coté front dans ta fonction au lieux de rafraichir la page tu tu selectionne un élément et tu le recharges, le plus simple c'est turbo :p