Module Chat / Rafraichissement de la page

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Module Chat / Rafraichissement de la page

par nerran » 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 !

par sadeq » 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;
?>

Module Chat / Rafraichissement de la page

par nerran » 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