[AJAX] Chat avec actualisation auto

Version imprimable

bonsoir,

J'ai créé mon chat à l'aide du TP sur le PHP. Actuellement, il faut appuyer sur un bouton pour actualiser le chat, c'est vraiment... Pas super.
Je voudrais faire en sorte que mon chat s'actualise lui-même sans recharger la page.
J'ai entendu parler d'une méthode, le xAjax, mais cela s'applique sur un fichier texte et je voudrais l'adapter sur une base de donnée.
Si vous pouviez m'aider à transformer ce chat en chat xAjax, je vous en serez infiniment reconnaissant :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!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" lang="fr">
   <head>
       <title>Super Mario Sokoban</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="CSS.css" />
   </head>
 
        <body>
                <!-- L'en-tête -->
                <div id="en_tete"><a href="Accueil.html"><img src="http://i48.servimg.com/u/f48/17/08/18/10/titre10.png" ></a></div>
 
                <!-- Cadre interieur -->
                <div class="remplissage">
 
                        <!-- Les menus -->
                        <div id="menu">
                                <table height="100%">
                                        <tr height="100%">
                                                <td><a href="Accueil.html"><div class="titre_menu">...Accueil... |</div></a>
                                                </td>
                                                <td><a href="Jeu.html"><div class="titre_menu">...Le Jeu... |</div></a>
                                                </td>
                                                <td><a href="Telechargement.html"><div class="titre_menu">...Telechargement... |</div></a>
                                                </td>
                                                <td><a href="Chat.php"><div class="titre_menu">...Chat... |</div></a>
                                                </td>
                                                <td><a href="Equipe.html"><div class="titre_menu">...L'Equipe... |</div></a>
                                                </td>
                                        </tr>
                                </table>
                        </div>
 
                        <!-- Le corps -->
                        <div id="corps">
                                <div class="banniere"></div>
                                <table class="boite_cadre" width="90%" height="100%">
                                        <tr>
                                                <td>
                                                        <div class="boite">
                                                                <div class="titre_boite">Chat</div>
                                                                        <div class="cadre">
                                                                                <table width ="100%">
                                                                                        <tr>
                                                                                                <td align="center">
                                                                                                        <form action="Chat2.php" method="post">
                                                                                                                <p>
                                                                                                                        <!-- On insère un formulaire réservé à la saisie du pseudo par l'utilisateur et limité à 15 caractères... !-->
                                                                                                                        <label for="pseudo">Pseudo</label><br />
                                                                                                                        <?php
                                                                                                                        if (isset($_POST['pseudo']))
                                                                                                                        { ?>
                                                                                                                                <input class ="input_cb" type="text" name="pseudo" id="pseudo" value="<?php echo $_POST['pseudo']; ?>" maxlength="15" /><br /> <?php
                                                                                                                        }
                                                                                                                        else
                                                                                                                        { ?>
                                                                                                                                <input class ="input_cb" type="text" name="pseudo" id="pseudo" value="" maxlength="15" /><br /> <?php
                                                                                                                        } ?>
                                                                                                                        <!-- ... puis un formulaire réservé à la saisie du message par l'utilisateur. !-->
                                                                                                                        <label for="message">Message</label><br />
                                                                                                                        <input class ="input_cb" name="message" id="message"></input><br />
                                                                                                                        <input class ="bouton" type="submit" value="Envoyer" />
                                                                                                                        <input class ="bouton" type="submit" value="Actualiser">
                                                                                                                </p>
                                                                                                        </form>
                                                                                                </td>
                                                                                                <td>
                                                                                                        <div class="messages_createur">
                                                                                                                Bonjour, ce chat n'est peut-être pas fonctionnel à 100% étant donné que je l'ai créé moi-même et n'étant qu'un novice dans ce langage, j'ai fais ce que j'ai pu.</br>
                                                                                                                J'espère cependant qu'il vous sera utile et que vous saurez l'apprécier!
                                                                                                                Kagami
                                                                                                        </div>
                                                                                                </td>
                                                                                        </tr>
                                                                                </table>
 
                                                                                <div class="messages">
                                                                                <?php
                                                                                mysql_connect("localhost", "root", "");
                                                                                mysql_select_db("bdd-chat");
                                                                                // Si les variables $_POST['pseudo'] et $_POST['message'] existent...
                                                                                if (isset($_POST['pseudo']) AND isset ($_POST['message']))
                                                                                {
                                                                                        // ... et si elles ne sont pas nulles (l'utilisateur a bien rempli tous les champs)...
                                                                                        if ($_POST['pseudo'] != NULL AND $_POST['message'] != NULL)
                                                                                        {
                                                                                                // ... alors on sélectionne les champs "ID", "pseudo" et "message" de la dernière entrée de la table "minichat".
                                                                                                $reponse0 = mysql_query("SELECT ID, pseudo, message FROM gestionchat ORDER BY ID DESC LIMIT 0, 1");
                                                                                                $der = mysql_fetch_array($reponse0);
                                                                                                // Si un MÊME utilisateur n'a pas posté deux fois de suite un message identique...
                                                                                                if ($_POST['message'] != $der['message'] OR ($_POST['message'] == $der['message'] AND $_POST['pseudo'] != $der['pseudo']))
                                                                                                {
                                                                                                        $message = mysql_real_escape_string(htmlspecialchars($_POST['message']));
                                                                                                        $pseudo = mysql_real_escape_string(htmlspecialchars($_POST['pseudo']));
                                                                                                        // ... alors on enregistre la date d'envoi du message, et le pseudo et le message postés par l'utilisateur...
                                                                                                        mysql_query("INSERT INTO gestionchat(ID, date, pseudo, message) VALUES('', NOW(), '$pseudo', '$message')");
                                                                                                        // ... et on compte le nombre d'entrées de la table "minichat".
                                                                                                        $reponse2 = mysql_query("SELECT COUNT(*) AS compte FROM gestionchat");
                                                                                                        $compte = mysql_fetch_array($reponse2);
                                                                                                        // Si le nombre d'entrées de la table "minichat" dépasse 500...
                                                                                                        if ($compte['compte'] > 500)
                                                                                                        {
                                                                                                                // ... alors on supprime l'entrée la plus ancienne.
                                                                                                                mysql_query("DELETE FROM gestionchat WHERE ID = $der[ID] - 499");
                                                                                                        }
                                                                                                }
                                                                                        }
                                                                                        // Sinon, si l'utilisateur n'a pas indiqué de pseudo...
                                                                                        elseif ($_POST['pseudo'] == NULL AND $_POST['message'] != NULL)
                                                                                        {
                                                                                                // ... alors on lui affiche un message d'erreur.
                                                                                                ?>
                                                                                                <p class="erreur">
                                                                                                        Veuillez indiquer un pseudonyme dans le formulaire pr&eacute;vu &agrave; cet effet.
                                                                                                </p>
                                                                                                <?php
                                                                                        }
                                                                                        // Sinon, si l'utilisateur n'a écrit aucun message...
                                                                                        elseif ($_POST['pseudo'] != NULL AND $_POST['message'] == NULL)
                                                                                        {
                                                                                                // ... alors on lui affiche un autre message d'erreur.
                                                                                                ?>
                                                                                                <p class="erreur">
                                                                                                        Veuillez r&eacute;diger un message dans le formulaire pr&eacute;vu &agrave cet effet.
                                                                                                </p>
                                                                                                <?php
                                                                                        }
                                                                                        // Sinon, si les deux variables sont nulles...
                                                                                        else
                                                                                        {
                                                                                                // ... alors on affiche encore un message d'erreur différent à l'utilisateur.
                                                                                                ?>
                                                                                                <p class="erreur">
                                                                                                        Veuillez remplir les formulaires ci-dessus avant de valider.
                                                                                                </p>
                                                                                                <?php
                                                                                        }
                                                                                }
                                                                                // On sélectionne un champ de la table "minichat".
                                                                                $reponse4 = mysql_query("SELECT ID FROM gestionchat");
                                                                                $exist = mysql_fetch_array($reponse4);
                                                                                // On sélectionne les 10 premiers pseudos et messages (en partant de la fin) de la table "minichat"...
                                                                                $reponse1 = mysql_query("SELECT date, pseudo, message FROM gestionchat ORDER BY ID DESC LIMIT 0, 100");
                                                                                // On modifie le format de la date en format français...
                                                                                $reponse3 = mysql_query("SELECT DATE_FORMAT(date, '%H:%i:%s') AS date_fr FROM gestionchat ORDER BY ID DESC LIMIT 0, 100");
                                                                                mysql_close();
                                                                                // ... et enfin, on affiche toutes ces données à l'aide d'une boucle.
                                                                                while ($donnees = mysql_fetch_array($reponse1) AND $date = mysql_fetch_array($reponse3))
                                                                                {
                                                                                        ?>
                                                                                        <p>
                                                                                                [<?php echo $date['date_fr']; ?>] <strong><?php echo $donnees['pseudo']; ?></strong>: <?php echo $donnees['message']; ?>
                                                                                        </p>
                                                                                        <?php
                                                                                }
                                                                                ?>
                                                                                </div>
                                                                        </div>
                                                        </div>
                                                </td>
                                        </tr>
                                </table>
                                <br />
                        </div>
 
                        <div class="haut_page" align="right"><a href="#top">Haut de page</a></div>
 
                        <!-- Le pied de page -->
                        <div id="pied_de_page" align="center">Copyright Silvere & Kagami, 2012</div>
                </div>
 
   </body>
