Création d'un chat en Flash MX grâce aux XMLSocket
Date de publication : 13/03/2005 ,
Date de mise a jour : 27/03/2005
Par
Minosis (Homepage)
Dans ce tutorial, nous allons réaliser un programme de chat sous Flash MX afin d'illustrer le fonctionnement de l'objet XMLSocket.
Téléchargez la version pdf. Et après l'article : détente avec du sudoku.
Introduction
1. Le fonctionnement
2. Démarrage de Blablaserveur
3. Développement sous Flash
Téléchargements
Introduction
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 tutorial ou bien télécharger BlablaServeur directement.
1. Le fonctionnement
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 + de 2 interlocuteurs possibles, bien sûr).
2. Démarrage de Blablaserveur
Avant de démarrer le tutorial, 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 tutorial dédié), décompressez le zip dans le répertoire de votre choix (nous l'appelerons "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 : tappez "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).
3. Développement sous Flash
L'exemple est réalisé avec Flash MX 6 en langage ActionScript 1 (la version 2 existe avec Flash MX 2004).
Notre BlablaChat contiendra 2 images clés. Le rendu peut ressembler à ça :
 |
 |
| KeyFrame 1 |
KeyFrame 2 |
 |
Les éléments pointés en rouge sont indispensables.
|
Etape 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".
Etape 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()
{
if(_root.pseudo!="" && _root.ipserveur!="") _root.play();
}
Stage.showMenu = false;
stop();
Lorsqu'on appuyera sur le bouton, si les deux zones de saisie sont pleines, on passe à l'image clé suivante (vide pour l'instant).
 |
Nous utilisons ici un ciblage absolue avec "_root". Il ne fonctionnera correctement que si le swf créé ne sera pas ensuite chargé dans un autre via la méthode LoadMovie().
|
Etape 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.
Etape 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!="")
{
texteSend = new XML('<message pseudo="'+_root.pseudo+'" value="'+_root.texte+'"/>');
_root.socket.send(texteSend);
}
_root.texte="";
}
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.
Etape 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 chaîne xml avec comme nom de noeud "message" et avec deux attributs "pseudo" et "value". A chaque envoi le pseudo est ajouté à la chaîne 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 :
function connexion(isOk)
{
if(isOk)
{
texteSend = '<message pseudo="'+_root.pseudo+'" value="Je viens de me connecter" />';
socket.send(texteSend);
}
else _root.Area.text="Echec de la connexion !";
}
function reception(chaine)
{
chaine = chaine.firstChild;
while (chaine.nodeName == null)
{
chaine = chaine.nextSibling;
}
if (chaine.nodeName == "message")
{
_root.Area.text+=chaine.attributes.pseudo+"> ";
_root.Area.text+=chaine.attributes.value+"\n"
if(_root.Area.scroll < _root.Area.maxscroll)
_root.Area.scroll++;
}
}
if(!interdit)
{
socket = new XMLSocket();
socket.onXML = reception;
socket.connect(_root.ipserveur, 18000);
socket.onConnect = connexion;
interdit=true;
}
stop();
On définit ici deux fonctions : connexion() et reception().
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 reception() va analyser la chaîne 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 reception(chaine) analyse la variable chaine de type XML pour trouver le noeud message, elle en extrait les attributs "pseudo" et "message" afin de les afficher dans la zone de messages (Area).
Etape 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 stricts 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échargements
Téléchargez la version pdf de cet article.
Téléchargez le fla et swf de ce projet ainsi que Blablaserveur.
Merci à Freegreg pour la relecture.
|
