Pour ce TD, nous allons créer un composant de tchat. Il est basé sur une architecture client (à développer) / serveur (qui existe déjà)
Notre composant doit être très simple à installer sur n'importe quel site Web. C'est pourquoi il sera codé sous forme d'un script JavaScript (avec jQuery), livré avec un feuille de style CSS. L'utilisateur aura seulement à intégrer jQuery, notre script, et notre feuille de style sur sa page pour faire fonctionner le composant. Notre script cherchera sur la page tout élément div ayant la classe tchat, et remplacera dynamiquement cet élément par notre propre contenu.
Il tourne sur http://aiakide.net/tptchat . Il autorise l'envoi de messages constitués d'un texte et d'un login (le pseudo de l'auteur du message). Les messages peuvent faire jusqu'à 1000 caractères (pouvant intégrer du HTML), et les pseudos jusqu'à 20 caractères (caractères alphanumériques uniquement). Le serveur ne garde les messages que pendant 5 minutes; ensuite, ils sont effacés. Chaque message est identifié par un numéro; et ils sont triés chronologiquement: le message le plus récent a le numéro le plus élevé.
Il expose plusieurs services:
check?text=untexteuntexte est correct.check?login=unloginunlogin est correct.getLoginMaxLengthgetNumLastMsggetTextMaxLengthreadDate?num=numéromessagenuméromessage.readLogin?num=numéromessagenuméromessage.readText?num=numéromessagenuméromessage.write?login=unlogin&text=untexteunlogin et le texte untexte. Retourne le n° du message créé.Testez le serveur en utilisant directement les URL des services dans un navigateur. Par exemple, http://aiakide.net/tptchat/getLoginMaxLength. Essayez d'envoyer et de lire un message. Essayez de lire le dernier message. Notez les différentes étapes.
Pour simplifier le développement, nous allons préparer l'interface de notre composant de tchat dans un fichier HTML séparé, nommé tchat.html. Créez l'interface HTML d'un composant de tchat (à l'intérieur d'un bloc div), et sauvegardez sous le nom tchat.html. Évidemment, ce fichier ne contiendra pas un document HTML complet, mais juste un fragment (notre bloc div et son contenu). Le client doit comporter une zone pour afficher les messages et une zone pour saisir les messages.
Cette zone donne, pour chaque message, la date, le login de l'auteur, et le texte du message. Elle a une hauteur fixe, de 400 pixels, quel que soit le nombre de messages.
Cette zone permet de saisir le login et le texte des nouveaux messages. Le texte du message peut contenir du HTML, notamment des images. À l'affichage ces images ne doivent pas faire plus de 60 pixels de haut. Idéalement, la zone de saisie de texte devrait permettre d'insérer des images prédéfinies (émoticons).
Commencez par développer une maquette statique (HTML+CSS, pas de JavaScript, pas de communication avec le serveur), comportant quelques messages que vous inventez pour l'occasion.
Récupérez n'importe quelle page Web de votre création; par exemple, votre vieux CV HTML/CSS. Intégrez jQuery dans cette page, ainsi que la feuille de style de votre tchat, et un script tchat.js, que nous allons créer (pour l'instant le fichier est vide). Enfin, ajoutez un élément div ayant la classe tchat.
Maintenant, dans le fichier tchat.js, nous allons ajouter un code JavaScript/jQuery/AJAX (ouf!) qui, lorsque la page est chargée, remplace tout élément div ayant la classe tchat par le contenu de notre fichier HTML. Normalement, un tchat devrait apparaître sur la page !
Pour l'instant, notre tchat est plutôt bidon ! Pour la suite, toujours avec JavaScript/jQuery/AJAX, ajoutez de vraies fonctionnalités avec votre tchat. D'abord, l'envoi de messages (vous pouvez consulter la liste des messages reçus par le serveur dans http://aiakide.net/tptchat/temp, ou bien à l'aide du service readText), puis leur affichage.
Votre client de tchat est terminé ? Maintenant, codez votre propre serveur de tchat. Ce n'est pas forcément très long, le serveur d'exemple sur http://aiakide.net/tptchat ne fait pas plus de 100 lignes de code, commentaires compris.
Votre composant est terminé ! Vous pouvez maintenant le distribuer ? Sous quelle licence ? Comment présenterez-vous la page de téléchargement de votre composant ?