www.infkoffler.com - Site de cours d'informatique

Accueil

Java Standard Edition

Java EE 5

Visual Basic .Net 2005

Cours Javascript - DOM - DHTML

Nouveautés sur le site

Contacts

Accueil > Cours Ajax > Chat Ajax

____________________________________________________________________________________________________

Connexion

AJAX

Voici une petite application web de chat, écrite avec l'objectif de montrer un exemple d'utilisation d'Ajax, donc uniquement à ambition pédagogique.

APPLICATION messagerie instantanée - Sabri Koffler Février 2008 - Version 2.0 du 11/02/2008

A la fin de ce document, vous trouverez les sources complets de l'application web.

6 fichiers:
- index.html(1/6)
- chat.asp( 2/6)
- affMessages.asp( 3/6)
- ajoutMessage.asp( 4/6)
- deconnect.asp ( 5/6)
- content.txt( 6/6), contiendra tous les messages.
contenu initial:"
- Chat Ajax Version 2.0 S.Koffler 02/2008 -

" Remarque : passer à la ligne, après cette première ligne.

Le fichier content.txt contient tous les messages.

Ce fichier doit contenir au départ une seule ligne, avec un passage à la ligne. Cette première ligne est inutilisée, elle permet d'indiquer que c'est un fichier de chat(ligne de commentaire)!

I) Généralités sur l’application de messagerie instantanée

a)Le langage asp 3.0 choisi

Dans toute cette application, le langage côté serveur choisi et l’asp 3.0( asp classique). C’est une occasion de pratiquer ce langage. Si vous avez un serveur Microsoft capable d’exécuter de l’ASP .net, il saura exécuter les pages .asp de l’asp classique.
Toute autre langage côté serveur aurait pu être choisi, comme l’ASP .NET 2.0, le PHP, ou encore les servlets java… D’ailleurs il vous saura aisé de comprendre la partie asp, même si vous ne connaissez pas le langage( c’est du VBScript), car les parties en asp sont très peu nombreuses( uniquement les 2 fichiers affMessages.asp et ajoutMessage.asp). Et ces 2 fichiers ne présentent pas de difficulté algorithmique.

Il est important que l'utilisateur n'oublie pas de se déconnecter, après avoir utiliser le chat. Car son écran est rafraîchi toutes les 2 secondes. Toutes les 2 secondes, une requête HTTP demande au serveur web tout le contenu du fichier texte content.txt, puis on l'affiche entièrement. Le serveur web est donc beaucoup et continuellement sollicité. Et on ne se rend pas forcément compte que cela demande autant de ressources du serveur web, surtout quand on ne reçoit pas de messages, et qu'on ne reçoit pas de messages à l'écran!

b)Le principe

La messagerie instantanée présentée est dans une version minimaliste, afin notamment de faciliter la compréhension, et de pouvoir se pencher plus sur le côté ajax de l’application. Le programme sera aisément améliorable.

Le principe est d’utiliser un fichier comme alternative à une base de données, pour retenir tous les messages. La technologie Ajax est utilisée.

L'objectif de l'application est de fournir un exemple d'intérêt d'ajax, ainsi qu'un exemple d'utilisation d'ajax. Il est sûrement possible d'utiliser d'autres algorithmes beaucoup plus efficaces que celui utilisé ici, pour faire le chat.

Le login est minimaliste, et n'utilise pas les variables de session, ce qui aurait simplifié la programmation.

AVERTISSEMENTS: Etant donné qu'on utilise un fichier, et non une base de données, on peut rencontrer des problèmes de non envoi d'un message( rencontré uniquement sous firefox à ce jour, je ne sais pour quelle raison. Sous internet explorer, pas de pb). Dans ce cas, l'internaute qui envoie s'en rend compte, car son message n'est pas affiché. Ces envois ratés sont dûs à une tentative d'écriture dans le fichier, alors qu'un autre internaute et en train de lire ce fichier(on ne peut pas modifier un fichier en cours d'utilisation), ou qu'il est en train de le modifier. D'ailleurs, cela se produit souvent( sûrement à chaque fois), sur firefox, quand on envoie deux messages trop rapidement l'un à la suite de l'autre.
De plus, on lit tout le fichier et toutes les secondes pour rafraîchir l'affichage de chaque internaute!
J'ai gardé un fichier pour simplifier le programme, et pouvoir se concentrer sur la programmation Ajax.

II)Explications du fichier index.html

C'est une page de login. Le login est minimaliste, et n'utilise pas les variables de session, ce qui aurait simplifié la programmation. Aucun mot de passe n'est demandé, pour simplifier(de toute façon, il aurait été difficile de gérer les mots de passe sans base de données).
On passe le pseudo de la page index.html à chat.asp par la méthode get. Puis on le passe par POST à ajoutMessage.asp , et aussi par post à chat.asp quand on valide le formulaire.