</html>

Voici l'endroit où vous trouverez mon chat: <lien url="http://www.mario-sokoban.mtxserv.fr/Chat.php">Visiter le chat</lien>

Merci à celui/celle/ceux qui m'aideront.

silvere112

13/04/2012, 08h46
Bovino

Citation:

Si vous pouviez m'aider à transformer ce chat en chat xAjax

C'est-à-dire ? :koi:

Tu comptes quand même pas qu'on te le fasse j'espère ! :mrgreen:

Donc, qu'as-tu déjà fait, quelles sont les problèmes que tu rencontres ?

Bah en fait, voici le code que j'ai pour le moment:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<?php
include('config.php')
?>
<?php
 
// -- transforme toutes les urls du texte en liens cliqualbles
function make_clickable($text)
{
    $ret = ' ' . $text;
    $ret = preg_replace("#(^|[\n ])([\w]+?://[^ \"\n\r\t<]*)#is", "\\1<a href=\"\\2\" target=\"_blank\">\\2</a>", $ret);
    $ret = preg_replace("#(^|[\n ])((www|ftp)\.[^ \"\t\n\r<]*)#is", "\\1<a href=\"http://\\2\" target=\"_blank\">\\2</a>", $ret);
    $ret = preg_replace("#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i", "\\1<a href=\"mailto:\\2@\\3\">\\2@\\3</a>", $ret);
    $ret = substr($ret, 1);
    return($ret);
}
 
