• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

TP : Un chat en jQuery

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Je vous propose un projet ambitieux : l'écriture d'un chat en jQuery. Si vous pensez que vous n'y arriverez jamais, relisez les titres des chapitres que vous avez lus jusqu'ici et prenez un peu de recul. Laissez aller votre imagination et demandez-vous ce qu'est un programme de chat, ce qu'il implique et ce que vous devrez mettre en place en jQuery.

Une fois que vous aurez pris ce temps de réflexion, poursuivez la lecture et je vous donnerai toutes les instructions pour que vous arriviez à écrire ce programme.

Instructions pour réaliser le TP

Qui n'a jamais discuté en direct avec ses proches en utilisant une application de chat ? Ce genre de programme permet de saisir de courts messages textuels qui seront affichés chez toutes les personnes qui suivent la conversation. Si une d'entre elles envoie une réponse, elle sera également affichée chez toutes les personnes qui suivent la conversation. Le principe du chat étant posé, vous trouverez à l'image suivante un exemple d'exécution du programme de chat que vous allez développer.

D'une simplicité désarmante, ce programme est également très efficace
D'une simplicité désarmante, ce programme est également très efficace

Voici quelques remarques pour partir du bon pied :

  • Vous pouvez tester ce programme localement, en utilisant un serveur Apache, mais je vous conseille de le déposer sur un serveur Web afin que tous vos amis puissent l'utiliser.

  • Lorsqu'un internaute envoie un message, les données du formulaire doivent être envoyées au programmechat.php. Ce programme met à jour le fichierac.htmque vous utiliserez pour rafraîchir le contenu de la zone de conversation.

  • Le rafraîchissement de la conversation devra se faire toutes les 4 secondes. Vous pouvez diminuer cette période, mais le serveur sur lequel sera placé le programme risque de ne pas apprécier si de nombreuses personnes lancent une conversation.

Le code PHP

Ce chat fonctionne grâce à un code PHP que je vais vous donner afin que vous puissiez tester votre application au fur et à mesure. Si vous n'y comprenez rien, ce n'est pas très grave, l'important est que cela fonctionne. Et pour ceux qui savent développer en PHP, n'hésitez pas à améliorer le script.

<?php
$nom = $_POST['nom'];                    //On récupère le pseudo et on le stocke dans une variable
$message = $_POST['message'];            //On fait de même avec le message
$ligne = $nom.' > '.$message.'<br>';     //Le message est créé 
$leFichier = file('ac.htm');             //On lit le fichier ac.htm et on stocke la réponse dans une variable (de type tableau)
array_unshift($leFichier, $ligne);       //On ajoute le texte calculé dans la ligne précédente au début du tableau
file_put_contents('ac.htm', $leFichier); //On écrit le contenu du tableau $leFichier dans le fichier ac.htm
?>

Je crois que j'ai tout dit. Alors, c'est à vous de jouer. Progressez pas à pas. N'écrivez pas trop d'instructions à la fois et surtout faites des tests le plus fréquemment possible pour valider ce que vous aurez écrit.

Correction

Je vais maintenant vous donner ma correction. Je dis bien ma correction et pas la correction. Il existe en effet plusieurs façons de résoudre le problème. Si vous êtes partis sur une tout autre technique et si cela fonctionne, je vous félicite. Par contre, si vous êtes partis sur une autre technique et que vous n'arrivez pas à obtenir le résultat escompté, je suis sûr que vous trouverez dans cette correction des éléments qui vous feront progresser jusqu'à votre solution…

Écriture du code HTML et CSS

Je ne vais pas m'attarder sur ce point, ce n'est pas vraiment le but de ce cours ni de ce TP. Voici le code HTML et CSS de la page du chat, à vous de l'adapter au besoin :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chat jQuery</title>
      <style type="text/css">
      #conversation {
        width: 300px;
        height: 400px;
        border: black 1px solid;
        background-color: #efecca;
        overflow-x: hidden;
        overflow-y: scroll; 
        padding: 5px;
        margin-left: 10px;
      }
      fieldset {
        width: 330px;
        background-color: #e6e2af;
        border: black 1px solid;
      }    
    </style>
  </head>
  
  <body>
   <fieldset>
     <legend>Un chat en jQuery</legend>
      <div id="conversation"></div><br />
      <form action="#" method="post">
        <input type="text" id="nom" value="pseudo" size="6">
        <input type="text" id="message" size="27">
        <button type="button" id="envoyer" title="Envoyer"><img src="envoyer.gif"></button>
      </form>
    </fieldset>
  </body>
