Création d'un chat en Flash MX grâce aux XMLSocket

Voici les fonctionnalités de notre client de chat en flash :
- choix d'un pseudo ;
- dialogue dans un salon unique ;
- affichage des pseudos à leur arrivée ;
- pas d'affichage de ceux qui se déconnectent ;
- pas d'affichage de tous les pseudos.

Nous ferons dialoguer le chat avec le serveur java BlablaServeur de cet article. Pour implémenter simplement les fonctions manquantes, comme l'affichage des connectés ou les déconnexions, il faudrait ajouter de nouvelles fonctionnalités au serveur. Comme son objectif premier est de tourner avec n'importe quel type de messages clients, ces fonctions ne seraient pas adaptées, mais vous pouvez modifier les sources et adapter le serveur selon vos besoins.

Ce chapitre est donc dans la continuité de celui de la création d'un serveur multiclient en java. Vous pouvez suivre le tutoriel ou bien télécharger BlablaServeur directement.

Si quelqu'un veut dialoguer avec les autres, il lance l'application cliente qui va aller vérifier que le serveur est en route à l'adresse IP indiquée. Si oui, il établit un lien, aussi appelé connexion par socket. Ce lien se coupera uniquement si le serveur ou le client se déconnecte. Dès qu'un client envoie un message, le serveur, qui est le seul à avoir connaissance de l'existence des autres, le redistribue. Le fonctionnement est donc très proche d'une connexion téléphonique (avec plus de plus interlocuteurs possibles, bien sûr).

Avant de démarrer le tutoriel, voyons comment faire fonctionner le serveur qui va nous permettre de tester l'application future. Après avoir téléchargé le serveur (ou suivi le tutoriel dédié), décompressez le zip dans le répertoire de votre choix (nous l'appellerons « blabla/ »).

Dans le zip vous trouverez deux fichiers pour lancer le serveur sur le port 18000, éditez-les pour changer le port :

Windows : double-cliquez sur BlablaServ.bat ;
Unix/Linux : tapez « sh BlablaServ.sh » ou « ./BlablaServ.sh ».

En cas de problème vérifiez que la version de votre JRE d'installée est la 1.4.1 minimum pour être sûr du fonctionnement du serveur. Avec des versions antérieures, le serveur n'a pas été testé, mais peut sûrement fonctionner. Pour consulter la version, lancez une fenêtre console (Invite msdos par exemple) et tapez « java -version ». Si vous voulez installer la version la plus récente du JRE, rendez-vous sur le site de Sun. Vérifiez aussi que le port 18000 n'est pas pris.

Logiquement à ce stade un message apparaît en indiquant que le serveur est démarré sur le port 18000 :

On voit qu'en tapant le mot « total » (puis Entrer), le nombre de connectés apparaît. Logiquement, pour l'instant le nombre est 0.
Pour quitter proprement le serveur, veillez à taper « quit ».
Au niveau des ressources machines, pas d'inquiétude, il est plutôt discret (du moment que vous n'avez pas 100 clients discutant en même temps, évidemment).

L'exemple est réalisé avec Flash MX 6 en langage ActionScript 1 (la version 2 existe avec Flash MX 2004). Notre BlablaChat contiendra deux images clés. Le rendu peut ressembler à ça :

Étape 1

> Créez deux images clés. Placez-vous sur la première.
> Créez une zone de texte de saisie et donnez lui comme nom de variable : « pseudo » (à saisir dans le champ à coté du bouton « Caractère… » dans la fenêtre de propriété).
> Créez une zone de texte de saisie et donnez lui comme nom de variable : « ipserveur ». Double-cliquez dessus et entrez comme valeur par défaut : « localhost ».

Étape 2

> Créez un bouton, et donnez lui comme nom « bEntrer ».
> Indiquez le code suivant dans la fenêtre d'Actions (F9), en veillant bien de travailler sur la racine de la scène (cliquez sur la scène pour être sûr).

bEntrer.onRelease = function()
{
    // le pseudo et l'adresse du serveur ne sont pas nuls, alors on entre dans le chat
    if(_root.pseudo!="" && _root.ipserveur!="") _root.play(); 
}
 
// permet de cacher le menu contextuel du swf
Stage.showMenu = false; 
 
stop();