//Notre fonction PHP pour afficher les messages
function afficher()
{
    $reponse = new xajaxResponse();
    $chat = "";
	// On sélectionne les 10 premiers pseudos et messages (en partant de la fin) de la table "minichat"...
	$sql = mysql_query("SELECT DATE_FORMAT(date, '%H:%i:%s') AS date_fr, pseudo, message FROM gestionchat ORDER BY ID DESC LIMIT 0, 100");
    $query = mysql_query($sql);
	mysql_close();
 
    $chat = '<table cellspacing="0" celpadding="2" border="0">';
 
    while($array = mysql_fetch_array($query))
	{
        $tmsg = make_clickable($array['message']);
 
        $chat .= '<tr><td class="titre" valign="top">'.$array['pseudo'].'&nbsp;:</td><td>'.$tmsg.'</td></tr>';
    }
 
    $chat .= '</table>';
 
    $reponse->assign('block', 'innerHTML', $chat);
    return $reponse;
}
 
//Notre fonction PHP envoyer pour envoyer un message
function envoyer($msg) {
    $reponse = new xajaxResponse();
    $tmsg=trim($msg);
 
    if ($tmsg!="") {
        $sql = "INSERT INTO gestionchat(ID, date, pseudo, message) VALUES ('', NOW(), '".$_SESSION['username']."', '".addslashes(htmlentities($tmsg))."')";
        mysql_query($sql);
        mysql_close();
        $reponse->addAssign("message", "value", "");
        $reponse->addScript("xajax_afficher();");
        return $reponse->getXML();
    }
    else {
        $reponse->addAssign("message", "value", "");
        return $reponse->getXML();
    }
}
 
