Blog du grouik - Mot-clé - tchatLe blog du grouik. Memos d'un Admin sys linux windows, logiciels libres, imprimante 3D2024-01-16T12:12:27+00:00Gniearkurn:md5:87c2396a7331cd5cd18f8751d216ec7bDotclearTest de Mumble et tuto d'installation du serveur Murmururn:md5:58e565097da71695bfc1ef4fc388de682012-03-23T14:00:00+01:002017-04-04T08:09:03+02:00gniearkServeurs http web et autresaudioLogiciel-libretchattelephoneTutoriel-mémo <p><img src="https://blog-du-grouik.tinad.fr/public/.myvoice_m.jpg" alt="myvoice.jpg" style="display:table; margin:0 auto;" title="myvoice.jpg, mar. 2012" /></p>
<p>Après <a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-Teamspeak">teamspeak</a>, voici le test de mumble, dans le domaine des systèmes de conférences VOIP. L'avantage de mumble c'est qu'il est libre et se trouve dans les dépôts de la plupart des distributions (donc facile à installer)! Je vais rapidement présenter en quelques impressions d'écran l'interface de mumble, l'interface de MAP (qui est un code tiers) permettant d'administrer le serveur. Puis mes notes pour l'installation de Murmur (le nom donné à la partie serveur de mumble)</p>
<h2>Mumble en Quelques screens</h2>
<h3>L'ouverture de Mumble</h3>
<p><img src="https://blog-du-grouik.tinad.fr/public/.mumble-b_m.jpg" alt="mumble-b.jpg" style="display:table; margin:0 auto;" title="mumble-b.jpg, mar. 2012" /></p>
<h3>Paramètres de connexion à un serveur (non listé)</h3>
<p><img src="https://blog-du-grouik.tinad.fr/public/mumble1-b.jpg" alt="mumble1-b.jpg" style="display:table; margin:0 auto;" title="mumble1-b.jpg, mar. 2012" /></p>
<h3>Connecté à un serveur</h3>
<p><img src="https://blog-du-grouik.tinad.fr/public/.mumble2-b_m.jpg" alt="mumble2-b.jpg" style="display:table; margin:0 auto;" title="mumble2-b.jpg, mar. 2012" /></p>
<h2>Installer le client mumble:</h2>
<pre class="brush: bash">#sous fedora
yum install mumble
#sous débian ou ubuntu
apt-get install mumble</pre>
<h3>Rustine pour Fedora 64 bits</h3>
<p>Sous fedora 64 bits lors de la connexion à un serveur, vous aurez le message d'erreur suivant:</p>
<pre>
Incapable de trouver des codecs CELT correspondant aux autres clients. Vous ne serez pas capable de parler aux autres utilisateurs.
</pre>
<p><a href="https://bugzilla.redhat.com/show_bug.cgi?id=672092">La rustine est donnée par Dirk Schlüter sur les tickets de red Hat</a></p>
<pre class="brush: bash">#Rustine pour fedora 64 bits
cd /usr/local/src/
wget http://th0br0.fedorapeople.org/celt071-0.7.1/celt071-0.7.1-1.fc13.src.rpm
rpm -i celt071-0.7.1-1.fc13.src.rpm
cd /root/rpmbuild/
yum install libogg-devel
rpmbuild -ba SPECS/celt071.spec
#dans la ligne suivante changez éventuellement celt071-0.7.1-1.fc15.x86_64.rpm par celt071-0.7.1-1.fc14.x86_64.rpm
#en fonction de votre version de fedora
rpm -ivh /root/rpmbuild/RPMS/x86_64/celt071-0.7.1-1.fc15.x86_64.rpm
ln -s /usr/lib64/libcelt071.so.0 /usr/lib64/libcelt0.so.0.0.0</pre>
<h2>le serveur (test sur une débian):</h2>
<h3>Installation</h3>
<pre class="brush: bash">apt-get install mumble-server
dpkg-reconfigure mumble-server
#démarrer le serveur mumble:
/etc/init.d/mumble-server start</pre>
<p>A cette étape, le serveur mumble fonctionne, vous pouvez vous y connecter, sauf qu'il sera impossible de le paramétrer. Il faut définir un mot de passe administrateur
Sur le serveur:</p>
<pre class="brush: bash">murmurd -ini /etc/mumble-server.ini -supw VotreMotDePasse</pre>
<h3>Administrer le serveur</h3>
<p>Connectez vous via le client avec l'identifiant "superuser"</p>
<p>serveur -> connexion -> ajouter un serveur. Comme ceci:</p>
<p><img src="https://blog-du-grouik.tinad.fr/public/mumble.jpg" alt="mumble.jpg" style="display:table; margin:0 auto;" title="mumble.jpg, mar. 2012" /></p>
<p>Bon ok, dans le client, je n'ai pas trouvé où mettre le mot de passe. c'est pas grave, avec cet identifiant, il vous le demandera.</p>
<p><img src="https://blog-du-grouik.tinad.fr/public/.mumble2_m.jpg" alt="mumble2.jpeg" style="display:table; margin:0 auto;" title="mumble2.jpeg, mar. 2012" /></p>
<p>Dans le client, le click droit sur le nom du serveur mumble, sur un channel ou la zone blanche vous permettra d'accéder à quelques outils d'administration. Cependant les possibilités ne sont pas exhaustives.</p>
<p>Le wiki anglophone conseille d'utiliser "ICE", on va dans ce billet utiliser une interface web php utilisant la librairie ice. Cependant notez que d'autres solutions existent.</p>
<p>De mon coté, il y a déja un LAMP sur le serveur. j'ajoute la librairie ICE simplement ainsi:</p>
<pre class="brush: bash">apt-get install php-zeroc-ice</pre>
<h3>Configurer mumble-server pour pouvoir utiliser ice.</h3>
<p>Éditez le fichier /etc/mumble-server.ini
et ajoutez ou dé-commentez les lignes suivantes:</p>
<pre>
dbus=session
ice="tcp -h 127.0.0.1 -p 6502"
</pre>
<h3>Interface d'administration (MAP Mumble Admin Plugin)</h3>
<p>Je ne détaille pas, ça s'installe comme n'importe que CMS.</p>
<ul>
<li>Créez préalablement une base de données mysql sur le serveur.</li>
<li>Téléchargez MAP sur ce site: <a href="http://mumble.sourceforge.net/MAP_-_Mumb1e_Admin_Plugin" hreflang="en">http://mumble.sourceforge.net/MAP_-_Mumb1e_Admin_Plugin</a>. Vous devrez créer un compte pour pouvoir télécharger.</li>
<li>Décompresser l'archive dans un dossier WEB du serveur mumble (le billet ici n'explique pas comment installer un serveur LAMP, référez vous à celui là ou celui là)</li>
<li>Rendez vous via un navigateur sur l'interface de MAP.</li>
</ul>
<h3>Quelques screens de MAP</h3>
<h4>La page de connexion</h4>
<p><img src="https://blog-du-grouik.tinad.fr/public/.map_m.jpg" alt="map.jpg" style="display:table; margin:0 auto;" title="map.jpg, mar. 2012" /></p>
<h4>La liste des serveurs administrables</h4>
<p><img src="https://blog-du-grouik.tinad.fr/public/.map1_m.jpg" alt="map1.jpg" style="display:table; margin:0 auto;" title="map1.jpg, mar. 2012" /></p>
<h4>MAP fournit à la page http://VotreURL/request une interface où les utilisateurs potentiels peuvent s'inscrire si vous souhaitez n'autoriser que les users avec mot de passe.</h4>
<p><img src="https://blog-du-grouik.tinad.fr/public/.map2_m.jpg" alt="map2.jpg" style="display:table; margin:0 auto;" title="map2.jpg, mar. 2012" /></p>
<h4>On peut accepter ou non les requetes d'inscription dans l'interface d'admin.</h4>
<p><img src="https://blog-du-grouik.tinad.fr/public/.map3_m.jpg" alt="map3.jpg" style="display:table; margin:0 auto;" title="map3.jpg, mar. 2012" /></p>
<h2>Conclusion</h2>
<p>Mumble est super sympa, la qualité de son me semble meilleure que teamspeak. En plus pour les essais, je me suis incrusté sur des chans "Salut je suis gnieark, je vous embête juste le temps d'un test". Les mecs sur lesquels je suis tombé étaient sympas. (Je m'étais fait insulter sur teamspeak <sup>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-mumble#wiki-footnote-1" id="rev-wiki-footnote-1">1</a>]</sup>). Autre point Mumble n'est pas spécialisé jeux en ligne, Il y a des salons plus généralistes. C'est assez sympa.</p>
<p>Enfin concernant l'enregistrement, c'était l'objectif pour les causeries, Mumble ne le propose pas. Cependant pour les linuxiens, vu que mumble utilise le système de son du système<sup>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-mumble#wiki-footnote-2" id="rev-wiki-footnote-2">2</a>]</sup> l'ouverture d'un "magnétophone" sur l'ordinateur enregistre super bien.</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-mumble#rev-wiki-footnote-1" id="wiki-footnote-1">1</a>] Enfin je soupçonne d’être tombé sur l'ex de mon ex qui sait que je suis Gnieark, et heu dans ses propos pas supers compréhensibles, je crois qu'il requérait que je le sodomise.</p>
<p>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-mumble#rev-wiki-footnote-2" id="wiki-footnote-2">2</a>] j'ai du mal à expliquer les détails techniques là</p></div>
test de Teamspeakurn:md5:7279875d055339f34c8f5e34dcf4c7212012-03-15T14:56:00+01:002012-03-16T23:19:20+01:00gniearkServeurs http web et autresaudiotchattelephone <p><img src="https://blog-du-grouik.tinad.fr/public/.myvoice_m.jpg" alt="myvoice.jpg" style="display:block; margin:0 auto;" title="myvoice.jpg, mar. 2012" /></p>
<p>Je cherche des alternatives à skype pour l'enregistrement des podcasts parceque:</p>
<ul>
<li>Le logiciel "Pamela" qui nous servait à l'enregistrement... était en période d'essai.</li>
<li>Le son est tres déformé par skype <sup>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-Teamspeak#pnote-1042-1" id="rev-pnote-1042-1">1</a>]</sup>.</li>
<li>Skype est très bien pour du téléphone et de la visio mais est trop limité.</li>
</ul>
<p>Ce billet sera suivi dans les prochains jours par un test de mumble, concurrent libre de teamspeak.</p>
<p>Teamspeak m'a été conseillé par Ellny. Il est surtout destiné à être un canal de communition pour les équipes de jeu en ligne (Worl of wardcraft) et n'est peut être pas très connu en dehors des cercles de gamers... mais bon... pourquoi ne pas s'en servir à autre chose.</p>
<h3>Le serveur teamspak</h3>
<p>Vous en trouverez tout prets gratuits ou à louer mais comme j'aime bien tout maitriser, j'ai installé la version serveur sur la debian qui héberge ce blog.</p>
<p>Une version windows du serveur existe cependant pour les moins geeks.</p>
<p>Pour l'explication de l'installation du serveur ts3 sous linux, je ne ferai pas mieux que ce tutoriel sur le blog de ligams.com : <a href="http://www.ligams.com/Publications/Linux/Installer-un-serveur-Teamspeak-3-TS3">http://www.ligams.com/Publications/Linux/Installer-un-serveur-Teamspeak-3-TS3</a></p>
<h3>Le client teamspeak 3.</h3>
<p>Disponible sous à chaque fois en 32 et 64 bits sous windobe, Apple, linux, ios, Android (en béta, manque certaines fonctions). Vous pouvez le télécharger sur cette page.
<a href="http://teamspeak.com/?page=downloads" hreflang="fr">http://teamspeak.com/?page=downloads</a></p>
<p>A l'utilisation ça ressemble à un client IRC (ce qui signifie que c'est complet mais pas très user-friendly). On se connecte à un serveur (au choix) il a des channels. certains ouverts d'autres avec des mots de passe etc...</p>
<p><img src="https://blog-du-grouik.tinad.fr/public/.teamspeak-client-first-connect2_m.jpg" alt="teamspeak-client-first-connect2.jpeg" style="display:block; margin:0 auto;" title="teamspeak-client-first-connect2.jpeg, mar. 2012" /></p>
<p>Au niveau de la qualité audio c'est nickel <sup>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-Teamspeak#pnote-1042-2" id="rev-pnote-1042-2">2</a>]</sup>. Je vous laisse juger par vous même:</p>
<p>Cependant, en duo, skype est plus sympa. Je m'explique:
Teamspeak coupe le micro en dessous d'un seuil sonore. C'est idéal lors d'une conférence à 15 gamers en réseau pour ne pas entendre les 15 machines à laver ou autres fonds sonores des participants. A deux, par contre, le fait de ne rien entendre lors des silences est un peu déstabilisant. De plus avec ce système, si on s'éloigne du micro (le temps d'aller chercher de la drogue pour enregistrer un podcast par exemple), de loin le correspondant ne nous entends plus puisque le micro ne se déclenche pas.</p>
<p>Il y a un mode anti echo qui n'est pas activé par défaut. (pas testé du coup). Mais l'idéal est d’être au casque avec teamspeak.</p>
<div style="text-align: center;">
<object type="application/x-shockwave-flash" data="http://blog-du-grouik.tinad.fr/?pf=player_mp3.swf" width="200" height="20">
<param name="movie" value="http://blog-du-grouik.tinad.fr/?pf=player_mp3.swf" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="showvolume=1&loadingcolor=ff9900&bgcolor1=eeeeee&bgcolor2=cccccc&buttoncolor=0066cc&buttonovercolor=ff9900&slidercolor1=cccccc&slidercolor2=999999&sliderovercolor=0066cc&mp3=http://blog-du-grouik.tinad.fr/public/helloWorld.mp3&width=200&height=20" />
Fichier audio intégré</object>
</div>
<p>Le temps de latence est assez élevé (0.5 s, mais ça ne se remarque pas).</p>
<p>Autre petit avantage de teamspeak: Il ne demande rien d'intrusif aux utilisateurs, juste un pseudonyme. <sup>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-Teamspeak#pnote-1042-3" id="rev-pnote-1042-3">3</a>]</sup></p>
<h3>Quelques mots sur le modèle économique.</h3>
<p>Teamspeak n'est pas open source. c'est un programme propriétaire. Les fonctions ont l'air débloquées presque totalement en licence non commerciale. Ils gagnent leur beurre sur des licences commerciales et de la location de serveurs teamspeak. Mais ils permettent quand même de bien profiter gratuitement d'un outil puissant. J'adhère.</p>
<p>Peut etre que le podcast qui sera publié dans deux semaines aura été fait avec teamspeak!</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-Teamspeak#rev-pnote-1042-1" id="pnote-1042-1">1</a>] avantage: la qualité est correcte meme avec du matos pourri et de l'écho inconvénient. c'est un peu nasillard</p>
<p>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-Teamspeak#rev-pnote-1042-2" id="pnote-1042-2">2</a>] Bon faut dire que la partie serveur de teamspeak, je l'ai installée sur une dédibox, je n'ai pas de soucis de bande passante ou de débit moisi</p>
<p>[<a href="https://blog-du-grouik.tinad.fr/post/2012/03/15/test-de-Teamspeak#rev-pnote-1042-3" id="pnote-1042-3">3</a>] Sauf pour obtenir (gratuitement) une licence non-commerciale serveur teamspeak avec la pluspart des fonctions débloquées, là il faut décliner son identité et adresse</p></div>
Creer un tchat (chat) en AJAX phpurn:md5:87520558bfcb9cc49cc609af626b6f8f2012-02-05T14:14:00+01:002017-02-24T11:38:23+01:00gniearkdev webAJAXjavascriptPHPtchat <p><img src="https://blog-du-grouik.tinad.fr/public/.bulle_tchat-406_t.jpg" alt="bulle_tchat-406.jpg" style="float:left; margin: 0 1em 1em 0;" title="bulle_tchat-406.jpg, août 2011" />Un tchat, mélangeant les techniques suivantes: javascript, AJAX, PHP, mysql et JSON, en moins de 150 lignes. Il y a quelques mois Hempstar proposait sur ce blog <a href="https://blog-du-grouik.tinad.fr/post/2010/04/18/test-javascript">sa version du chat</a>. Comme j'ai énormément progressé dans ces langages de programmation, je me demandais si je saurai le faire, en quelques heures, en bouffant moins de ressources réseau.</p>
<p>Réponse: Oui, sans trop lutter; Le voici à l'aide d'une iframe:</p>
<h2>Mises à jour fev 2012:</h2>
<ul>
<li>smileys (désactivables). Ceux que j'ai mis dans le package proviennent de phpBB3 <a href="http://www.phpbb.com/">http://www.phpbb.com/</a> en GNU GPL licence V2 (enfin je crois).</li>
<li>Les caracteres + et & n'étaient pas pris en charge. c'est résolu.</li>
<li>la barre de défilement ne descend automatiquement que s'il y a des nouveaux messages.</li>
<li>la touche e,ntrée envoie le message, pas un retour à la ligne.</li>
</ul>
<h2>Pour l'installer:</h2>
<p>Creez la table tchat dans une base de données:</p>
<pre class="brush: sql">CREATE TABLE `tchat` (
`time` TIMESTAMP NOT NULL ,
`pseudo` TEXT NOT NULL ,
`message` TEXT NOT NULL ,
PRIMARY KEY ( `time` , `pseudo` ( 5 ) )
) ENGINE = MYISAM</pre>
<ul>
<li>Télécharger l'archive là: <a href="https://blog-du-grouik.tinad.fr/public/tchat.tar.gz"><img src="https://blog-du-grouik.tinad.fr/admin/images/media/package.png" alt="" />tchat.tar.gz</a></li>
<li>Décompressez la dans un dossier sur votre site</li>
<li>Editez le fichier index.php pour renseigner les paramètres de la base de données</li>
</ul>
<p>C'est pret!</p>
<pre class="brush: html"><iframe src="/tchat/index.php" width="100%" height="300px;" border="1"></iframe></pre>
<h2>Quelques explications sur le code:</h2>
<h3>La base de données</h3>
<p>Basique:</p>
<pre class="brush: sql">CREATE TABLE `tchat` (
`time` TIMESTAMP NOT NULL ,
`pseudo` TEXT NOT NULL ,
`message` TEXT NOT NULL ,
PRIMARY KEY ( `time` , `pseudo` ( 5 ) )
) ENGINE = MYISAM</pre>
<h3>le code PHP</h3>
<p>Deux fonctions: l'enregistrement d'un nouveau message et l'envoi des informations sur les nouveaux messages dans un tableau au format JSON.
Lors du refresh on n'envoie que les messages dont la date est supérieure à celle passée en variable POST $lasttime.
L'enregistrement se contente d'une requête et ne retourne rien.</p>
<pre class="brush: php"><?php
//**********Options à parametrer**************
$nombreDeMessagesGardes=50;
$enableSmileys=true;
$smileysPath="smilies/";
$mysqlparam=array(
'username' => '',
'password' => '',
'host' => 'localhost',
'database' => ''
);
//********** Fin des options ************
//connexion mysql
if (!mysql_connect($mysqlparam['host'], $mysqlparam['username'], $mysqlparam['password'])) {
erreur('Impossible de se connecter à MySQL');
die;
}
mysql_query("USE ".$mysqlparam['database']);
//Nettoyer les variables en entrée
foreach($_POST as $keyname =>$value){
$$keyname=mysql_real_escape_string(htmlentities(utf8_decode($value)));
}
if (!isset($act)){
$act="";
}
switch($act)
{
case "refresh":
if(!isset($lasttime)){
die;
}
$rs=mysql_query("SELECT time,pseudo,message FROM tchat WHERE time > '".$lasttime."' ORDER BY time DESC LIMIT 0".$nombreDeMessagesGardes);
//au cas où qu'il ny ait rien dans la requete
$messages=array();
while($r=mysql_fetch_row($rs)){
$messages[]=array($r[0],$r[1],$r[2]);
}
$messages=array_reverse($messages);
echo(json_encode($messages));
die;
break;
case "add":
if((!isset($pseudo)) OR ($pseudo =="") OR (!isset($message)) OR ($message=="")){
echo "variable vide";
die; //il y a un probleme, on kill le script
}
if($enableSmileys AND file_exists($smileysPath."smileys.php")){
//les smilays
include $smileysPath."smileys.php";
foreach($phpbb_smilies as $smile){
$message=str_replace($smile['code'],'<img src="'.$smileysPath.$smile['smiley_url'].'" alt="'.$smile['smiley_url'].'"/>',$message);
}
}
mysql_query("INSERT INTO tchat (time,pseudo,message) VALUES (NOW(),'".$pseudo."','".$message."')");
die;
break;
case "":
break;
default:
//aucun des cas prévu, on stoppe le script.
die;
break;
}
?></pre>
<h3>Le code javascript</h3>
<p>Trois function, la functrion ajax utilisée par les deux autres pour faire des appels au serveur, la function pour ajouter un message et la function pour raffraichir le tchat.
Cette dernière est bouclée : t=setTimeout("refreshchat(lasttime)",3000); permet de la rappeler 3 secondes plus tard (délai qui me semble un bon compromis entre la charge réseau et la fluidité).</p>
<p>L'array contenant les derniers messages du tchat est récupéré de cette manière:</p>
<pre class="brush: javascript">eval ("messages = " + xhr.responseText);</pre>
<p>Et pour les ajouter à la fin, J'utilise le DOM avec la function appendChild:</p>
<pre class="brush: javascript">var pmessage=document.createElement("p");
pmessage.innerHTML='<em class="date">'+ messages[l][0] + '</em><em class="pseudo">' + messages[l][1] + ':</em>' + messages[l][2];
document.getElementById("tchat").appendChild(pmessage);</pre>
<pre class="brush: javascript">function onKeyEnter(key)
{
if (key == 13) {
sendmessage(document.getElementById('pseudo').value,document.getElementById('message').value);
return true;
}
return false;
}
function Ajx()
{
var request = false;
try {request = new ActiveXObject('Msxml2.XMLHTTP');}
catch (err2) {try {request = new ActiveXObject('Microsoft.XMLHTTP');}
catch (err3) {try {request = new XMLHttpRequest();}
catch (err1) {request = false;}
}
}
return request;
}
function refreshchat(time)
{
var xhr = Ajx();
xhr.onreadystatechange = function(){if(xhr.readyState == 4){
if(xhr.status == 200) {
var messages= new Array();
eval ("messages = " + xhr.responseText);
var yaDesNouveauxMessages=false;
for (var l in messages){
yaDesNouveauxMessages=true;
var pmessage=document.createElement("p");
pmessage.innerHTML='<em class="date">'+ messages[l][0] + '</em><em class="pseudo">' + messages[l][1] + ':</em>' + messages[l][2];
document.getElementById("tchat").appendChild(pmessage);
lasttime=messages[l][0];
}
if (yaDesNouveauxMessages){
//on redescend la scrollbar
document.getElementById("tchat").scrollTop=document.getElementById("tchat").scrollHeight;
}
t=setTimeout("refreshchat(lasttime)",3000);
}else{
alert("Error code " + xhr.status);
}
}};
xhr.open("POST", "index.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send('act=refresh&lasttime=' + time);
}
function sendmessage(pseudo,message)
{
pseudo = pseudo.replace(/&/g,"%26");
message= message.replace(/&/g,"%26");
pseudo = pseudo.replace(/\+/g,"%2B");
message= message.replace(/\+/g,"%2B");
if ((message=='') || (pseudo=='')){
alert('Veuillez mettre un pseudo et un message');
}
var xhr = Ajx();
xhr.onreadystatechange = function(){if(xhr.readyState == 4){
if(xhr.status == 200) {
document.getElementById("message").value="";
}else{
alert("Error code " + xhr.status);
}
}};
xhr.open("POST", "index.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send('act=add&pseudo=' + pseudo + '&message=' + message );
}</pre>
<h3>Le Body HTML:</h3>
<pre class="brush: html"><body>
<div id="page">
<div id="tchat">
<script type="text/javascript">
<!--
lasttime='0';
refreshchat(lasttime);
//-->
</script>
</div>
<div id="reponse">
<fieldset><legend>Envoyer un message</legend>
<label for="pseudo">Pseudonyme:</label><input type="text" id="pseudo"/>
<label for="message">Message</label><textarea onkeypress="onKeyEnter(event.keyCode);" id="message"></textarea>
<input type="button" value="Envoyer" onClick="sendmessage(document.getElementById('pseudo').value,document.getElementById('message').value);"/>
</fieldset>
</div>
</div>
</body></pre>
<h2>C'est super sommaire comme tchat.</h2>
<p>Il vous faudra probablement coder certains certains compléments, comme l'authentification des utilisateurs, faire des salons différents etc... L'objectif ici était juste de montrer que c'est pas tres dur, pas de fournir un produit fini, mais plutot un struc simple et facilement intégrable sur un blog, site ou extranet...</p>
<p>Je m'envoie quelques fleurs:</p>
<p>Au niveau de la charge serveur, il n'y a pas de session ouverte (mémoire économisée), Le retour d'information est relativement optimisé grâce au JSON. Idéalement on pourrait mettre en cache la valeur du dernier timestamp pour n'ouvrir une connexion mysql que s'il y a des messages au timestamp supérieur à celui envoyé par la navigateur (et donc dans la majorité des cas ne même pas ouvrir de connexion mysql).</p>Création d'un tchat (chat) avec ajax et mysql ( + php ...)urn:md5:b7a3449eb20fe0311ebff7237f87019c2010-04-19T16:00:00+02:002011-02-18T13:47:06+01:00hempstardev webAJAXjavascriptPHPtchat <h2><strong>Présentation</strong></h2>
<p><br />
Bon et bien voilà, je suis nouveau rédacteur sur ce blog =D, je viens vous proposer mes compétences en terme de développement web, ce sera un peu de tout, PHP, javascript, html, css etc etc ...
<br />
J'ai actuellement 18 ans et ça fait quelques temps que je code ce qui me vient à l'esprit, je n'ai pas encore eu de réel gros projet, mais ça ne saurait tarder ! :)
<br />
<br />
Donc voilà je vais à partir de maintenant poster des articles de temps en temps, mais je voulais vous dire aussi, si vous êtes bloqué n'hésitez SURTOUT PAS à demander en commentaire, vous pouvez demander de l'aide sur le tuto mais aussi me demander de créer un tuto, je suis à l'écoute !
<br />
<br />
Pour finir cette présentation et bien je vais faire un tuto, oui quoi de mieux pour officialiser le tout hein :p<br />
Allez hop tous et toutes à vos claviers, on va travailler !</p>
<p><br />
<br /></p>
<HR>
<p><br /></p>
<h2>Début du tuto</h2>
<p><br /></p>
<p>Tout d'abord si vous avez un soucis quelconque venez le dire en commentaire.</p>
<pre></pre>
<p>Comme le titre l'indique, je vais essayer de vous faire un cours sur "comment créer un tchat dynamique", je ne ferais pas de design, mais juste le code.</p>
<pre></pre>
<p>Ce tuto sera assez gros, et donc découpé en plusieurs parties qui sont les suivantes :</p>
<p>Partie javascript;</p>
<p>Partie php;</p>
<p>Partie Base de données.</p>
<pre></pre>
<p><br /></p>
<p>On va attaquer ici la partie javascript ( ajax ).</p>
<p>Let's go !</p>
<p><br />
<br /></p>
<HR>
<p><br /></p>
<p>Partie Javascript
<br />
<br /></p>
<p>Dans un premier temps, je ne vais pas vous coder ajax en "brute" mais avec jquery.</p>
<p>Pour ceux qui ne connaissent pas, jquery est un fichier javascript contenant des fonctions super sympas :)</p>
<p>Je vais vous donner le lien de ce dernier, pour l'utiliser on devra juste l'importer dans la page où il est nécessaire !</p>
<p><a href="http://help-to-dev.over-blog.com/ext/http://code.jquery.com/jquery-1.4.2.min.js">Telecharger Jquery</a></p>
<p>Voilà, alors pour l'importer dans une page html ( ou php ...) :</p>
<pre>[html]
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
...
</pre>
<p>Voilà ça c'est fait !</p>
<p>Passons maintenant au code :) (qui est très simple)
<br />
<br /></p>
<p>Pour rafraichir le tchat:</p>
<pre class="javascript javascript" style="font-family:inherit"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">$.<span style="color: #660066;">ajax</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span> type<span style="color: #339933;">:</span> <span style="color: #3366CC;">"GET"</span><span style="color: #339933;">,</span> url<span style="color: #339933;">:</span> <span style="color: #3366CC;">"refresh.php"</span><span style="color: #339933;">,</span> data<span style="color: #339933;">:</span> <span style="color: #3366CC;">"action=refresh"</span><span style="color: #339933;">,</span> success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>msg<span style="color: #009900;">)</span><span style="color: #009900;">{</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"Tchat"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> msg<span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></li></ol></pre>
<p>et pour l'envoi d'un message :</p>
<pre class="javascript javascript" style="font-family:inherit"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #003366; font-weight: bold;">var</span> message <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"message"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #003366; font-weight: bold;">var</span> pseudo <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"pseudo"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">$.<span style="color: #660066;">ajax</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span> type<span style="color: #339933;">:</span> <span style="color: #3366CC;">"GET"</span><span style="color: #339933;">,</span> url<span style="color: #339933;">:</span> <span style="color: #3366CC;">"refresh.php"</span><span style="color: #339933;">,</span> data<span style="color: #339933;">:</span> <span style="color: #3366CC;">"action=envoi"</span><span style="color: #339933;">,</span> success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>msg<span style="color: #009900;">)</span><span style="color: #009900;">{</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"etat"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> msg<span style="color: #339933;">;</span><span style="color: #009900;">}</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></li></ol></pre>
<p><br />
<br /></p>
<p>et voilà le code JS est fait lol ! bon ok je vous explique un peu :D</p>
<p>type: "GET" veut dire qu'on va lui passer les variable que l'on veut via "data", ici on envoi action=refresh, ce qui sera reçu par la page "refresh.php" (url) que l'on fera plus tard !!</p>
<p>success = lorsque la requête a bien était transmise et que la réponse est revenu, vous voyez alors function(msg), msg est la réponse que vous avez envoyée pour la requête, ce qu'on fera aussi dans la partie php.</p>
<p>Après c'est simple, on va afficher la réponse dans une <div id="Tchat"></div>, qui sera les messages du tchat !</p>
<p>Pour le reste, la partie envoi est pareil que celle du rafraichissement, sauf l'action qui est envoi et puis on va juste afficher l'état de la requête, par exemple si le message est pas envoyé, la page php nous retourne " pas envoyé" et ce script affiche ce dernier texte dans la <div id="etat"></div></p>
<p>Si vous ne comprenez pas document.getElementById allez voir le tuto de la section Developpement javascript :)</p>
<pre></pre>
<p>On va mettre tout le javascript dans un fichier nommé fctTchat.js et l'importer, ce sera plus clair comme code .</p>
<p>Mettre le code qui suit dans fctTchat.js</p>
<pre class="javascript javascript" style="font-family:inherit"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #003366; font-weight: bold;">function</span> refreshTchat<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $.<span style="color: #660066;">ajax</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span> type<span style="color: #339933;">:</span> <span style="color: #3366CC;">"GET"</span><span style="color: #339933;">,</span> url<span style="color: #339933;">:</span> <span style="color: #3366CC;">"refresh.php"</span><span style="color: #339933;">,</span> data<span style="color: #339933;">:</span> <span style="color: #3366CC;">"action=refresh"</span><span style="color: #339933;">,</span> success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>msg<span style="color: #009900;">)</span><span style="color: #009900;">{</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"Tchat"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> msg<span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> setTimeout<span style="color: #009900;">(</span><span style="color: #3366CC;">"refreshTchat()"</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1000</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// ce bout de code permet de relancer la function refreshTchat toutes les 1000 milliSecondes c'est à dire toutes les secondes :)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">}</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #003366; font-weight: bold;">function</span> envoi<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #003366; font-weight: bold;">var</span> message <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"message"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #003366; font-weight: bold;">var</span> pseudo <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"pseudo"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $.<span style="color: #660066;">ajax</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span> type<span style="color: #339933;">:</span> <span style="color: #3366CC;">"GET"</span><span style="color: #339933;">,</span> url<span style="color: #339933;">:</span> <span style="color: #3366CC;">"refresh.php"</span><span style="color: #339933;">,</span> data<span style="color: #339933;">:</span> <span style="color: #3366CC;">"action=envoi&message="</span><span style="color: #339933;">+</span>message<span style="color: #339933;">+</span><span style="color: #3366CC;">"&pseudo="</span><span style="color: #339933;">+</span>pseudo<span style="color: #339933;">,</span> success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>msg<span style="color: #009900;">)</span><span style="color: #009900;">{</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"etat"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> msg<span style="color: #339933;">;</span><span style="color: #009900;">}</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">}</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">refreshTchat<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></li></ol></pre>
<pre></pre>
<p>Et mettre ce code dans le fichier tchat.html :</p>
<pre>[html]
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fctTchat.js"></script>
</head>
<body>
<input type="text" id="pseudo" />Ecrivez votre pseudo ici (laissez le écrit)
<div id="Tchat" style="height:400px;width:500px;overflow:auto;border:3px double silver;padding:5px;"></div><br />
<input type="text" id="message" />tapez votre message<br />
<input type="button" value="envoyer" onclick="envoi();" /><br />
<div id="etat"></div>
</body>
</html>
</pre>
<p><br />
<br /></p>
<HR>
<p><br /></p>
<p>Partie PHP
<br />
<br /></p>
<p>Tout d'abord vous allez créer un fichier qui s'appel "refresh.php".</p>
<p>Une fois créé, nous allons commencer le code :) :</p>
<pre></pre>
<pre class="php php" style="font-family:inherit"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><a href="http://www.php.net/header"><span style="color: #990000;">header</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">"Content-Type: text/html"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// un petit header pour ne pas que tout se mélange ( ne cherchez pas lol)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><a href="http://www.php.net/mysql_connect"><span style="color: #990000;">mysql_connect</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">"adresse"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"login"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"password"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (1)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><a href="http://www.php.net/mysql_select_db"><span style="color: #990000;">mysql_select_db</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">"bdd"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><a href="http://www.php.net/isset"><span style="color: #990000;">isset</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'action'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span> AND <span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'action'</span><span style="color: #009900;">]</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">"refresh"</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><span style="color: #666666; font-style: italic;">// (2)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$requete</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">"SELECT * FROM Tchat ORDER BY ID DESC"</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// (3)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$reponse</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/mysql_query"><span style="color: #990000;">mysql_query</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$requete</span><span style="color: #009900;">)</span> or <a href="http://www.php.net/die"><span style="color: #990000;">die</span></a> <span style="color: #009900;">(</span><a href="http://www.php.net/mysql_error"><span style="color: #990000;">mysql_error</span></a><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (4)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$texte</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">""</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// (5)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #b1b100;">while</span><span style="color: #009900;">(</span><span style="color: #000088;">$donnees</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/mysql_fetch_array"><span style="color: #990000;">mysql_fetch_array</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$reponse</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><span style="color: #666666; font-style: italic;">// (6)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$texte</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">"De "</span><span style="color: #339933;">.</span><span style="color: #000088;">$donnees</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'pseudo'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">" a "</span><span style="color: #339933;">.</span><span style="color: #000088;">$donnees</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'heure'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">"<br />"</span><span style="color: #339933;">.</span><span style="color: #000088;">$donnees</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'message'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">"<br /><HR><br />"</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (7)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">}</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><span style="color: #000088;">$texte</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">""</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span> <span style="color: #666666; font-style: italic;">// (8)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$texte</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (9)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">}</span><span style="color: #b1b100;">else</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">"Il n'y a pas de message"</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (10)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">}</span><span style="color: #b1b100;">elseif</span><span style="color: #009900;">(</span><a href="http://www.php.net/isset"><span style="color: #990000;">isset</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'action'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span> AND <a href="http://www.php.net/isset"><span style="color: #990000;">isset</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'pseudo'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span> AND <a href="http://www.php.net/isset"><span style="color: #990000;">isset</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'message'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span> AND <span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'pseudo'</span><span style="color: #009900;">]</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">""</span> AND <span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'message'</span><span style="color: #009900;">]</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">""</span> AND <span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'action'</span><span style="color: #009900;">]</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">"envoi"</span> <span style="color: #009900;">)</span><span style="color: #009900;">{</span><span style="color: #666666; font-style: italic;">// (11)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$message</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/mysql_real_escape_string"><span style="color: #990000;">mysql_real_escape_string</span></a><span style="color: #009900;">(</span><a href="http://www.php.net/htmlspecialchars"><span style="color: #990000;">htmlspecialchars</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'message'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (12)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$heure</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/strftime"><span style="color: #990000;">strftime</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">"%Hh%M"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// (13)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$pseudo</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/mysql_real_escape_string"><span style="color: #990000;">mysql_real_escape_string</span></a><span style="color: #009900;">(</span><a href="http://www.php.net/htmlspecialchars"><span style="color: #990000;">htmlspecialchars</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'pseudo'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (14)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$requete</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">"INSERT INTO Tchat VALUES('<span style="color: #006699; font-weight: bold;">$pseudo</span>','<span style="color: #006699; font-weight: bold;">$message</span>','<span style="color: #006699; font-weight: bold;">$heure</span>','')"</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// (15)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <a href="http://www.php.net/mysql_query"><span style="color: #990000;">mysql_query</span></a><span style="color: #009900;">(</span><span style="color: #000088;">$requete</span><span style="color: #009900;">)</span> or <a href="http://www.php.net/die"><span style="color: #990000;">die</span></a> <span style="color: #009900;">(</span><a href="http://www.php.net/mysql_error"><span style="color: #990000;">mysql_error</span></a><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// (16)</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">"Message envoyé"</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">}</span><span style="color: #b1b100;">else</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">"Le message n'a pas pu être envoyé"</span><span style="color: #339933;">;</span></div></li></ol></pre>
<p>(1) : On se connecte à la base de données, remplacez bien tout par vos identifiants et bdd;</p>
<p>(2) : On vérifie grâce à isset si $_GET['action'] existe et est bien égale à la valeur "refresh", sinon on ne fait rien;</p>
<p>(3) : On écrit la requête dans une variable, ici on sélectionne tout les enregistrements qui sont dans la table Tchat et on les ordonne par leurs ID, DESC permet d'inverser le listing, en gros d'avoir les derniers messages en haut et les anciens vers le bas ...;</p>
<p>(4) : On exécute la requête mysql;</p>
<p>(5) : On créé la variable où sera stocké tout les messages du tchat, avec leurs balises;</p>
<p>(6) : Affichage par boucle des enregistrements ( voir tuto php);</p>
<p>(7) : Alors ici c'est déjà plus intéressant, on va créer tout ce qui sera dans la <div id="Tchat"></div>, même les balises, etc etc, sinon ce ne serait que du texte brute et pas structuré, ici j'ai opté pour du très simple, affichage du pseudo et de l'heure de l'envoi, un saut grâce à <br /> puis affichage du message, puis deux sauts pour le message suivant;</p>
<p>(8) : On test si $texte n'est pas vide, car si c'est le cas, ça veut dire qu'il n'y a pas de message dans la base de données !</p>
<p>(9) : Si ce n'est pas vide, on l'affiche ( ce qui sera stock dans la variable msg dans le script javascript au dessus);</p>
<p>(10) : Sinon on envoi juste un texte disant qu'il n'y a pas de message;</p>
<p>(11) : Si pas (2) alors on vérifie que $_GET['action'] existe bien, que l'on a le pseudo et le message envoyés par GET;</p>
<p>(12) : On stock de façon sécurisée le message à envoyer dans $message;</p>
<p>(13) : On récupère l'heure et la minute actuelle;</p>
<p>(14) : On stock de façon sécurisée le pseudo envoyée dans $pseudo;</p>
<p>(15) : On créé la requête pour insérer le message dans la table Tchat;</p>
<p>(16) : On exécute cette dernière;
<br />
<br /></p>
<p>Voilà on a fait le tour du code php, si vous avez pas compris un truc, postez un commentaire.
<br />
<br /></p>
<HR>
<p><br /></p>
<p>Partie BASE DE DONNES
<br />
<br /></p>
<p>Alors pour ce qui est de la base de données c'est très simple, on va juste créer une table qui s'appelle "Tchat" avec les champs suivants:</p>
<p>pseudo
message
heure
ID -> en auto-increment ( case à cocher le plus souvent)
<br />
<br /></p>
<HR>
<p><br /></p>
<p>et c'est TOUT ! hehe
<br />
<br />
<br /></p>
<p>Maintenant vous pouvez améliorer ce tchat, le design, faire un système de login pour ne pas laisse les pseudo en haut, faire un système d'émotes via un regex en php ... hésitez pas à demander en commentaires ce que vous voulez, je vous le ferais !
<br /></p>
<p>Bonne journée !</p>