[Prototype/JQuery] création d'un t'chat

**joa_tcherno** · 08/03/2008, 21h10

Bonsoir, je me suis récement mis à l'AJAX afin de créer un t'chat qui pique pas les yeux à chaque fois qu'il se rafraichi. Je n'en suis qu'au début, j'ai réalisé les pages nécéssaires pour pouvoir insérer des messages dans la base de données et afficher ceux ci dans un textarea lors du chargement de la page, la mise à jour n'est pas encore faites à intervalle régulier mais j'effectue le chargement de la textarea comme si c'était une mise à jour ( c'est à dire sans charger toute la page ).

je ne suis peut êtr epas très clair, pour remédier à ça je vais vous fournir le code.

Tout d'abord mon index :

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
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
 
<!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">
 
<html>
<head>
	<title>tchat</title>
	<LINK rel=stylesheet type="text/css" href="styles.css">
</head>
 
<body onLoad="javascript:ajax();">
 
<script type="text/javascript" src="load_div.js"></script>
 
<textarea id=contenu_chat style="width:80%"></textarea>
 
<div id=message_chat>
	<form method="post" action="index.php" name="message">
		<input type="text" name="pseudo" maxlength="30" size="10">
		<input type="text" name="contenu" maxlength="50" size="50">
		<input type="submit" name="OK" value="OK">	
	</form>
</div>
 
<?php
//on connecte a la BDD
$dbhost="localhost";
$dbuser="admin";
$dbpass="pass";
$bdd="tchat";
 
$pseudo = $_POST["pseudo"];
$contenu = $_POST["contenu"];
 
if ($pseudo != "" and $contenu != "")
{
	mysql_connect($dbhost,$dbuser,$dbpass);
	mysql_select_db("$bdd");
 
	//on récupère l'ID maximum de smessages
	$requete = "SELECT MAX(id) FROM MESSAGE";
	$exec_req = mysql_query($requete);
	$idmax = mysql_result($exec_req,0);
	$idmax = $idmax + 1;
 
	//on insère dans la base
	$requete = "INSERT INTO MESSAGE VALUES('$idmax','$pseudo','$contenu')";
 
	$exec_req = mysql_query($requete);
}
?>
 
</body>
 
</html>

Ensuite voici le code javascript

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest)
	{
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { modif_div(xhr); };
 
	//on appelle le fichier load_chat.php
    xhr.open("GET", "load_chat.php", true);
    xhr.send(null);
}
 
function modif_div(xhr)
{
	//setTimeout('Ajax()',1000);
	var docXML= xhr.responseXML;
	var pseudos = docXML.getElementsByTagName("pseudo");
	var messages = docXML.getElementsByTagName("contenu");
	var contenu = '';
 
	//on fait juste une boucle sur chaque element "pseudo" trouvé
 
	for (var i = (pseudos.length);i<pseudos.length;i++)
	{
		contenu = contenu+'<b>'+pseudos.item(i).firstChild.data+'</b> : '+messages.item(i).firstChild.data+'<br>';
	}
	document.getElementById('contenu_chat').innerHTML=contenu;
}

Puis pour finir la page php qui transforme les données de la base de donnée en format xml.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<tchat>\n";
 
//on connecte a la BDD
$dbhost="localhost";
$dbuser="admin";
$dbpass="pass";
$bdd="tchat";
 
mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("$bdd");
 
//on lance la requete
$requete = "SELECT * FROM message";
$exec_req = mysql_query($requete);
 
 
//On boucle sur le resultat
while ($row = mysql_fetch_array($exec_req, MYSQL_NUM))
{
        echo "<pseudo>" . $row[1] . "</pseudo>\n";
        echo "<contenu>" . $row[2] . "</contenu>\n";
}
echo "</tchat>\n";
 
?>

La base est une base de donnée mysql, je simule le serveur avec wampServer2.

Mon problème est le suivant : rien ne s'affiche jamais dans la textarea, j'ai essayé de bidouiller un peu partout je ne comprend pas rien ne marche. Pourtant les données sont bien enregistrées dans la base et lorsque je vais voir dans la page php elles sont bien transformées en xml. Plus étonnant encore, les deux ou trois premières fois où j'ai testé mes pages, tout marchait.

Celà va faire l'après midi que je suis dessus, j'ai un peu la tête fatigué, il est donc possible que mon erreur soit très bête, mais j'ai beau cherché, je ne la voit pas.

Le SetTimeout est une fonction que je ne sais pas encore utilisé mais dont je vais sans doute avoir besoin pour rafraichir périodiquement, c'est pour celà qu'il est en commentaire.