//Ouverture de la librairie xajax
require_once('./xajax_core/xajax.inc.php');
$xajax = new 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</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <?php $xajax->printJavascript(); ?>
    <script>
		function refresh() {
			xajax_afficher();
			setTimeout(refresh, 5000);
		}
    </script>
    <link rel="stylesheet" type="text/css" href="chat.css" />
</head>
<body>
    <div id="haut">
		<div id="block"></div>
        <form id="formulaire" action="">
			<input type="text" size="30" maxlength="150" id="message" class="form">&nbsp;
			<input type="submit" class="button" value="Go" onclick="xajax_envoyer(document.getElementById('formulaire').message.value); return false;" />
        </form>
		<script type="text/javascript">
			refresh();// On appelle la fonction refresh() pour lancer le script.
		</script>
    </div>
</body>
</html>

Seulement, les messages s'enregistre bien dans ma bdd donc la fonction envoyer marche.
Cependant, rien ne s'affiche, aucun messages visibles dans la div block (Qui doit être remplie par la fonction afficher)

Si quelqu'un peut me dire ce qui va pas, je le en serai reconnaissant :/

PS: Le chat sur le site ne correspond pas à celui du code ci-dessus

13/04/2012, 22h17
supersnail

Bonjour,

Je pense que le mieux pour toi est de te renseigner sur comment "fonctionne" AJAX (sur quels principes AJAX repose), et je te déconseille d'utiliser dans ton apprentissage des libs magiques toutes faites qui masquent toute la mécanique (mais tu pourras les utiliser une fois devenu un Grand Maître :zen: ).

Bref, pour revenir à nos moutons, le principe d'AJAX est de charger uniquement les éléments dont on a besoin.
En gros, lorsque ton chat va se charger, ça va télécharger ta page PHP qui contient tous les scripts nécessaires au fonctionnement du chat. Pour afficher les nouveaux messages, un script enverra régulièrement une requête HTTP à un autre fichier php (chat.php pour faire simple), qui renverra (ou non) les nouveaux messages, s'il y en a eu.
Pour l'envoi c'est pareil, tu rappelles une page qui aura pour unique but d'insérer ton message dans la BDD ;)
14/04/2012, 13h25
silvere112

Oui, j'avais bien compris ça mais je n'ai pas le temps d'apprendre le JavaScript et Ajax, je suis vraiment débordé (Le chat va servir pour un jeu que je suis en train de faire avec un ami et qui n'est pas encore fini) sachant qu'en plus j'apprend le C++, j'ai pas du tout le temps de me pencher plus sur les principes d'Ajax, ce que je compte faire au prochaine vacances tout de même parce que ça à l'air assez intéressant.
Je demande donc si quelqu'un peut me dire où est le problème de ma fonction afficher qui n'affiche... Rien :/

Merci tout de même pour l'intérêt porté à ce sujet :)