Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Tchat Ajax]Scroll & Rafraichissement

    10 juillet 2011 à 1:54:08

    Ben, suffit de passer l'id de session dans ta requête ;)
    • Partager sur Facebook
    • Partager sur Twitter
      10 juillet 2011 à 2:09:45

      Hum, il est tard j'ai le ciboulot qui tourne au ralenti, si j'ai bien compris...

      - Je fais ma requête des messages
      - Le serveur me renvoi les messages et stocke dans une session l'id du dernier message, et renvoi également l'id de la session (session_id() ?) par exemple en faisant un [sessid_XXX] avant l'echo des messages, que je supprime avec une Regex côté client en JS.
      - Je récupère l'id de session dans une variable, que je renvoi en get dans la fonction mise en setTimeout afin de voir si les id correspondent.
      • Partager sur Facebook
      • Partager sur Twitter
        10 juillet 2011 à 2:13:59

        voilà...

        'fin, tu renvoies l'id de session à chaque requête d'écriture/lecture/etc.
        • Partager sur Facebook
        • Partager sur Twitter
          10 juillet 2011 à 2:17:34

          C'est juste pour l'affichage non ?

          Même si j'écris, vu que ça s'actualise toutes les secondes, j'aurais toujours en session l'id du dernier message affiché, donc ça ne pose pas de problème ?

          Sinon pour l'affichage, je pensais :
          puisque de toute façon il y aura toujours une session d'active pour quiconque affiche les messages, peut être dans ma requête d'affichage n'afficher que les messages dont l'id est supérieur à l'id stocké en session ?
          • Partager sur Facebook
          • Partager sur Twitter
            10 juillet 2011 à 2:23:56

            Si c'est juste pour l'affichage, comment fais-tu pour savoir qui envoie un message? pas besoin de l'id de session, t'es sûr? ^^

            oui, c'est exactement ce que je voulais dire. ;)
            • Partager sur Facebook
            • Partager sur Twitter
              10 juillet 2011 à 2:32:49

              En fait, voici la sécurité membre employée pour mon tchat :

              Le membre rempli un formulaire de connexion, et si les infos sont bonnes, le serveur renvoi OK-SESSID-[Pseudo]

              Je génère manuellement un sessid, qui est stocké en BDD, et je récupère le sessid et le pseudo via Regexp côté client, que je stocke dans des cookies, et ces infos sont envoyés dans des inputs hidden à chaque envoi de message, comme ça pas de fraude possible pour usurper un autre membre.
              • Partager sur Facebook
              • Partager sur Twitter
                10 juillet 2011 à 2:39:47

                Voilà mais tu n'as pas besoin d'inputs hidden, puisque tu passes par Ajax.

                Note que tes cookies risquent de ne pas passer non-plus, si les vraies sessions ne passent pas.
                • Partager sur Facebook
                • Partager sur Twitter
                  10 juillet 2011 à 2:48:54

                  Oui je ne sais plus en fait si j'ai pris directement la valeur des cookies ou si j'ai caché dans des hiddens x')

                  Là je vais tester avec la session, en tout cas mes cookies passent bien, la connexion et la sécurité fonctionnent bien.
                  • Partager sur Facebook
                  • Partager sur Twitter
                    10 juillet 2011 à 3:00:11

                    Si les cookies de sessions ne passent pas, stockes les infos dans des variables et tu les ajoutes à la string de ta requête ;)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      10 juillet 2011 à 3:03:31

                      Là j'ai réussi à créer une session sur le serveur, et j'ai fait un vérif si le $_GET['sessid'] == session_id(), et si ils sont égaux je mets à jour $_SESSION['id_last'], qui est l'ID du dernier message chargé.

                      C'est la bonne démarche ?
                      • Partager sur Facebook
                      • Partager sur Twitter
                        10 juillet 2011 à 3:13:23

                        Est-ce que, côté client, un cookie de session est créé?
                        • Partager sur Facebook
                        • Partager sur Twitter
                          10 juillet 2011 à 3:23:32

                          Là ça bug, si je reste sur la page des messages côté serveur j'ai bien le sess_id et l'id du dernier message affiché, mais maintenant le hic c'est avec Ajax...

                          Sinon non, je récupère le sess_id via Regex et je le re-transmets par variable GET
                          • Partager sur Facebook
                          • Partager sur Twitter
                            10 juillet 2011 à 3:31:48

                            Montre ton code, stp... (html,js et php)

                            ce sera plus facile, pour voir ce qui bug
                            • Partager sur Facebook
                            • Partager sur Twitter
                              10 juillet 2011 à 3:38:25

                              Le JS en test :
                              function edit_msg()
                               {
                                  var xdr = getXDomainRequest();
                              	var salon = (!getCookie('saloon')) ? 'general' : getCookie('saloon');
                              	
                              	xdr.onload = function() {
                              		    var regex = /^session_id\[(.+)\]/;
                              	  		var sessid = xdr.responseText.replace(regex, "$1");
                              			var regex2 = /^session_id\[.+\]/;
                              	  		var content = xdr.responseText.replace(regex2, "");
                              			if(!regex2.test(xdr.responseText)) document.getElementById('content-tchat').innerHTML+=content;
                              	actualize = setTimeout(edit_msg, 1000);
                              	}
                              	
                              	xdr.open('GET', 'http://webitchat.s-p.fr.nf/webimsg2.php?v=1.0.3&salon='+salon+'&sessid='+sessid);
                              	xdr.send();
                               }
                               
                              function affiche_msg()
                               {
                              	var xdr = getXDomainRequest();
                              	var salon = (!getCookie('saloon')) ? 'general' : getCookie('saloon');
                              	var objDiv = document.getElementById("content-tchat");
                              	
                              	xdr.onload = function() {
                              		    var regex = /^session_id\[.+\]/;
                              	  		var content = xdr.responseText.replace(regex, "");
                              			document.getElementById('content-tchat').innerHTML=content;
                              	objDiv.scrollTop = objDiv.scrollHeight;
                              	edit_msg();
                              	}
                              	
                              	xdr.open('GET', 'http://webitchat.s-p.fr.nf/webimsg2.php?v=1.0.3&salon='+salon);
                              	xdr.send();
                              	
                               }
                              


                              Le PHP :
                              <?php
                               session_start();
                               header("Content-type: text/plain");
                               header("Access-Control-Allow-Origin: *");
                               
                                try
                                {
                              	//Connexion BDD
                                }
                                catch (Exception $e)
                                 {
                              	 die('Erreur : '. $e->getMessage());
                                 }
                                
                                 // Vérif blacklist
                              	 $QIsBanned = $bdd->prepare('SELECT * FROM blacklist WHERE ip_banned = :ip');
                              	 $QIsBanned->execute(array('ip' => $_SERVER['REMOTE_ADDR']));
                              	 $IsBanned = $QIsBanned->fetch();
                              	 $QIsBanned->closeCursor();
                              	  if($IsBanned)
                              	   {
                              		   exit('Vous êtes banni, merci de régulariser votre situation <a href="http://bildberg.eu/banned.php">ICI</a>');
                              	   }
                                if(empty($_GET['v']) OR $_GET['v'] != '1.0.3') exit('Votre version de WebiTchat n\'est pas à jour, téléchargez la dernière :<br /><a href="http://webitchat.s-p.fr.nf/webitchat.zip">TELECHARGER</a>');
                                
                                $salon = ($_GET['salon'] == 'general' OR $_GET['salon'] == 'jeux' OR $_GET['salon'] == 'program') ? $_GET['salon'] : 'general';
                                
                                $i = 0;
                                if(session_id() == $_GET['sessid']) $QAfficheMsg = $bdd->query('SELECT * FROM messages WHERE salon="'.$salon.'" AND id > '.$_SESSION['id_last']);
                                else $QAfficheMsg = $bdd->query('SELECT * FROM messages WHERE salon="'.$salon.'" ORDER BY id');
                                 if(session_id() == $_GET['sessid']) echo "session_id[".session_id()."]";
                                 if(!isset($_SESSION['id_last']))
                                  { 
                              	  $_SESSION['id_last'] = 0;
                              	  echo "session_id[".session_id()."]";
                              	}
                                 if($QAfficheMsg->rowCount() > 0) {
                                 while($msg = $QAfficheMsg->fetch())
                                  {
                              		$message = nl2br(htmlspecialchars(stripslashes($msg['message'])));
                              		
                              		//BBCode
                              		?>
                                      <div style="font-size:12px;padding: 2px 2px 2px 2px; border:1px solid black;<?php if($i != 0) { ?>border-top:none;<?php } ?>">
                                      De <strong><?php echo htmlspecialchars($msg['posteur']); ?></strong> <small>- <?php echo str_replace('x', 'à',date("d/m/Y x H:i:s", $msg['d_post'])); ?></small>:<br />
                              		 <?php echo $message; ?>
                                      </div>
                                      <?php
                              	   $i++;
                              	   $lastmsg = $msg['id'];
                              	} 
                                 //MAJ ID
                                 $_SESSION['id_last'] = $lastmsg;
                                 }
                              ?>
                              


                              Là c'est l'actualisation qui bug (et au passage le scroll aussi), quand je suis sur webimsg2.php directement, ça fonctionne comme je le veux, mais sur le tchat il semblerait qu'il n'y ait que affiche_msg() qui soit fait (pas d'actualisation)
                              • Partager sur Facebook
                              • Partager sur Twitter
                                10 juillet 2011 à 3:45:37

                                Ben, logique, c'est ton affiche_msg qui doit avoir un timeout, pas edit_msg

                                Ensuite, n'ajoute pas tes messages avec innerHTML mais en DHTML
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  10 juillet 2011 à 3:50:25

                                  Ca ne fonctionne toujours pas, et n'est-ce pas la fonction que l'on veut faire tourner en boucle dans laquelle on doit mettre le setTimeout ?

                                  Car affiche_msg() initialise les messages, puis appelle edit_msg(), qui sera répétée en boucle et prendra en compte le sessid pour n'afficher que les nouveaux messages.

                                  Edit : pour le DHTML je corrigerai ça dès que ce soucis sera réglé, mieux vaut corriger les fonctionnalités avant de les optimiser x')

                                  Edit :
                                  Je me demande aussi si ce n'est pas la session qui bug, en actualisant la page directement, ça fonctionne, mais si j'intègre le sessid dans la requête Ajax ça me rajoute en boucle les messages, alors que quand je vais sur l'URL directement et que j'actualise ça ne m'affiche bien rien si il n'y a pas de nouveaux messages

                                  Edit 10.07.11 :
                                  Il semblerait que ce soit la session qui bug, quand je récupère le sess_id depuis le Tchat, l'ID change à chaque fois.
                                  Je vais procéder avec le sess_id déjà créé et ajouter une colonne "last_id" en BDD :)


                                  EDIT 10.07.11 - Changement
                                  J'ai finalement réussi à faire que seuls les messages qui ont été ajoutés se mettent en plus dans le contenu.
                                  Mais me revoilà donc au problème de scroll :
                                  - Premier problème; quand un message est ajouté le scroller ne redescend pas.
                                  Evidemment, c'est le comportement désiré afin de pouvoir se balader et copier-coller, mais ça ne devrait se faire que si la position du scroll est déjà tout en bas.
                                  J'ai essayé de faire une condition avec soustractions etc mais ça n'a pas marché...
                                  - Second problème; je ne vois pas comment stopper le retour en bas quand on se ballade, car il semblerait que même si je ne fais que rajouter des messages, il y a une actualisation et ça redescend toujours en bas.
                                  Comment avec event.clientX etc puis-je vérifier que la souris n'est pas dans la zone content-tchat afin de ne pas redescendre le scroller dans ce cas-là ?

                                  Voici le code mis à jour
                                  function edit_msg()
                                   {
                                      var xdr = getXDomainRequest();
                                  	var salon = (!getCookie('saloon')) ? 'general' : getCookie('saloon');
                                  	var sessid = getCookie('id');
                                  	var objDiv = document.getElementById('content-tchat');
                                  	var scrollHeight = objDiv.scrollHeight;
                                  
                                  	xdr.onload = function() {
                                  			document.getElementById('content-tchat').innerHTML+=xdr.responseText;
                                  			var diffScroll = objDiv.scrollHeight - scrollHeight;
                                  			if(objDiv.scrollTop == objDiv.scrollHeight-diffScroll) objDiv.scrollTop = objDiv.scrollHeight;
                                  	actualize = setTimeout(edit_msg, 1000);
                                  	}
                                  	
                                  	xdr.open('GET', 'http://webitchat.s-p.fr.nf/webimsg2.php?v=1.0.3&salon='+salon+'&sessid='+sessid);
                                  	xdr.send();
                                   }
                                   
                                  function affiche_msg()
                                   {
                                  	var xdr = getXDomainRequest();
                                  	var salon = (!getCookie('saloon')) ? 'general' : getCookie('saloon');
                                  	var objDiv = document.getElementById("content-tchat");
                                  	var sessid = getCookie('id');
                                  	
                                  	xdr.onload = function() {
                                  			document.getElementById('content-tchat').innerHTML=xdr.responseText;
                                  	objDiv.scrollTop = objDiv.scrollHeight;
                                  	edit_msg();
                                  	}
                                  	
                                  	xdr.open('GET', 'http://webitchat.s-p.fr.nf/webimsg2.php?v=1.0.3&salon='+salon+'&sessid='+sessid+'&lastid=0');
                                  	xdr.send();
                                  	
                                   }
                                  


                                  Code PHP :
                                  <?php
                                   header("Content-type: text/plain");
                                   header("Access-Control-Allow-Origin: *");
                                   
                                    try
                                    {
                                  	//Connexion BDD
                                    }
                                    catch (Exception $e)
                                     {
                                  	 die('Erreur : '. $e->getMessage());
                                     }
                                    
                                     // Vérif blacklist
                                  	 $QIsBanned = $bdd->prepare('SELECT * FROM blacklist WHERE ip_banned = :ip');
                                  	 $QIsBanned->execute(array('ip' => $_SERVER['REMOTE_ADDR']));
                                  	 $IsBanned = $QIsBanned->fetch();
                                  	 $QIsBanned->closeCursor();
                                  	  if($IsBanned)
                                  	   {
                                  		   exit('Vous êtes banni, merci de régulariser votre situation <a href="http://bildberg.eu/banned.php">ICI</a>');
                                  	   }
                                    if(empty($_GET['v']) OR $_GET['v'] != '1.0.3') exit('Votre version de WebiTchat n\'est pas à jour, téléchargez la dernière :<br /><a href="http://webitchat.s-p.fr.nf/webitchat.zip">TELECHARGER</a>');
                                    
                                    $salon = ($_GET['salon'] == 'general' OR $_GET['salon'] == 'jeux' OR $_GET['salon'] == 'program') ? $_GET['salon'] : 'general';
                                    
                                    $i = 0;
                                     //Vérif Last_ID
                                     $QLast_ID = $bdd->prepare('SELECT * FROM membres WHERE sess_id = :sessid');
                                     $QLast_ID->execute(array('sessid' => $_GET['sessid']));
                                     $Last_ID = $QLast_ID->fetch();
                                    if(!empty($Last_ID) AND $Last_ID['last_id'] != 0 AND !isset($_GET['lastid']))
                                     {
                                  	   $QAfficheMsg = $bdd->query('SELECT * FROM messages WHERE salon="'.$salon.'" AND id > '.$Last_ID['last_id']);
                                     }
                                    else $QAfficheMsg = $bdd->query('SELECT * FROM messages WHERE salon="'.$salon.'" ORDER BY id');
                                     if($QAfficheMsg->rowCount() > 0) {
                                     while($msg = $QAfficheMsg->fetch())
                                      {
                                  		$message = nl2br(htmlspecialchars(stripslashes($msg['message'])));
                                  		
                                  		/BBCOde
                                  		?>
                                          <div style="font-size:12px;padding: 2px 2px 2px 2px; border:1px solid black;<?php if($i != 0 OR $i == $QAfficheMsg->rowCount()-1) { ?>border-top:none;<?php } ?>">
                                          De <strong><?php echo htmlspecialchars($msg['posteur']); ?></strong> <small>- <?php echo str_replace('x', 'à',date("d/m/Y x H:i:s", $msg['d_post'])); ?></small>:<br />
                                  		 <?php echo $message; ?>
                                          </div>
                                          <?php
                                  	   $i++;
                                  	   $lastmsg = $msg['id'];
                                  	} 
                                     //MAJ ID
                                       $QUPDLastId = $bdd->prepare('UPDATE membres SET last_id='.$lastmsg.' WHERE sess_id = :sessid');
                                  	 $QUPDLastId->execute(array('sessid' => $_GET['sessid'])) or die(print_r($QUPDLastId->errorInfo()));
                                  	  $QUPDLastId->closeCursor();
                                     }
                                  ?>
                                  
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    10 juillet 2011 à 18:50:23

                                    Le plus simple, c'est d'ajouter une propriété à ta fenêtre de chat.

                                    true si onmouseover
                                    false dans le cas contraire

                                    si true -> pas scroll
                                    si false -> scroll
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      10 juillet 2011 à 20:05:19

                                      En gros je rajoute juste avec addEventListener l'évènement mouseover dans lequel je mets une variable true = scroll
                                      et je mets aussi mouseout dans laquelle la variable vaut false et dans ce cas objDiv.scrollTop ne prendra pas la valeur objDiv.scrollHeight ?
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        10 juillet 2011 à 20:50:41

                                        // initialisation
                                        objDiv.doitScroller=true;
                                        
                                        
                                        // à la réponse xhr
                                        if(objDiv.doitScroller==true){
                                        	objDiv.scrollTop+=objDiv.offsetHeight;
                                        }
                                        


                                        ensuite, avec tes events, tu modifies objDiv.doitScroller
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          10 juillet 2011 à 22:53:50

                                          Parfait, tout simplement parfait !
                                          A la place du += objDiv.offsetHeight;
                                          j'ai mis = objDiv.scrollHeight;

                                          Par contre pour le copier-coller j'ai un problème, j'ai essayé de stopper l'actualisation onmousedown, et je pense vérifier si il y a une sélection onmouseup, si non on fait edit_msg(); si oui on ne fait rien et on attend onmouseout.

                                          Voici le code que j'ai essayé : ça ne se réactualise plus ><
                                          document.getElementById('content-tchat').addEventListener('mousedown', function() {
                                          											      clearTimeout(actualize);
                                          											  }, false);
                                          document.getElementById('content-tchat').addEventListener('mouseup', function() {
                                                                                                                                   //Vérif sélection avec ce qu'il y a dans ce tuto : http://www.siteduzero.com/tutoriel-3-34703-insertion-de-balises-dans-une-zone-de-texte.html
                                                                                                                                   if(!selection)//Pas dans le code testé
                                          											    edit_msg();
                                          											}, false);
                                          
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            10 juillet 2011 à 23:03:15

                                            Mais non, pourquoi empêcher l'actualisation?
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              10 juillet 2011 à 23:19:41

                                              Même avec le fait de rajouter les nouveaux messages, quand on tente de sélectionner, même si le scroll ne redescend pas, la sélection s'efface :/
                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                10 juillet 2011 à 23:26:51

                                                Normal... car il y a perte de focus...
                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  10 juillet 2011 à 23:37:33

                                                  Donc il suffit que je fasse objDiv.focus() à chaque actualisation ? :D
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    10 juillet 2011 à 23:46:58

                                                    Ben, non, sauf pitêt avec des selected.textRange mais suis pas sûr que ça marcherait... à essayer. ;)
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      11 juillet 2011 à 0:02:53

                                                      TextRange c'est ce qui est employé dans le tuto des balises ?

                                                      Il faut capturer la sélection et lui appliquer select(); ?
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        11 juillet 2011 à 0:28:23

                                                        Oui, c'est bien cela... mais pour l'utilisation, à toi de vérifier, pour moi, ça date de trop longtemps... :-$
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter

                                                        [Tchat Ajax]Scroll & Rafraichissement

                                                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                        • Editeur
                                                        • Markdown