Lorsqu'on appuiera sur le bouton, si les deux zones de saisie sont pleines, on passe à l'image clé suivante (vide pour l'instant).

Étape 3

Hop, c'est fini pour la première image clé, rien de complexe, il s'agit simplement d'une image clé de transition pour saisir le pseudo et l'adresse du serveur avant d'attaquer la connexion au serveur.
> Rendez-vous donc sur la seconde image clé.
> Créez une zone de texte dynamique avec la propriété « multiligne » de sélectionnée. Associez à cette zone la variable actionscript « Area ». Ce sera la zone où apparaîtront tous les messages.
> Placez une zone de saisie avec la propriété « Une seule ligne » et indiquez lui la variable « texte » (près du bouton « Caractère… »). On pourra saisir ici son message.

Étape 4

> Créez un bouton « bEnvoyer ».
> Cliquez sur la scène et indiquez le code suivant dans la fenêtre d'Actions :

bEnvoyer.onRelease = function()
{
    if(_root.texte!="") // si la zone de texte n'est pas vide
    {
        // on crée une nouvelle chaine xml avec le pseudo et le texte ...
        texteSend = new XML('<message pseudo="'+_root.pseudo+'" value="'+_root.texte+'"/>'); 
        _root.socket.send(texteSend); // ... et on l'envoi au serveur
    }
    _root.texte=""; // on vide la zone de texte (plus confortable pour le chatteur)
}

Vous comprendrez mieux certains éléments à la fin du tutoriel. Mais globalement, il s'agit ici de purger la zone de saisie lors de l'appui sur le bouton et d'envoyer le message tapé au serveur formaté en xml.

Étape 5

Les messages xml envoyés et reçus du serveur sont de la forme suivante :

<message pseudo="minosis" value="Bonjour à tous"/>

Il s'agit d'une chaine xml avec comme nom de nœud « message » et avec deux attributs « pseudo » et « value ». À chaque envoi le pseudo est ajouté à la chaine ainsi que la valeur de _root.texte dans value.

On passe au vif du sujet, l'utilisation des sockets xml de flash.
> Cliquez sur la scène et ajoutez dans la fenêtre d'Actions le code ci-dessous au code précédemment écris :

// associée à onConnect
function connexion(isOk)
{
 if(isOk) // la connection s'est bien déroulée
 {
   texteSend = '<message pseudo="'+_root.pseudo+'" value="Je viens de me connecter" />';
   // on envoie à tout le monde un message d'arrivée
   socket.send(texteSend);
 }
 else _root.Area.text="Echec de la connexion !";
}
 
// associée à onXML
function réception(chaine)
{
 // on regarde le premier fils (il est seul donc pas de pb)
 chaine = chaine.firstChild;
 // on parcourt tous les noeuds jusqu'à en trouver un non nul
 while (chaine.nodeName == null)
 {
   chaine = chaine.nextSibling;
 }
 // notre nœud message est detecté
 if (chaine.nodeName == "message")
 {
   // on affiche alors le contenu
   // de l'attribut pseudo et de l'attribut value
   _root.Area.text+=chaine.attributes.pseudo+"> ";
     _root.Area.text+=chaine.attributes.value+"\n"
 
   // on scroll la zone de texte si nécessaire
   if(_root.Area.scroll < _root.Area.maxscroll)
   _root.Area.scroll++;
 }
}
 
// s'exécute lors du tout premier chargement de cette scène
// (sécurité pour ne pas multiplier ..
// .. les connexions d'un même client)
if(!interdit) 
{
 // nouvelle instance de XMLSocket()
 socket = new XMLSocket();
 // à la réception d'un message du serveur ..
 // alors réception(chaine) sera exécutée
 socket.onXML = réception;
 // connexion au serveur sur le port 18000
 socket.connect(_root.ipserveur, 18000);
 // dés que la connexion a lieu, connexion() est lancée
 socket.onConnect = connexion;
 // la scène a été chargée une première fois donc true
 interdit=true;
}
stop();

On définit ici deux fonctions : connexion() et réception().
Le code principal se situe à la fin : une instance de XMLSocket() est créée. On associe ensuite nos deux fonctions aux événements possibles : lors de la réception de données (onXML) la fonction réception() va analyser la chaine reçue. Lors de la connexion au serveur, la fonction connexion() va traiter l'événement.
L'appel à « socket.connect(_root.ipserveur, 18000) » permet ici de lancer la requête de connexion au serveur qui se situe, par défaut, en « localhost » sur votre machine. Le port doit être le même que celui choisi au lancement du serveur, nous avions opté pour 18000.

La fonction connexion(isOk) va regarder si la connexion s'est bien déroulée, si oui, un message est envoyé indiquant que le client s'est connecté, sinon, on informe l'utilisateur que le serveur ne peut pas être joint.
La fonction réception(chaine) analyse la variable chaine de type XML pour trouver le nœud message, elle en extrait les attributs « pseudo » et « message » afin de les afficher dans la zone de messages (Area).

Étape 6

Le développement est terminé, faites ctrl+entrer pour compiler le swf.
Sachez cependant que les règles de sécurité de flash sont assez strictes et que vous pouvez faire communiquer le chat intégré dans une page html que si le swf provient du même domaine où s'exécute le serveur. En résumé, si le serveur est hébergé chez vous, le swf devra l'être aussi.

Téléchargez la version pdf de cet article.
Téléchargez le fla et swf de ce projet ainsi que Blablaserveur.