Merci d'avance pour vos réponses.

**joa_tcherno** · 09/03/2008, 15h12

En fait si ça peut aider j'ai localiser le problème :

il est dans la fonction modif_div de mon code javascript.

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
16
17
function modif_div(xhr)
{
	setTimeout('Ajax()',1000);
	var docXML= xhr.responseXML;
	var pseudos = docXML.getElementsByTagName("pseudo");
	var messages = docXML.getElementsByTagName("contenu");
	var contenu = '';
 
	//on fait juste une boucle sur chaque element "pseudo" trouvé
 
	for (var i = (pseudos.length);i<pseudos.length;i++)
	{
		contenu = contenu+'<b>'+pseudos.item(i).firstChild.data+'</b> : '+messages.item(i).firstChild.data+'<br>';
	}
	document.getElementById('contenu_chat').innerHTML=contenu;
	alert(contenu);
}

Il se passe une chose très surprenante dans la boucle :
En effet l'alert(contenu) s'affiche autant de fois que la boucle boucle (on se comprend ^^), or elle n'est pas dedans donc l'alerte ne devrai se faire qu'une seule fois, de plus le contenu affiché dans l'alerte est toujours vide, je comprend de moins en moins ce qui cloche mais au moins je sais vers ou c'est.

Merci d'avance pour votre aide.

**joa_tcherno** · 09/03/2008, 18h03

Bon après quelques bidouilles j'ai réussi a m'en sortir, mais j'ai encore deux problèmes :

1 : Je ne peux toujours pas afficher plus de 10 ligne dans ma div.

2 : le setTimeout génère une fuite de mémoire, car à chaque refresh, les données xml sont stockée dans la mémoire cache, ne se remplaçant pas, ainsi au bout d'une dizaine de seconde sa commence à ramer énormément.

**temsa** · 10/03/2008, 04h13

yop yop,

Pour éviter une bonne partie des fuites mémoires (sur tous les navigateurs, car notamment ton innerhtml= en fait aussi -> update dans Prototype) et t'embeter beaucoup moins dans l'écriture de ton code js, je te conseil vivement l'utilisation d'un framework javascript comme prototype (http://prototypejs.org , mon préféré) ou jquery (http://jquery.com/ très bien aussi).

De plus, pour économiser de la mémoire tu ferais bien de sortir du JSON plutot que tu XML (en plus l'intrepretation sera automatique avec Prototype et tu obtiendras directement une hashmap). Autre option sortir directement le HTML à afficher (ce qui rend avec prototype le code méga simple ! --> http://prototypejs.org/api/ajax/periodicalUpdater)

Dans la même veine, pour être moins "sale" et moins mélanger ton code js et ta "vue", tu devrais utiliser les template Prototype, ça permet d'être plus lisible, de plus avec ta hashmap avec tes 2 valeurs l'utilisation est immédiate, cf la doc).

ton code js doit être torchable proprement en environs 10 lignes.

En parlant de 10 lignes, as tu regardé la donnée brut venant a ton javascript (par exemple en utilisant le logger Firebug ou un point d'arret toujours avec Firebug) pour vérifier que le probeme de tes "10 lignes max" vient bien de ton code JS?

tite proposition non testée utilisant Prototype+JSON à la place XML (ecriture un peu barbare qd on connait pas j'avoue, tu peux rajouter des variables pr le rendre plus lisble etape par etape, mais tu obtiens qqchose propre et bien):

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var LineTpl= new Template("<b>#{pseudo}</b> : #{message}<br>");
new PeriodicalExecuter(function(pe) {
  method: 'get',
  onSuccess: function(transport) {
    $("contenu_chat").update($A(transport.responseJSON).inject( function(line) {
      return LineTpl.evaluate(line);
    });
  }
}, 10);

ceci suppose que le JSON est de la forme:

Code :

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

1
2
3
4
5
6
 
[
{pseudo: "foo", message: "bar"},
{pseudo: "foobar", message: "barfoo"},
...
]

**joa_tcherno** · 10/03/2008, 14h42

Tout d'abord merci pour ton aide.
Pour ce qui est des 10 lignes max en fait ça venait de ie qui apparement tronque le xml ( si j'ai bien compris ), avec firefox aucun problème.

Sinon pour ce qui est de ce que tu me propose, je vais tester ça tout de suite et je te dirait si ça marche ou pas d'ici quelques heures ( le temps que je comprenne tout bien ^^ ). Merci bcp !

[Prototype/JQuery] création d'un t'chat

jQuery

Discussions similaires

Partager

Partager