Niveau
..........
En rapport...

Une shoutbox, c'est quoi ?

Une shoutbox est une sorte de mini tchat, avec deux différences majeure :

  • Les messages sont persistants (un nouveau venu peu voir votre message d'il y a 1h)
  • Il n'y a pas de liste de pseudo connecté

Principe

Nous allons afficher une div vide.
Son contenu va être chargé a partir d'un fichier. Il s'agit des messages.
En dessous de cette div va être affiché un formulaire avec 2 champs texte et un bouton. Le 1er pour le pseudo, le 2nd pour le message. Le bouton servira a soumettre le tout.
Lors de la soumission on va appeler, via xmlhttprequest (pour éviter les rafraichissement de page inutile), une page php qui va enregistrer dans un fichier le pseudo et le message puis va renvoyé a l'objet xmlhttprequest le contenu intégral de la shoutbox.
Il ne reste plus qu'a afficher ce contenu dans la div prévu a cet effet.

Code

En plus des codes décrit ci-dessous vous allez avoir besoin des code suivant :
La fonctions d'appel de l'objet XMLHTTPRequest et
La fonction de gestion de validation de formulaire
Commencons par le code HTML :

html4strict
<div id="shoutbox">
			<div id="shoutbox_content"></div>
			<div id="shoutbox_write"><form name="shoutform" action=""><input type="text" id="shout_nick" value="" title="Pseudo" maxlength="10" /><input title="Message" type="text" id="shout_txt" value="" maxlength="255" /><input type="submit" id="shout_send" value="Ok" onclick="Shout_Send();return false;" /></form></div>
		</div>
		<script type="text/javascript">Shout_reload();shout_Scroll();</script>

On note l'apelle sucéssif à 2 fonctions javascript. Le detail des fonctions est ci-dessous.

javascript
var shoutbox_refresh;
function Shout_Refresh() {
/*active le refresh de la shoutbox toute les 10 secondes*/
	shoutbox_refresh=setTimeout("Shout_reload()",10000);
}
function Shout_reload() {
/*Envoie la fonction XMLHTTPRequest de chargement de la shoutbox */
	AJAXRequest("shoutbox.php","Shout_Show","POST","shout=1");
}
function Shout_Show(v) {
/*Affiche le contenu de la shoutbox et initie le prochain refresh*/
	document.getElementById('shoutbox_content').innerHTML=v;
	shout_Scroll();
	Shout_Refresh();
}
function shout_Scroll() {
/*Scroll la div vers le bas (en position 99999. Si cette position n'existe pas, c'est la plus grande existante qui sera prise par le navigateur*/
	document.getElementById("shoutbox_content").scrollTop = 99999;
}
function Shout_Send() {
/*Envoie le message*/
	if (validateForm('shoutform')) {
		AJAXRequest("shoutbox.php","Shout_Show","POST","shout=2&n="+escape(document.getElementById('shout_nick').value)+"&t="+escape(document.getElementById('shout_txt').value));
		document.getElementById('shout_txt').value='';
	}
}

Passons maintenant au code php (le nom du fichier est shoutbox.php) :

php
/*Chemin vers le fichier qui va contenir les messages*/
$fichier="shout.log";
/*Maximum de message enregistré*/
$maxmess=10;
 
if (@$_POST['shout'] == '1') {
/*Lecture du fichiers, pour l'affichage*/
	echo @file_get_contents($fichier);
}
if (@$_POST['shout'] == '2') {
/*Ecriture du message*/
	$f=@file($fichier);
	if ($f) {
		if (count($f)>=$maxmess)
			array_shift($f);
		$f = array_map("rtrim", $f);
	} else
		$f=array();
	array_push($f,'<span class="shout_nick">'.htmlentities(urldecode($_POST['n'])).' : </span><span class="shout_msg">'.htmlentities(urldecode($_POST['t'])).'</span><br />');
	$f=implode ("\n", $f);
	$handle = fopen($fichier);
	fwrite($handle, $f);
	fclose($handle);
/*pour finir on affiche le contenu de la shoutbox*/
	echo $f;
}

A vous de jouer

Ce code n'est pas parfait.
Certain amélioration ne sont pas faite pour amélioré la lisibilité, d'autre pour vous laisser chercher…
On pourrait notamment, charger le contenu de la shoutbox au chargement de la page, sans attendre le 1er refresh :

html4strict
<div id="shoutbox">
			<div id="shoutbox_content">
<?php echo @file_get_contents('shout.log'); ?>
</div>
			<div id="shoutbox_write"><form name="shoutform" action=""><input type="text" id="shout_nick" value="" title="Pseudo" maxlength="10" /><input title="Message" type="text" id="shout_txt" value="" maxlength="255" /><input type="submit" id="shout_send" value="Ok" onclick="Shout_Send();return false;" /></form></div>
		</div>
		<script type="text/javascript">Shout_reload();shout_Scroll();</script>

On pourrait aussi styliser un peu ça :

css
#shoutbox {
	border:1px solid #000
}
#shoutbox_content {
	background-color:#fff;
	height:50px;
	overflow:auto
}
#shout_nick {
	width:100px
}
.shout_nick {
	font-weight:bold
}
.shout_msg {
	color:#999
}

Vous pourriez aussi :

  • Rajouter la gestion des smiley,
  • Celle des liens
  • Afficher la date des messages…

iDo 20/03/2006 10:11

Une shoutbox, c'est quoi ? · 01/01/1970 01:00