XMLHttpRequest realtime sans reload

Version imprimable

10/10/2025, 10h26
OUZFA

XMLHttpRequest realtime sans reload

Bonjour

Je suis en train de créer jeu (quiz) qui doit fonctionner de la manière suivante :

* L'animateur fait défiler des cartes comprenant des images avec des questions sur sa page (en cliquant sur un bouton, il passe d'une image (+question) à une autre et ainsi de suite)

* Les mêmes images doivent apparaitre sur les pages des participants en temps réel. Il doivent répondre à la question au bout d'un certain temps (compteur)

J'ai utilisé XMLHttpRequest GET (en combinaison avec PHP et MySql). Cela marche. Problème : je dois à chaque fois rafraîchir la page du participant pour que l'image (+ question) se mette à jour. Sachant que le numéro d'image (1,2,3,4......etc) sur la page des participants change bien en temps réel.

Y'a-t-il une solution qui permette le défilement des images en même temps que sur la page de l'animateur (immédiatement et en temps réel) ?

Merci
10/10/2025, 11h08
Pytet

Bonjour,

Tu dois pouvoir changer l'image sans rafraichir la page de la même manière que tu change le numéro de l'image, mais impossible de savoir ce qui te bloque sans un exemple concret.
Essaye de partager un exemple reproductible et/ou montre nous comment tu changes le numéro et l'image du participant.

Des erreurs dans la console javascript du navigateur ?

Merci Pytet

Sur la page organisateur, lorsque l'on clique sur un bouton pour afficher l'image, le numéro de l'image est envoyé à la BD Mysql. Ensuite le numéro est récupéré dans un span et c'est ce span qui s'affiche immédiatement sur la page participant.
J'utilise ce numéro pour l'attribuer à la source de l'image (image1,image2,image3....). Les images sont dans un fichier sur le serveur et sont appelées suivant le numéro récupéré de la page organisateur.

Voici le code :
HTML

Code:

1
2
3
4
5
6
7
<div id="div_recupere_image" style="width: 600px;height: 600px"><img src="" id="image_recuperee" style="width: 200px;height: 200px"></div>
<div id="div_recupere_page_organisateur" style="height: 100vh"></div>
<?php foreach($resultat_numeros_images as $donnee_numeros_images):?>
<span class="class_affiche_donnee_numero_image" style="color:black;font-size: 14px;"><?=$donnee_numeros_images['numero_image']?></span>
</span>
<br/>
<?php endforeach;?>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fonction_recupere_page_organisateur() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("div_recupere_page_organisateur").innerHTML = this.responseText;
      var class_span_donnee_image = document.getElementsByClassName('class_affiche_donnee_numero_image');
      let longueur_class_span_donnee_image = class_span_donnee_image.length - 1;
      let numero_image = class_span_donnee_image[longueur_class_span_donnee_image].innerHTML;
      document.getElementById("image_recuperee").src = 'xxxxx/image_' + numero_image + '.jpg';
    }
  };
  xhttp.open("GET", "page_organisateur.php?");
  xhttp.send();
}
setInterval(fonction_recupere_page_organisateur, 1000);

12/10/2025, 13h24
OUZFA

Bonjour
j'ai réussi à résoudre le problème en ne récupérant que la classe des spans ou j'ai stocké le numéros des images avec (document.getElementsByClassName) et en attribuant le innerHTML du dernier élément de cette classe à la src de l'image sur la page participant.

Nouveau souci : cela change immédiatement l'image sur 2 postes(mon ordinateur sur lequel il y a le code et une page participant, et une tablette où se trouve aussi la page participant). Un troisième poste (ordinateur) où se trouve également la page participant ne réagit que si je recharge la page, pourtant le numéro de l'image charge immédiatement.

Pourriez-vous m'aider svp ?
12/10/2025, 16h05
eleydet

Bonjour,

J'imagine que l'animateur manipule une page web différente de celles des participants.
Lorsque l'animateur fait défiler une image, cela modifie en suivant le contenu d'un fichier sur le serveur.
Les pages web des participants lisent régulièrement le contenu de ce fichier, avec un setInterval() par exemple, et se mettent à jour le cas échéant.

Ai-je bien compris?
12/10/2025, 16h19
Mist2024

Je pense que le problème est lié au délai d’expiration des images placées dans le cache

essaie de placer un paramètre aléatoire dans l'url

page_organisateur.php?tik= random.
22/10/2025, 12h45
OUZFA

Merci eleydet, c'est bien cela.

Mist2024, j'ai essayé ta méthode mais cela n'a pas résolu le problème.
22/10/2025, 18h02
NoSmoking

Bonjour,

Citation:

Merci eleydet, c'est bien cela.

certes mais est ce que cela fonctionne, sinon qu'est ce qui te pose problème ?
22/10/2025, 18h41
OUZFA

Salut NoSmoking
J'ai voulu dire que c'était bien cela que je souhaitais faire : L'animateur change les questions et les images sur sa page. Les participants reçoivent immédiatement les questions et les images sur leurs pages (en temps réel ). Tout ce fait l'animateur est reçu et vu par les participants, y compris les images qui changent (mon problème est avec les images qui ne changent pas chez les participants même quand elles changent sur la page de l'animateur.
24/10/2025, 09h54
OUZFA

Bonjour à tous
N'y a-t-il pas moyen de changer une photo sur les pages des participants en même temps qu'elle change sur la page de l'animateur ?
24/10/2025, 20h12
NoSmoking

Lorsque l'animateur change d'image, ou autre, la modification est enregistrée dans un fichier, encours.php par exemple.
Sur les pages des participants on fait une requête régulière (*) du fichier encours.tmp et on affiche au retour.

(*) setInterval, long polling, Server Sent Events ...
27/10/2025, 08h02
OUZFA

Bonjour à tous
le problème est résolu. J'ai utilisé DOMParser().parseFromString et surtout j'ai mis le fetch de la BDD MysQl sur une page séparée (comme l'a bien conseillé NoSmoking) alors qu'avant il était sur la même page de l'animateur. Maintenant, les pages des participants vont chercher les éléments depuis cette page séparée via DOMParser().parseFromString.

Merci beaucoup à tous.;)