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).

Image non disponible

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 :

Image non disponible

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 :

Image non disponible Image non disponible
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).

 
Sélectionnez

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 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 :

 
Sélectionnez

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.

Etape 5

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

 
Sélectionnez

<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 :

 
Sélectionnez

// 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 reception(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 noeud 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'execute lors du tout premier chargement de cette scene
// (sécurité pour ne pas multiplier ..
// .. les connexions d'un meme client)
if(!interdit) 
{
 // nouvel instance de XMLSocket()
 socket = new XMLSocket();
 // à la reception d'un message du serveur ..
 // alors reception(chaine) sera exécutée
 socket.onXML = reception;
 // 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 scene a été chargée une première fois donc true
 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.