Progression des processus longs en php avec ajax et les EventSource

Étape 1 : Création du formulaire HTML

Nous allons d'abord concevoir un formulaire simple :

<form id="process-form" action="startProcess.php" method="post">
    <input type="text" name="parametre" placeholder="Entrez une valeur" />
    <button type="submit">Démarrer</button>
</form>

Puis nous devons ajouter le lien vers le code à exécuter côté client :

<script src="ajax-submit-form.js"></script>

Étape 2 : Envoi des paramètres en AJAX

Le JavaScript capture l'événement et envoie les données :

document.getElementById("process-form").addEventListener("submit", function(event) {
    event.preventDefault();
    fetch("startProcess.php", {
        method: "POST",
        body: new FormData(this)
    }).then(response => response.json())
      .then(data => console.log("Processus démarré", data));
});

Il est possible si on utilise jquery de jaire appel à $.ajax :

$('#process-form').submit(function(event) {
    event.preventDefault();
    $.ajax({
        url: 'startProcess.php',
        type: 'POST',
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function(data) {
            console.log('Processus démarré', data);
        },
        error: function(xhr, status, error) {
            console.error('Erreur lors de l\'envoi du formulaire :', status, error);
        }
    });
});

Lancement du traitement PHP

Le PHP exécute la tâche et envoie des mises à jour :

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Le serveur envoie des mises à jour sur la progression du processus.
for ($i = 0; $i <= 100; $i += 10) {
    // Envoi des données sous forme d'événement, chaque message commence par 'data:'
    // Cela permet au client de reconnaître les messages comme étant des événements à traiter.
    echo "data: " . json_encode(["progress" => $i]) . "
 
";
    ob_flush(); // Vide le tampon de sortie et envoie le contenu au client
    flush();    // Assure que le contenu est effectivement envoyé au client
    sleep(1);   // Pause pour simuler la progression du traitement
}
?>

EventSource (ou ESS pour Server-Sent Events) est une technologie permettant au serveur d'envoyer des données en continu vers le client via une connexion HTTP persistante. Contrairement à AJAX, où le client envoie des requêtes régulières, avec l'EventSource, c'est le serveur qui envoie les données en temps réel, ce qui est plus efficace pour des mises à jour en continu (comme pour la progression d'un processus).

Sur la ligne echo "data: " . json_encode(["progress" => $i]) . "\n\n"; :

• data: est un préfixe nécessaire pour que l'événement envoyé au client soit compatible avec l'EventSource. Ce préfixe permet de signaler au client que la donnée qui suit est un message à traiter.
• Le format des données envoyées doit respecter ce préfixe data: suivi des données encodées en JSON. Dans cet exemple, on envoie un objet JSON contenant la progression sous forme de pourcentage ("progress" => $i).
• Chaque message envoyé par le serveur doit être suivi de \n\n pour être correctement interprété par l'EventSource.
  Ici comme on initie l'appel depuis ajax, on ne récupère les messages qu'en un seul bloc, donc la séparation avec les retours à la ligne aide beaucoup.
  Plus tard dans la partie avec les évènements, si le serveur est mal configuré ou ne prend pas en charge, le flush risque de ne pas se faire et au lieu de récupérer un seul json on doit traiter une chaîne de caractère qui contient plsusieurs json à la suite, séparés par ces retours à la ligne.

Explication générale des envois depuis le serveur :

Que vous capturiez les résultats en un seul bloc après l'appel $.ajax() ou que vous écoutiez les événements via onmessage, la méthode utilisée pour envoyer les données du côté serveur sera toujours la même. Les données seront envoyées sous forme d'événements préfixés par data:, que ce soit dans le cas d'un EventSource ou d'un appel AJAX. Ce mécanisme assure que le client pourra traiter les données de manière uniforme, peu importe le mode de récupération choisi.

Étape 4 : Mise en place de l'EventSource

Il faut ajouter à notre page le lien vers un nouveau script :

<script src="events-listener.js"></script>

Le navigateur écoute les événements :

const eventSource = new EventSource("progress.php");
eventSource.onmessage = function(event) {
    console.log("Progression : ", event.data.progress);
};

Étape 5 : Mise à jour dynamique de la page

Enfin, nous affichons la progression :

eventSource.onmessage = function(event) {
    document.getElementById("progress-bar").style.width = event.data.progress + "%";
};

Grâce à cette méthode, l'utilisateur peut voir en temps réel l'évolution du traitement.

Le principe

Dans une application web, lorsque vous envoyez des données au serveur, vous devez d'abord récupérer ces informations, puis les envoyer pour traitement. Cependant, pour des processus longs, l'attente de la réponse du serveur peut rendre l'interface utilisateur lente. C'est pourquoi il est préférable de séparer l'envoi du formulaire et l'écoute des événements de progression. Les deux méthodes suivantes sont souvent utilisées :

• AJAX est très utile pour envoyer des données au serveur et obtenir une réponse en un seul bloc. Cependant, une fois la demande envoyée, AJAX récupère une réponse complète (généralement après que tout le processus est terminé).
• onmessage, par contre, est utilisé pour écouter des événements envoyés par le serveur en temps réel. Cette méthode ne permet pas de récupérer les informations envoyées par le formulaire, sauf si vous les incluez dans l'URL en GET, ce qui présente des limitations (comme la taille de l'URL et des risques de sécurité).

Pour aller plus loin

La séparation des préoccupations entre l'envoi des données et l'écoute des événements de progression d'une tâche permet d'éviter de bloquer le processus et d'améliorer l'expérience utilisateur. Voici une explication détaillée des deux approches :

• AJAX permet une soumission de formulaire asynchrone, où les données sont envoyées au serveur en une seule requête HTTP, et la réponse est récupérée dans son ensemble après le traitement. Cela signifie que le serveur effectue tout le travail et renvoie un seul bloc de données. C'est une solution simple et efficace pour des tâches qui ne nécessitent pas de suivi en temps réel, mais le client ne peut pas recevoir de mises à jour progressives. Il doit attendre que tout le processus soit terminé. Par exemple, l'envoi d'un formulaire avec $.ajax() :

        $.ajax({
            url: 'startProcess.php',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                console.log("Processus terminé : ", response);
            }
        });
    

• onmessage permet d'écouter les événements en temps réel via un EventSource. Cependant, cette méthode ne peut pas récupérer les données envoyées initialement dans le formulaire. Pour transmettre ces informations à l'EventSource, une solution serait d'utiliser des paramètres en GET dans l'URL, mais cela présente des risques, notamment :
• Limitation de taille d'URL : Les navigateurs ont une limite de taille d'URL (souvent autour de 2000 caractères). Si vous devez transmettre de grandes quantités de données via l'URL, cela peut poser problème.
• Problèmes de sécurité : Passer des informations sensibles dans l'URL via GET peut être risqué, car les données sont visibles dans la barre d'adresse et peuvent être interceptées ou stockées dans les journaux serveur.

        const eventSource = new EventSource("progress.php?parametre=valeur");
        eventSource.onmessage = function(event) {
            console.log("Progression : ", event.data);
        };
    

Ainsi, bien que $.ajax() offre un moyen simple d'envoyer les données et récupérer une réponse après le traitement, onmessage fournit une solution plus souple pour écouter des événements en temps réel. Toutefois, la combinaison des deux méthodes permet de maximiser la réactivité de l'application, en envoyant les données via AJAX et en écoutant la progression via EventSource.