TP : Système de mise à jour d'état avec long polling

Description

Ce projet illustre le mécanisme de Long Polling pour mettre à jour des statuts de tickets en quasi-temps réel.

• Serveur (Flask) : maintient l’état de plusieurs tickets et expose des endpoints pour :

  • lister les tickets (/list-tickets)
  • récupérer l’état d’un ticket via Long Polling (/poll-status/<ticket_id>)
  • mettre à jour un ticket (/update-status/<ticket_id>)

• Client (HTML/JS) : affiche tous les tickets existants et met à jour automatiquement leur statut via Long Polling.

  • Les tickets et statuts sont sélectionnables via des menus déroulants.
  • Les changements effectués par un client sont immédiatement visibles par les autres clients connectés.

Prérequis

• Python 3.x
• Flask (pip install flask)
• Navigateur web moderne (Chrome, Firefox, Edge, etc.)

Structure du projet

tp_long_polling/
│
├─ app.py              # Serveur Flask
├─ templates/
│   └─ index.html      # Front-end
└─ README.md           # Documentation

Lancer l’application

1. Installer Flask si nécessaire :

pip install flask

2. Lancer le serveur :

python app.py

3. Ouvrir le navigateur et accéder à :

http://127.0.0.1:5000/

Fonctionnement

1. La page charge automatiquement tous les tickets prédéfinis.

2. Chaque ticket a sa propre boucle de Long Polling pour recevoir les mises à jour du serveur.

3. Pour modifier le statut d’un ticket :

   • Sélectionner le ticket dans le menu déroulant
   • Choisir un nouveau statut
   • Cliquer sur Mettre à jour

4. Les autres clients voient les changements presque instantanément.

5. Si aucun changement n’intervient, les requêtes Long Polling se relancent automatiquement après un timeout (25s).

Tickets prédéfinis

Ticket ID	Statut initial
TICKET-001	En attente
TICKET-002	En cours
TICKET-003	Terminée
TICKET-004	Échec

Personnalisation

• Ajouter de nouveaux tickets directement depuis le front-end : saisir un ID de ticket inexistant dans le menu (selon l’implémentation).
• Ajouter de nouveaux statuts possibles en modifiant le menu déroulant statusSelect dans index.html.

Points techniques

• Long Polling : chaque client maintient une connexion ouverte sur /poll-status/<ticket_id> jusqu’à un changement ou un timeout.
• Versioning : chaque ticket a un compteur de version pour détecter les changements.
• Thread-safe : accès aux tickets synchronisé avec threading.Lock pour éviter les conflits lors des mises à jour concurrentes.

Explication du TP

Le TP permet de comprendre comment le serveur et le client communiquent via Long Polling :

• Côté serveur :

  • Chaque ticket possède un statut et une version.

  • Lorsqu’un client fait une requête sur /poll-status/<ticket_id> :

    • Si la version du ticket est supérieure à last_version envoyée par le client, le serveur renvoie immédiatement le nouveau statut.
    • Sinon, le serveur maintient la connexion ouverte pendant un délai maximal (timeout).

  • Lorsqu’une mise à jour est faite via /update-status/<ticket_id>, la version du ticket est incrémentée, et la prochaine réponse aux requêtes en attente renverra le nouveau statut.

• Côté client :

  • La page charge la liste des tickets au démarrage.
  • Chaque ticket a sa propre boucle de Long Polling.
  • Après chaque réponse (changement ou timeout), le client relance immédiatement la requête pour rester à jour.
  • Cette approche permet de recevoir des mises à jour quasi-instantanément sans recharger la page ou utiliser WebSockets.

---

Ce projet illustre la technique fondamentale du Long Polling et sa mise en œuvre simple avec Flask et JavaScript.