</html>

Écriture du code jQuery

Il ne reste plus qu'à donner vie à cette page en y insérant des instructions jQuery. Insérez le code suivant après la balise</fieldset>:

  $(function() {
    afficheConversation();
      
    $('#envoyer').click(function() {
        var nom = $('#nom').val();
        var message = $('#message').val();
        $.post('chat.php', {
            'nom': nom,
            'message': message
        }, afficheConversation);
    });

    function afficheConversation() {
      $('#conversation').load('ac.htm');
      $('#message').val('');
      $('#message').focus();
    }
      
    setInterval(afficheConversation, 4000);
  });

Quoi ? C'est tout ? Ces quelques lignes vont faire fonctionner le chat ?

Eh bien… oui ! Rappelez-vous de la devise de jQuery : « Write less, do more », ce qui signifie « Écrivez moins pour faire plus ». Une fois de plus, jQuery montre sa puissance à travers ces quelques lignes de code.

Ligne 1, remarquez la référence à la version minimisée de jQuery sur le CDN Google.
Le code jQuery occupe les lignes 3 à 19. Lorsque le DOM est disponible ($(function() {), la méthodeafficheConversation()est appelée. Elle est définie entre les lignes 14 et 16. Cette méthode se contente d'afficher le contenu du fichierac.htmdans la balise<div id="conversation">:

$('#conversation').load('ac.htm');

Cette simple instruction est responsable de tout ce qui est affiché dans la balise<div>. Merci jQuery !

Les lignes 5 à 11 représentent la méthode de gestion événementielle des clics sur le bouton de commande. Lorsque le bouton est cliqué, le contenu des zones de texte d'identifiants#nomet#messageest stocké dans les variablesnometmessage:

var nom = $('#nom').val();
var message = $('#message').val();

L'instruction suivante utilise la fonction jQuerypost()pour poster ces données au programmechat.php. Lorsque les données ont été envoyées, la fonction de retourafficheConversation()est exécutée, ce qui provoque l'affichage du message qui vient d'être posté dans la zone de conversation :

 $.post('chat.php', {'nom':nom, 'message': message }, afficheConversation);

Pour faciliter la vie de l'utilisateur, l'instruction suivante supprime le contenu de la zone de texte#message, mais garde celui de la zone de texte#pseudo. Il est en effet probable qu'il veuille poursuivre la conversation en gardant le même pseudo mais pas le message qu'il vient de taper. Pour lui éviter d'avoir à effacer la zone de saisie du message à chaque fois qu'il veut intervenir, une instruction jQuery est suffisante :

$('#message').val('');

La troisième instruction de la fonctionafficheConversation()donne le focus à la zone de saisie du message. Il suffit donc à l'utilisateur de saisir un message et de cliquer sur le bouton de commande pour l'envoyer :

$('#message').focus();

Il ne reste plus qu'une instruction pour terminer le TP. Cette instruction est très importante, car c'est elle qui va exécuter à intervalles réguliers la méthodeafficheConversation()et ainsi mettre à jour la zone de conversation lorsque d'autres personnes que vous posteront un message. Bien entendu, cette instruction fait appel à la fonction JavaScriptsetInterval()en précisant le nom de la fonction à exécuter, sans parenthèses ni guillemets, le délai entre deux exécutions étant exprimé en millisecondes :

setInterval(afficheConversation, 4000);

Certains d'entre vous se demandent peut-être pourquoi la fonctionafficheConversation()est invoquée à deux reprises (lignes 4 et 9), alors que la fonctionsetInterval()l'exécute régulièrement toutes les 4 secondes. Ces deux appels ne sont là que pour le confort de l'utilisateur :

  • Ligne 4, la zone de conversation est remplie dès la disponibilité du DOM ;

  • Ligne 9, la zone de conversation est mise à jour juste après que le message a été posté.

J'espère que vous avez apprécié ce TP. Il ne tient qu'à vous de l'améliorer. Vous pourriez par exemple :

  • Permettre aux chatteurs d'utiliser un avatar graphique ;

  • Autoriser des messages sur plusieurs lignes ;

  • Améliorer la mise en forme des messages postés en affectant une couleur d'arrière-plan différente un message sur deux ;

  • Définir plusieurs groupes de conversation (ici toutes les personnes qui affichent la pagechat.htmpartagent le même espace de conversation).

Il ne s'agit là que de quelques suggestions, et il y a fort à parier que vous trouverez sans peine plusieurs autres améliorations à ce programme.

Exemple de certificat de réussite
Exemple de certificat de réussite