plonge du côté javascript et surtout AJAX.
AJAX permet de communiquer avec un serveur en arrière plan du navigateur.
Le schèma de communication peut être le suivant entre HTML/JS et AJAx
- (0) Texte utilisateur ---> Zone de saisie --(validation)--> procédure JS (1)
(1) procédure JS ---> mise à jour d'un afficheur local (un div par exemple) par le texte saisi en local
(1) procédure JS ---> transmission du texte saisi au serveur par AJAX + reception d'un flux de mise à jour de l'afficheur local
(2) procédure JS temporisée pour recevoir la mise à jour de l'afficheur à partir du serveur par AJAX
Pour te motiver, voici une approche simple sous forme d'exemple:
Une page HTML de départ: chat.HTM
Code : Tout sélectionner
<script>
//////////////////////////////////////////////////////
// A J A X ///////////////////////////////////////
//////////////////////////////////////////////////////
//fonction de création de l'objet xhr d'Ajax et son protocole de communication
function request(url, result) {
//Création de l'objet Xhr selon les navigateurs
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/html');
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
//cas d'erreur
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
//fonction d'écoute du résultat venat du serveur appelé
http_request.onreadystatechange = function(){ returnResult(http_request, result); };
//fonction d'appel d'un serveur + transmision des paramètres GET/POST
//si POST, activer ce qui suit:
//http_request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//Par défaut c'est GET, à remplacer par POST si c'est le cas
http_request.open('GET', url, true);
http_request.send(null);
}
//fonction évenementielle qui observe l'arrivée du résultat
function returnResult(http_request, result) {
//si l'appel Ajax au serveur est envoyé
if (http_request.readyState == 4) {
//si la réponse du serveur est reçue complétement
if (http_request.status == 200) {
//mise à jour du résultat
result.innerHTML += (http_request.responseText);
window.status = ('Ready.');
} else {
window.status = ('There was a problem with the request.');
}
}
else window.status = ('Please wait...');
}
//fonction d'envoi du message au serveur
function envoyerMsg(texte){
url = "chat.php?msg="+texte;
request (url, document.getElementById("afficheur"));
}
</script>
<h1>Chat</h1>
<p>Messages</p>
<div id="afficheur" style="width:100%; height:300px; border-style:solid; border-width:1px; overflow:Auto"></div>
<p>Votre message</p><input id="msg" style="width:800px">
<input type="button" style="width:30px" value="Ok" onClick="envoyerMsg(document.getElementById('msg').value);"><?php
//session
session_start();
//date du traitement
$date = date("d-m-Y H:i:s");
if ($_GET["msg"]){
//add msg to current club messages
$f = fopen("msg.txt", "a");
fwrite ($f, session_id()."|$date|".trim($_GET["msg"])."\r\n");
fclose($f);
}
//retourne le dernier flux non transmis
$msgs = file("msg.txt");
$msg_table = "";
//echo "<pre>";print_r($msgs);echo "</pre>";
$lastUpdateDate = $_SESSION["lastUpdateDate"]?$_SESSION["lastUpdateDate"]:null;
if ($msgs) foreach ($msgs as $msg){
List($id_lu, $date_lue, $msg_lu) = explode ("|", $msg);
//echo $lastUpdateDate;echo "<pre>"; print_r($msg);echo "</pre>";
if ($lastUpdateDate < $date_lue){
//messages à retourner à l'appelant
$msg_table .= $msg_lu."<br />";
}
}
//marquer comme dernière maj
$_SESSION["lastUpdateDate"] = $date;
//envoyer la mise à jour des messages
echo $msg_table;
?>