Partage

[Chatbox] Refresh et ancres

20 mars 2011 à 16:20:23

Bonjour les zéro !

Donc j'ai réalisé une chatbox à partir d'un tuto, la voici :

<?php
session_start();

                include("./global/init.php");

		$infoscb = lire_infos_utilisateur($_SESSION['id']);
		$pseudo = stripslashes($infoscb['nom_utilisateur']);

//
// Notre fonction PHP pour afficher les messages :
//

function afficher()
{
        $reponse = new xajaxResponse();// Cr�ation d'une instance de xajaxResponse pour traiter les r�ponses serveur.
        $chat = '';// Initialisation de la variable $chat.
        $fichier_texte = fopen('./chat.txt', 'r');// On ouvre notre fichier texte en lecture seule.
        $chat = fread($fichier_texte, filesize('./chat.txt'));// On lit notre fichier et on stocke son contenu dans la variable $chat
        fclose($fichier_texte);//On ferme notre fichier texte.   
        $reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace le contenu du div 'block' par le contenu de $chat
        return $reponse;
}

//
// Notre fonction PHP envoyer pour envoyer un message :
//
function envoyer($posteur, $message)
{
        $reponse = new xajaxResponse();//Cr�ation d'une instance de xajaxResponse pour traiter les r�ponses serveur.
        $fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en �criture seule.
        fwrite($fichier_texte, '<tr style="border-collapse: collapse; width: 800px;"><td class="message" style="width: 800px;"><font color="#ED8900">['. htmlentities(date("H:i:s")) .']</font> - <strong>' . htmlentities($posteur) . ': </strong>' . htmlentities($message) . '</td></tr>');// On stocke le message dans notre fichier.
        fclose($fichier_texte);// On ferme notre fichier texte.
        $reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
        $reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages pour que l'utilisateur voie son message � l'�cran.
        return $reponse;
}

