# Jauge de places restantes en direct, un bloc pour une compagnie de spectacle

> Une compagnie qui vend ses propres billets, sans plateforme tierce, voulait afficher un nombre de places décroissant en quasi temps réel. Retour sur le bloc mis en place.

- Auteur : WordPress Développement
- Publié le : 2024-02-07
- Mis à jour le : 2024-02-07
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/jauge-places-restantes-bloc-compagnie-spectacle/

## L’essentiel

- La jauge se met à jour par un court intervalle d'interrogation, pas par un flux permanent
- Le nombre affiché reste une approximation volontairement prudente
- Aucune plateforme de billetterie tierce n'intervient dans ce montage

Le 7 février 2024, une compagnie de théâtre indépendante ouvrait la billetterie de sa nouvelle création, vendue exclusivement depuis son propre site, sans passer par une plateforme de billetterie tierce. La demande de la metteuse en scène tenait en une phrase : afficher, sur la page de chaque représentation, le nombre de places encore disponibles, mis à jour sans que le visiteur ait à recharger la page.

## Le choix de ne pas viser le temps réel strict

Un système de mise à jour instantanée, par websocket par exemple, aurait demandé une infrastructure serveur que la compagnie ne possédait pas et n'avait pas les moyens de maintenir dans la durée. Le compromis retenu s'appuie sur une interrogation périodique toutes les quinze secondes depuis le bloc, ce qui donne une impression de mise à jour vivante sans exiger de connexion permanente.

## Structurer la donnée de disponibilité

Chaque représentation est un article d'un type de contenu personnalisé, avec un champ numérique représentant la capacité totale et un compteur de réservations :

```
register_post_type( 'representation', array(
    'label'        => 'Représentations',
    'public'       => true,
    'show_in_rest' => true,
    'supports'     => array( 'title', 'custom-fields' ),
) );
```

## La route REST qui calcule les places restantes

```
register_rest_route( 'compagnie/v1', '/places-restantes/(?P<id>\d+)', array(
    'methods'             => 'GET',
    'callback'            => 'compagnie_calculer_places_restantes',
    'permission_callback' => '__return_true',
) );

function compagnie_calculer_places_restantes( $requete ) {
    $id_representation = (int) $requete->get_param( 'id' );
    $capacite_totale = (int) get_post_meta( $id_representation, '_capacite_totale', true );
    $places_reservees = (int) get_post_meta( $id_representation, '_places_reservees', true );

    return array(
        'restantes' => max( 0, $capacite_totale - $places_reservees ),
        'capacite'  => $capacite_totale,
    );
}
```

> L'essentiel à retenir : La jauge se met à jour par un court intervalle d'interrogation, pas par un flux permanent ; Le nombre affiché reste une approximation volontairement prudente ; Aucune plateforme de billetterie tierce n'intervient dans ce montage

## Le bloc côté affichage

Le bloc dynamique interroge cette route à intervalle régulier, avec un arrêt automatique dès que la jauge atteint zéro, pour éviter des appels inutiles une fois la représentation complète :

```
function demarrerRafraichissementJauge( idRepresentation ) {
  const intervalle = setInterval( () => {
    wp.apiFetch( { path: `/compagnie/v1/places-restantes/${idRepresentation}` } )
      .then( ( donnees ) => {
        afficherJauge( donnees.restantes, donnees.capacite );
        if ( donnees.restantes === 0 ) {
          clearInterval( intervalle );
          afficherMentionComplet();
        }
      } );
  }, 15000 );
}
```

## Une jauge volontairement prudente

Le nombre affiché n'est pas garanti à la seconde près : entre deux rafraîchissements de quinze secondes, plusieurs réservations peuvent survenir simultanément. Pour éviter une survente, la validation finale d'une réservation se fait toujours côté serveur, avec une vérification stricte de la capacité restante au moment précis de l'enregistrement, indépendamment de ce que la jauge affichait quelques secondes plus tôt :

```
function compagnie_enregistrer_reservation( $id_representation, $nombre_places ) {
    $places_deja_reservees = (int) get_post_meta( $id_representation, '_places_reservees', true );
    $capacite = (int) get_post_meta( $id_representation, '_capacite_totale', true );

    if ( $places_deja_reservees + $nombre_places > $capacite ) {
        return new WP_Error( 'places_insuffisantes', 'Il ne reste pas assez de places disponibles.' );
    }

    update_post_meta( $id_representation, '_places_reservees', $places_deja_reservees + $nombre_places );
    return true;
}
```

## Ce que ce montage laisse volontairement de côté

Le paiement de la réservation elle-même reste hors du périmètre de ce bloc, traité par un système distinct déjà en place. La jauge se contente d'afficher une information de disponibilité, sans intervenir dans le tunnel de paiement.

- Un arrêt automatique de l'interrogation dès la complétion évite de solliciter le serveur inutilement ;
- La vérification finale de disponibilité se fait toujours au moment de l'enregistrement, jamais sur la base de l'affichage précédent ;
- Aucune plateforme de billetterie tierce n'intervient, la compagnie gardant l'intégralité de la relation avec son public sur son propre site.

> Une jauge affichée en quasi temps réel n'a pas besoin d'être exacte à la seconde près : elle a besoin d'être honnête, et la validation finale doit toujours se faire ailleurs qu'à l'écran.

## En résumé

Pour une compagnie qui vend ses propres billets sans plateforme tierce, un bloc interrogeant une route REST toutes les quinze secondes a suffi à donner une impression de mise à jour vivante, tant que la validation finale d'une réservation reste strictement contrôlée côté serveur au moment précis de l'enregistrement.