Module Chat / Rafraichissement de la page

02 mai 2007, 11:35

Bonjour,

J'ai vu que quelques messages dans les archives qui concernaient ce thème, mais je n'arrive pas à comprendre le mode de fonctionnement.

J'essaye de réaliser un module de chat, type MSN, et j'aimerais que :
- lorsque je saisi un message et fais "envoyer", le message s'affiche dans une fenêtre de dialogue au dessus
- la ligne de saisie se vide

Bien entendu, j'aimerai que cette procédure se fasse sans qu'il y ait rechargement flagrant de la page...Alors, peut être quelqu'un connait-il la technique permettant de le réaliser ?

Merci beaucoup

02 mai 2007, 13:43

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);">

Et une page serveur: chat.PHP

<?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;
?>

03 mai 2007, 14:15

Salut Sadeq

Merci pour ta réponse complète. Je viens de "tester" ce code sur 2 pages, et je pense que cela répond bien à ma problématique.

Bon, maintenant, je vais prendre 2 aspirines, me faire 5l de café et essayer de bien comprendre ces codes...

Un grand merci à toi !

Module Chat / Rafraichissement de la page

Qui est en ligne