//
// Ouverture de la librairie xajax, instanciation d'un objet de la classe xajax, puis d�claration de nos fonctions PHP.
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax.
$xajax->register(XAJAX_FUNCTION, 'afficher');// On enregistre nos fonctions.
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();// Fonction qui va se charger de g�n�rer le Javascript, � partir des donn�es que l'on a fournies � xAjax APR�S AVOIR D�CLAR� NOS FONCTIONS.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Chat xAjax</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
                th.cb { background: #0000FF; }
                td.cb { background: #FF0000; }
                td.message { background: #00FF00; border: 1px solid black; border-collapse: collapse; }
                </style>
                <?php $xajax->printJavascript(); /* Affiche le Javascript */?>
                <script type="text/javascript">
                var posteur = '<?=$pseudo ?>';
                function refresh()// Code javascript qui va appeler la fonction afficher toutes les 5 secondes.
                {
                        xajax_afficher();
                        setTimeout(refresh, 1000);
                }
                </script>
        </head>
        <body>
                <table style="border-collapse: collapse;"><tr><th class="cb">Chatbox</th></tr>
                <tr><td class="cb"><table style="border-collapse: collapse; width: 800px;"><div id="block" style="height: 200px; overflow: auto;"></div></table></td></tr>
                <tr><th class="cb">
                <form action="">
                          <label><a href="mon-compte.html"><?php echo $pseudo; ?></a></label> | 
                          Message : <input type="text" size="50" id="message" />
                          <input type="submit" value="Envoyer" onclick="xajax_envoyer(posteur, document.getElementById('message').value); return false;" />
                </tr></table>
                </form>
                <script type="text/javascript">
                        refresh();//On appelle la fonction refresh() pour lancer le script.
                </script>
        </body>
</html>

Mon souci est que je ne parvient pas à faire en sorte qu'à chaque actualisation, on affiche le dernier message. Je ne sais pas du tout comment m'y prendre ! :'(

Pourriez vous m'aider s'il vous plait ?

Je vous remercie d'avance !

Tillertan

21 mars 2011 à 11:23:22

Il faut que tu mettes un document.getElementById('block').scrollTop = document.getElementById('block').scrollHeight; lorsque que tu reçois la réponse AJAX.

AraknoProd

21 mars 2011 à 18:39:10

Merci beaucoup, ça marche !
Cependant maintenant quand on veut remonter les messages, a chaque actualisation (5 secondes) on nous remet en bas, donc c'est impossible !

Comment pourrait-on faire pour n'actualiser qu'en cas de nouveau messages ?

Voici mon nouveau code :

<?php
session_start();

                include("./global/init.php");

		$infoscb = lire_infos_utilisateur($_SESSION['id']);
		$pseudo = stripslashes($infoscb['nom_utilisateur']);

//
// Notre fonction PHP pour afficher les messages :
//

function afficher()
{
        $reponse = new xajaxResponse();// Cr�ation d'une instance de xajaxResponse pour traiter les r�ponses serveur.
        $chat = '';// Initialisation de la variable $chat.
        $fichier_texte = fopen('./chat.txt', 'r');// On ouvre notre fichier texte en lecture seule.
        $chat = fread($fichier_texte, filesize('./chat.txt'));// On lit notre fichier et on stocke son contenu dans la variable $chat
        fclose($fichier_texte);//On ferme notre fichier texte.   
        $reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace le contenu du div 'block' par le contenu de $chat
        return $reponse;
}

//
// Notre fonction PHP envoyer pour envoyer un message :
//
function envoyer($posteur, $message)
{
        $reponse = new xajaxResponse();//Cr�ation d'une instance de xajaxResponse pour traiter les r�ponses serveur.
        $fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en �criture seule.
        fwrite($fichier_texte, '<tr style="border-collapse: collapse; width: 800px;"><td class="message" style="width: 800px;"><font color="#ED8900">['. htmlentities(date("H:i:s")) .']</font> - <strong>' . htmlentities($posteur) . ': </strong>' . htmlentities($message) . '</td></tr>');// On stocke le message dans notre fichier.
        fclose($fichier_texte);// On ferme notre fichier texte.
        $reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
        $reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages pour que l'utilisateur voie son message � l'�cran.
        return $reponse;
}

//
// Ouverture de la librairie xajax, instanciation d'un objet de la classe xajax, puis d�claration de nos fonctions PHP.
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax.
$xajax->register(XAJAX_FUNCTION, 'afficher');// On enregistre nos fonctions.
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();// Fonction qui va se charger de g�n�rer le Javascript, � partir des donn�es que l'on a fournies � xAjax APR�S AVOIR D�CLAR� NOS FONCTIONS.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Chat xAjax</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
                th.cb { background: #0000FF; }
                td.cb { background: #FF0000; }
                td.message { background: #00FF00; border: 1px solid black; border-collapse: collapse; }
                </style>
                <?php $xajax->printJavascript(); /* Affiche le Javascript */?>
                <script type="text/javascript">
                var posteur = '<?=$pseudo ?>';
                function refresh()// Code javascript qui va appeler la fonction afficher toutes les 5 secondes.
                {
                        xajax_afficher();
                        document.getElementById('block').scrollTop = document.getElementById('block').scrollHeight;
                        setTimeout(refresh, 5000);
                }
                </script>
        </head>
        <body>
                <table style="border-collapse: collapse;"><tr><th class="cb">Chatbox</th></tr>
                <tr><td class="cb"><table style="border-collapse: collapse; width: 800px;"><div id="block" style="height: 200px; overflow: auto;"></div></table></td></tr>
                <tr><th class="cb">
                <form action="">
                          <label><a href="mon-compte.html"><?php echo $pseudo; ?></a></label> | 
                          Message : <input type="text" size="50" id="message" />
                          <input type="submit" value="Envoyer" onclick="xajax_envoyer(posteur, document.getElementById('message').value); return false;" />
                </tr></table>
                </form>
                <script type="text/javascript">
                        refresh();//On appelle la fonction refresh() pour lancer le script.
                </script>
        </body>
</html>

Quentin01

21 mars 2011 à 19:05:01

Pour actualiser seulement à chaque nouveau message il y pas trente six solutions, soit tu compares les messages que tu as recu précédemment et si c'est les mêmes tu actualises pas. Sinon il te faudra utiliser les Push c'est très pratique pour ce genre d'application.

AraknoProd

21 mars 2011 à 19:13:27

C'est quoi les Push ?
Pourrais-tu m'expliquer un peu stp ou me donner le lien vers un tuto ?

Quentin01

21 mars 2011 à 19:27:14

Les push est un système Javascript permettant d'envoyer des messages sur un "canal" créé préalablement. Ce canal avertit donc le client qui l'écoute qu'il y a eu un nouveau message. Après il existe plusieurs librairie de Push, en autre il y a BeaconPush, ... Par contre je n'ai pas de tutoriel a te proposer.

AraknoProd

21 mars 2011 à 19:40:55

Sinon comment comparer les messages avant et après ? (comment stocker les message d'avant dans une variable et prendre les messages d'après dans une autre variable ?)

Et j'ajoute aussi désolé :
Je voudrais aussi que lorsque l'on écrit : "/delete" par exemple tous les messages sont remplacer par "[pseudo] a supprimé tous les messages !".
Donc une condition du style " if ($mess == "/delete") " je sais faire mais comment ouvrir le fichier "chat.txt" qui stocke tout, et remplacer absolument tout son contenu par un texte ?

Re-merci d'avance ! ^^"

Quentin01

21 mars 2011 à 20:03:46

Pour comparer les messages je ne vois rien d'autre que la bonne vieille méthode du "je stocke les messages dans une variable". Pour le "/delete" c'est pas compliqué, tu fais ce traitement lorsque la personne envoit le message, tu as juste à supprimer tous le contenu de chat.txt et de mettre qu'il a supprimé les messages. Pour ça je te renvois a la fonction fopen qui peut ouvrir un fichier en écrasant son précédent contenu.

Après, faut gérer les droits pour ça, etc. Ca complique donc vite la tache, même si au départ un chat c'est simple.

AraknoProd

21 mars 2011 à 20:46:10

Pour le delete, merci !

Sinon pour l'actualisation, je sais qu'il faut stocker les messages avant et les messages après dans une variable mais comment on pourrait faire ?

Quentin01

21 mars 2011 à 21:18:52

Cela dépend de comment tu comptes t'organiser. Mais il y a des méthodes plus simples qui marche un peu près sur le même principe. Tu stockes la date de dernière modification, et tu regardes si celle ci est celle que tu as récupéré à la dernier actualisation. Ca implique un fichier de plus mais c'est la méthode la plus pratique à mon gout.

AraknoProd

21 mars 2011 à 21:21:57

Ah oui pas bête !
Mais comment peut on relever la date de dernière modification d'un fichier sur notre ftp ?

Quentin01

21 mars 2011 à 21:25:44

... C'est moi où tu le fais exprès o_O

T'es pas censé être à 70% de PHP xD
Enfin blague à part, tu fais comme tu le fais pour récupérer les messages sauf que tu récupére ici un nombre dans un autre fichier ( mieux vaut stocker la date sous forme de timestamp, c'est plus simple après ).

AraknoProd

21 mars 2011 à 21:29:46

Désolé !

Je comprend pas la ?
Je parle de la date de modification du fichier ! Tu sais comme dans windaube il mette "Dernière modification : ???", j'ai pas appris a relever les informations sur un fichier moi 0.0" !

Par exemple aussi, dans les sites qui permettent de gérer les ftp en ligne, il mette dernière modif du fichier etc... C'est beaucoup plus rapide que de faire un stockage de la date avec time(); ?

Quentin01

21 mars 2011 à 21:34:55

Oui c'est vrai que tu peux procéder comme ça. Pour ce faire tu dois utiliser la fonction filemtime

Pour plus d'informations direction la doc PHP.

AraknoProd

21 mars 2011 à 21:54:49

Voilà, j'ai ceci qui marche très bien maintenant je met quel partie du JS en condition ?

Voici mon nouveau code :

<?php
session_start();
include("./includes/identifiants.php");

		$pseudo = stripslashes($_SESSION['pseudo']);
                $nom_fichier = './chat.txt';
                $date_fichier = date("YmdHis", filemtime($nom_fichier));
                $datetime = time();
                $date_actuelle = date("YmdHis", $datetime);

//
// Notre fonction PHP pour afficher les messages :
//

function afficher()
{
        $reponse = new xajaxResponse();// Cr&#65533;ation d'une instance de xajaxResponse pour traiter les r&#65533;ponses serveur.
        $chat = '';// Initialisation de la variable $chat.
        $fichier_texte = fopen('./chat.txt', 'r');// On ouvre notre fichier texte en lecture seule.
        $chat = fread($fichier_texte, filesize('./chat.txt'));// On lit notre fichier et on stocke son contenu dans la variable $chat
        fclose($fichier_texte);//On ferme notre fichier texte.   
        $reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace le contenu du div 'block' par le contenu de $chat
        return $reponse;
}

//
// Notre fonction PHP envoyer pour envoyer un message :
//
function envoyer($posteur, $message)
{
        $reponse = new xajaxResponse();//Cr&#65533;ation d'une instance de xajaxResponse pour traiter les r&#65533;ponses serveur.
        $fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en &#65533;criture seule.
        fwrite($fichier_texte, '<tr style="border-collapse: collapse; width: 800px;"><td class="message" style="width: 800px;"><font color="#ED8900">['. htmlentities(date("H:i:s")) .']</font> - <strong>' . htmlentities($posteur) . ': </strong>' . htmlentities($message) . '</td></tr>');// On stocke le message dans notre fichier.
        fclose($fichier_texte);// On ferme notre fichier texte.
        $reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
        $reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages pour que l'utilisateur voie son message &#65533; l'&#65533;cran.
        return $reponse;
}

//
// Ouverture de la librairie xajax, instanciation d'un objet de la classe xajax, puis d&#65533;claration de nos fonctions PHP.
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax.
$xajax->register(XAJAX_FUNCTION, 'afficher');// On enregistre nos fonctions.
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();// Fonction qui va se charger de g&#65533;n&#65533;rer le Javascript, &#65533; partir des donn&#65533;es que l'on a fournies &#65533; xAjax APR&#65533;S AVOIR D&#65533;CLAR&#65533; NOS FONCTIONS.
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Chat xAjax</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
                th.cb { background: #0000FF; }
                td.cb { background: #FF0000; }
                td.message { background: #00FF00; border: 1px solid black; border-collapse: collapse; }
                </style>

                <?php $xajax->printJavascript(); /* Affiche le Javascript */?>
                <script type="text/javascript">
                var posteur = '<?=$pseudo ?>';
                var date_actuelle = '<?=$date_actuelle ?>';
                var date_fichier = '<?=$date_fichier ?>';
                function refresh()// Code javascript qui va appeler la fonction afficher toutes les 5 secondes.
                {
                        xajax_afficher();
                        document.getElementById('block').scrollTop = document.getElementById('block').scrollHeight;
                        setTimeout(refresh, 5000);
                }
                </script>
        </head>
        <body> <?php echo $date_fichier; ?>
                <table style="border-collapse: collapse;"><tr><th class="cb">Chatbox</th></tr>
                <tr><td class="cb"><table style="border-collapse: collapse; width: 800px;"><div id="block" style="height: 200px; overflow: auto;"></div></table></td></tr>
                <tr><th class="cb">
                <form action="">
                          <label><a href="mon-compte.html"><?php echo $pseudo; ?></a></label> | 
                          Message : <input type="text" size="50" id="message" />
                          <input type="submit" value="Envoyer" onclick="xajax_envoyer(posteur, document.getElementById('message').value); return false;" />
                </tr></table>
                </form>
                <script type="text/javascript">
                        refresh();//On appelle la fonction refresh() pour lancer le script.
                </script>

EDIT : il faudrait aussi rafraichir les variable php "$date_fichier" et "$date_actuelle" toutes les 1 secondes, comment faire ?

(j'ai voulu faire avec des microsecondes "u" mais ça m'afficheait des 0 donc c'est que les microsecondes ne sont pas enregistrée ! lol)

Quentin01

22 mars 2011 à 18:59:48

Pour rafraichir les variables tu peux utiliser ta fonction de refresh actuel pour ce faire. Mais comme tu as fais ton code ça ne va pas. Le code PHP en dehors des fonctions sera executé une fois et ne pourra communiquer avec les variables utilisés dans les fonctions pour xAjax. Enfin je connais pas trop xAjax ... C'est d'ailleurs pour ça que je peux pas vraiment t'aider, encore si tu le ferais en Javascript normal ça irait.

AraknoProd

23 mars 2011 à 19:05:52

Problème pas encore résolu ... :'(

Donc j'ai essayer ça :

<?php
session_start();
include("./includes/identifiants.php");

		$pseudo = stripslashes($_SESSION['pseudo']);

//
// Notre fonction PHP pour afficher les messages :
//

function information()
{
                $nom_fichier = './chat.txt';
                $date_fichier = date("YmdHis", filemtime($nom_fichier));
                $datetime = time();
                $date_actuelle = date("YmdHis", $datetime);
}

function afficher()
{
        $reponse = new xajaxResponse();// Cr&#65533;ation d'une instance de xajaxResponse pour traiter les r&#65533;ponses serveur.
        $chat = '';// Initialisation de la variable $chat.
        $fichier_texte = fopen('./chat.txt', 'r');// On ouvre notre fichier texte en lecture seule.
        $chat = fread($fichier_texte, filesize('./chat.txt'));// On lit notre fichier et on stocke son contenu dans la variable $chat
        fclose($fichier_texte);//On ferme notre fichier texte.   
        $reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace le contenu du div 'block' par le contenu de $chat
        return $reponse;
}

//
// Notre fonction PHP envoyer pour envoyer un message :
//
function envoyer($posteur, $message)
{
        $reponse = new xajaxResponse();//Cr&#65533;ation d'une instance de xajaxResponse pour traiter les r&#65533;ponses serveur.
        $fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en &#65533;criture seule.
        fwrite($fichier_texte, '<tr style="border-collapse: collapse; width: 800px;"><td class="message" style="width: 800px;"><font color="#ED8900">['. htmlentities(date("H:i:s")) .']</font> - <strong>' . htmlentities($posteur) . ': </strong>' . htmlentities($message) . '</td></tr>');// On stocke le message dans notre fichier.
        fclose($fichier_texte);// On ferme notre fichier texte.
        $reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
        $reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages pour que l'utilisateur voie son message &#65533; l'&#65533;cran.
        return $reponse;
}

//
// Ouverture de la librairie xajax, instanciation d'un objet de la classe xajax, puis d&#65533;claration de nos fonctions PHP.
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax.
$xajax->register(XAJAX_FUNCTION, 'information');
$xajax->register(XAJAX_FUNCTION, 'afficher');// On enregistre nos fonctions.
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();// Fonction qui va se charger de g&#65533;n&#65533;rer le Javascript, &#65533; partir des donn&#65533;es que l'on a fournies &#65533; xAjax APR&#65533;S AVOIR D&#65533;CLAR&#65533; NOS FONCTIONS.
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Chat xAjax</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
                th.cb { background: #0000FF; }
                td.cb { background: #FF0000; }
                td.message { background: #00FF00; border: 1px solid black; border-collapse: collapse; }
                </style>

                <?php $xajax->printJavascript(); /* Affiche le Javascript */?>
                <script type="text/javascript">

                function refreshinform()// Code javascript qui va appeler la fonction afficher toutes les 5 secondes.
                {
                        xajax_information();
                        setTimeout(refresh, 0500);
                }

                var posteur = '<?=$pseudo ?>';
                var date_actuelle = '<?=$date_actuelle ?>';
                var date_fichier = '<?=$date_fichier ?>';

                function refresh()// Code javascript qui va appeler la fonction afficher toutes les 5 secondes.
                {
                        xajax_afficher();
                            if (date_fichier > date_actuelle)
                            {
                                document.getElementById('block').scrollTop = document.getElementById('block').scrollHeight;
                                setTimeout(refresh, 1000);
                            }
                }
                </script>
        </head>
        <body> <?php echo $date_fichier; ?>
                <table style="border-collapse: collapse;"><tr><th class="cb">Chatbox</th></tr>
                <tr><td class="cb"><table style="border-collapse: collapse; width: 800px;"><div id="block" style="height: 200px; overflow: auto;"></div></table></td></tr>
                <tr><th class="cb">
                <form action="">
                          <label><a href="mon-compte.html"><?php echo $pseudo; ?></a></label> | 
                          Message : <input type="text" size="50" id="message" />
                          <input type="submit" value="Envoyer" onclick="xajax_envoyer(posteur, document.getElementById('message').value); return false;" />
                </tr></table>
                </form>
                <script type="text/javascript">
                        refreshinform();
                        refresh();//On appelle la fonction refresh() pour lancer le script.
                </script>

Sans résultats.... :'(

Donc si qqn s'y connait bien en Ajax, je vous en prie -> Aidez moi !!!