III)Explications du fichier chat.asp

La partie <head> contient un script de sept fonctions Javascript. Quatre fonctions concernent la réception des messages, et deux autres fonctions concernent l'émission des messages.

Deux objets xmlHttpRequest sont utilisés dans toute l'application. Un pour effectuer toutes les requêtes de réception ( l'objet objXMLHttp). Et un autre pour effectuer toutes les requêtes d'envoi( l'objet objEnvoiXMLHttp). Ces deux objets sont des variables globales. On peut donc y accéder sans problème dans les fonctions.

III.a) La fonction getObjXMLHttp()

function getObjXMLHttp() {

var objXMLHttp = null;

if (window.XMLHttpRequest) { //Cas de firefox et d'autres navigateurs

objXMLHttp = new XMLHttpRequest();

}

else

{

if (window.ActiveXObject) { //cas de internet explorer

try {

objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e) {

objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

} //fin if

} //fin else

return objXMLHttp; //dans tous les cas

} //fin fonction getObjXMLHttp

Cette fonction retourne un objet de la classe xmlHttpRequest, selon le navigateur que possède l’internaute. C’est une fonction classique, dont on retrouve l’équivalent partout où on trouve de l’ajax ! L'objectif de la méthode est d'instancier un objet xmlHttpRequest. Cette instanciation est différente selon le navigateur utilisé. On instancie donc un objet xmlHttpRequest dans le cas de firefox, puis dans le cas de internet explorer.

III.b) La fonction maFonctionRecevBoucle( ) ( concerne la réception des messages)

//****************

//Fonction maFonctionRecevBoucle()

//*********************

//NE PAS OUBLIER DE SE DECONNECTER, SINON LE RAFRAICHISSEMENT BOUCLE SANS CESSE, ET PREND BEAUCOUP DE RESSOURCES DE VOTRE SERVEUR WEB!!!

function maFonctionRecevBoucle()

{

if (objXMLHttp.readyState == 4) { //4 = terminé

var obj = document.getElementById("recus");

obj.innerHTML = objXMLHttp.responseText;

window.setTimeout( chercherMessageBoucle, 2000); //pour faire un bouclage du rafraichissement, sinon ne le fait qu'une fois

//cet endroit est bien choisi, car la page a été cherchée, et l'affichage est terminé. C'est à cet

//endroit qu'il faut attendre de nouveau 1s(ou autre durée): on attend 1 s après le dernier affichage. Si la

//page a mis longtemps à se charger, on n'est pas impacté.

}

C’est la fonction qui est appelée par l’objet xmlHttpRequest à chaque changement d’état concernant la requête d’obtention du contenu de la page affMessages.asp. Le seul état qui nous intéresse est l'état 4( état terminé).
Cette fonction, si on est dans l'état terminé, place objXMLHttp.responseText(c'est à dire le contenu de la page affMessages.asp), dans la balise DIV dont l'id est "recus"( c'est la partie de l'écran où sont affichés les messages). Puis on déclenche une minuterie(qui n'a lieu qu'une fois, bien sûr) disant qu'il faudra exécuter la fonction chercherMessage() dans 1 seconde.
Cet appel à chercherMessage, c'est pour faire un bouclage du rafraichissement, sinon ca ne le fait qu'une fois.
Cet endroit est bien choisi, car la page a été cherchée, et l'affichage est terminé. C'est à cet endroit qu'il faut attendre de nouveau 1s(ou autre durée): on attend 1 s après le dernier affichage. Si la page a mis longtemps à se charger, on n'est pas impacté.

III.c)La fonction maFonctionRecevUnique( concerne la réception des messages)

//****************

//Fonction maFonctionRecevUnique()

//*********************

function maFonctionRecevUnique()

{

if (objXMLHttp.readyState == 4) { //4 = terminé

var obj = document.getElementById("recus");

obj.innerHTML = objXMLHttp.responseText;

}

Cette fonction est identique à la fonction maFonctionRecevBoucle, sauf qu'elle rafraîchit l'écran une seule fois. Il n'y a pas de boucle de rafraîchissement. Cette fonction est utilisée par la fonction d'envoi des messages, pour rafraîchir l'écran une fois que celui-ci a été envoyé.

III.d) La fonction chercherMessageBoucle() ( concerne la réception des messages)

//Function chercherMessageBoucle

// NE PAS OUBLIER DE SE DECONNECTER, SINON LE RAFRAICHISSEMENT BOUCLE SANS CESS, ET PREND BEAUCOUP DE RESSOURCES DE VOTRE SERVEUR WEB!!!

function chercherMessageBoucle()

{

var objDate = new Date();