11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un module qui liste les membres connecté. La liste des membres peut se mettre à jour que lors d'un rafraichissement de la page.

Comment puis-je faire pour que lorsque qu'un membre se connecte ou se déconnecte, tous les autres membres le voient sans passer par le rafraichissement de la page.

Je suppose que je peux arriver à ce résultat avec de l'AJAX, si possible je préfère implémenter la fonction avec le framework JQuery (c'est plus simple).

Pouvez-vous me mettre sur la piste, je n'arrive pas à commencer.
Est-ce que c'est possible ?

Merci par avance pour votre aide.
Modifié par ggouhier (25 Mar 2010 - 17:28)
Il te suffit d'isoler le code qui te sert à lister les membres connectés, et retravailler la "vue".
C'est à dire qu'au lieu de renvoyer le résultat inclue dans l'ensemble de ta page, tu crées une page php qui te permettra de récupérer les informations dans un format brut (de préférence) comme en JSON, XML, ou même HTML.

Ensuite il ne te reste plus qu'à effectuer une requête Ajax avec jQuery (ou pas) selon un intervalle défini.

$membres = array(
   1 => array(
      'nom' => 'ggouhier',
      'sexe' => 'm',
   ),
   2 => array(
      'nom' => 'bgy',
      'sexe' => 'm',
   ),
);

echo json_encode($membres);


renverra quelque chose comme

{
  1:
     { 
        nom: 'ggouhier',
        sexe: 'm'
     },
  2:
     {
        nom: 'bgy',
        sexe: 'm'
     }
};


ensuite, tu n'as plus qu'à injecter ses données là où tu veux dans le DOM.
D'accord, merci pour ton aide (désolé du retard ...)

Il y a une chose que je n'arrive pas à saisir,

Qu'elle est l'événement qui va enclencher l'injection des données dans le DOM

Par exemble un utilisateur x est connecté, il voit sa liste de membre favoris connecté, un d'eux se déconnecte et à ce moment précis qu'elle est " l'événement " que je peux utiliser pour enclencher la mise à jour du DOM de l'utilisateur x ?

J'espére que j'ai été compréhensible.

Encore merci bgy.
En fait il te suffit d'effectuer une boucle et d'envoyer une requête au serveur à un certain intervalle pour vérifier s'il y a du changement.
Pour éviter une mise à jour inutile du DOM s'il n'y aucun changement, tu peux utiliser un hash de tes données.
Si le hash change, c'est qu'il y a eu de l'activité, sinon, on ne change rien.

Tu peux utiliser la fonction setTimeout en Javascript pour cela, pour jQuery il existe un plugin appellé jQuery Timers.