Discussion :

[OUZFA]

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

[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 ?

[OUZFA]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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;?>

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[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 ?

[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?

[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.

[OUZFA]

Merci eleydet, c'est bien cela.


Mist2024, j'ai essayé ta méthode mais cela n'a pas résolu le problème.