A l`attention de M. Martial BRET, professeur de Flash.

Nathanaël BONIN & Ludovic LE GALL
A l’attention de M. Martial BRET, professeur de Flash.
Nathanaël BONIN & Ludovic LE GALL
SOMMAIRE
Introduction ............................................................................................ 1
I-
Architecture détaillée du client ....................................................... 2
a) Architecture de fichiers ............................................................................... 2
b) Document maître ......................................................................................... 2
Séquence 1 ...................................................................................................... 2
Séquence 3 ...................................................................................................... 4
Séquence 2 ...................................................................................................... 5
II- Architecture du serveur ................................................................... 9
Conclusion ........................................................................................... 11
Annexe ................................................................................................. 12
Echange des messages ..................................................................................... 12
Nathanaël BONIN & Ludovic LE GALL
Introduction
Le projet réalisé au second semestre rentre dans le cadre de la formation de la 3e année
de licence STRI. Il demandait de réaliser un Chat ou un jeu à l’aide de Flash et des sockets.
Mon binôme et moi avons décidé de développer un Chat car l’idée nous intéressait plus.
Durant ce projet nous avons utilisé 3 voire 4 langage de programmation. D’une part, le client
est codé en Action Script et XML (de temps en temps de l’HTML), d’autre part le serveur est
codé en PHP orienté objet. Tous ces langages nous étaient pas inconnus mis à part le XML, ce
qui nous a donc permis d’en apprendre un nouveau (sans trop de difficultés étant donné que le
XHTML est issu du XML).
Le rendu final du projet devait présenter la réalisation et faire l'objet d'un rapport
décrivant les étapes et principales mises en œuvre pour sa réalisation.
Au cours de ce rapport, nous présenterons les différentes parties qui composent notre
Chat. Nous les avons décomposées en 3 parties :
-
La page de connexion
-
La page de chargement
-
La page de discussion
Pour certaines de nos idées, nous nous sommes inspirés du célèbre MSN Messenger.
Les fonctionnalités que nous avons apportées à ce Chat sont les suivantes :
-
Gestion du statut des utilisateurs connectés
-
Envoie de sons
-
Envoie d’émoticônes
-
Changement de fond d’écran côté client
-
Envoie de message privés/publics
1
Nathanaël BONIN & Ludovic LE GALL
I-
Architecture détaillée du client
a) Architecture de fichiers
Les différents fichiers présents sont :
-
ChatFlash.swf
-
Dossier « smileys » contenant tous les smileys
-
Dossier « FondEcran » contenant les 8 fonds d’écran.
b) Document maître
Nom : ChatFlash.swf
Dimension : 900*600 pixels
Cadence : 12 images par seconde
Séquences : 3
Réalisation : Macromedia Flash Professional 8.0
Comme nous l’avons dit dans l’introduction, notre animation ne comprend qu’un seul
fichier SWF, mais 3 séquences dans ce dernier. Nous allons commencer par présenter la
première séquence correspondant à la connexion. La fenêtre est la suivante :
Séquence 1
2
Nathanaël BONIN & Ludovic LE GALL
Fonctionnalités :
Si on appuie sur le bouton « boutonOK » alors
Si les champs « ipserveur » et « nomLogin » ne sont pas vides alors
Aller à la séquence 3
Sinon afficher un message d’erreur « Tous les champs ne sont pas remplis,
veuillez recommencer ! »
Gestion des fonctionnalités :
Lorsque l’on clique sur le bouton, on test si la connexion est possible entre le serveur
et le client. Si ce n’est pas le cas, un message d’erreur apparait « Impossible de joindre le
serveur ». C’est également dans cette séquence que l’on créé le socket qui va permettre le
dialogue entre les différents utilisateurs et le serveur.
Il y a également la fonction onConnect. On test le succès de la connexion, si le serveur lui a
répondu que c’était OK, alors on va à la séquence numéro 3 (séquence faisant la transition
entre la page d’accueil et le salon) sinon on reste sur la première séquence.
Architecture :
Dans cette partie, nous allons nous intéresser à la fonction de chaque calque de la
séquence 1. Voici la capture d’écran des différents calques :
-
FondIntro : Contient le fond créé sous Photoshop, qui sera le fond de la scène
-
Guide Texte : Calque de guide permettant de savoir jusqu’où le texte descendra
-
Texte : Texte « Friend Messenger »
-
Guide Smiley : calque de guide permettant de donner un chemin pour notre smiley
« diable »
-
Smiley : Smiley qui rebondira sur les 2 premières lettres de « Friend »
-
boutonOK : Calque contenant le bouton pour se connecter
-
TxtDynamique : Calque permettant de gérer les différentes erreurs lors de la connexion
3
Nathanaël BONIN & Ludovic LE GALL
-
Son : Calque contenant le son « boing ». A chaque fois que le smiley « diable » rebondit
sur une lettre, ce son se joue.
-
SmileySplash : Calque contenant un GIF d’un smiley qui se cogne contre l’écran
-
Actions : Calque contenant le code Action Script
Séquence 3
Nous allons maintenant présenter la séquence 3, présentant le chargement de notre
application :
Sur cette page il ne se passe pas grand-chose, elle est présente tout simplement pour
faire patienter le client. Nous avons mis en place cette page pour augmenter l’esthétisme de
notre application. Les calques présents dans cette séquence sont au nombre de 4, et voici leur
présentation :
-
Fond : le fond créé sous Photoshop, qui sera le fond de la 2e séquence
-
FondChargement : Contiendra les smileys qui apparaitront toutes les 7 images,
donnant l’effet de chargement, au bout du chargement on passe sur la séquence 2.
-
Actions : Contient la méthode onClose.
4
Nathanaël BONIN & Ludovic LE GALL
Séquence 2
Pour finir la présentation des différentes séquences, nous présenterons la séquence 2 :
8
7
1
2
4
3
5
6
Cette séquence est la plus importante étant donné que c’est ici qu’est accès la grosse
partie du travail. En effet, c’est ici que nous allons gérer l’envoie et la réception des différents
types de messages XML.
Dans l’introduction nous avons décrit les différentes fonctionnalités que présentait
notre Chat. Nous allons donc les relier à l’interface graphique maintenant :
1 Affichage de la liste des connectés ainsi que leurs statuts (icône spécifique à chaque
statut + le nom du statut)
2 Zone d’affichage permettant d’afficher les messages privés ou publics transmis et reçus.
Nous verrons également d’autres informations dans cette fenêtre :
-
Message d’information affichant l’heure + la nouvelle personne s’étant connecté
-
Message d’information du nom du son qu’un utilisateur vient de jouer
-
Message d’information prévenant qu’un utilisateur a changé son statut
5
Nathanaël BONIN & Ludovic LE GALL
-
Message d’information prévenant qu’un utilisateur s’est déconnecté ainsi que
l’heure de la déconnexion
3 Zone de saisie du texte (avec un bouton d’envoie où nous avons rajouté une icône)
4 Menu déroulant contenant les différents sons que l’on peut envoyer (ils sont au nombre
de 15 différents)
5 8 icones permettant de changer l’arrière plan du client. Ce sont des miniatures des fonds
d’écran qui sont transformés en bouton.
6 Différents smileys que l’on peut envoyer
7 Menu déroulant contenant les différents statuts (ils sont au nombre de 5 différents)
8 Bouton de déconnexion
Fonctionnalités :
Si l’utilisateur clique sur « boutonEnvoyer » alors
Si le champ « champTexte » est non vide alors
Envoyer un message à tout le monde
Sinon
Ne rien faire
Si le client clique sur « boutonEnvoyer » et qu’il a sélectionné un client dans la liste alors
Si le champ « champTexte » est non vide alors
Envoyer un message à cet utilisateur
Sinon
Ne rien faire
Si le client sélectionne un son dans le menu déroulant prévu alors
Envoie du son à tout le monde
Si le client sélectionne un statut dans le menu déroulant prévu alors
Envoie du nouveau statut à tout le monde
Si le client sélectionne appuie sur un bouton de fond d’écran alors
Changer le fond d’écran en local
6
Nathanaël BONIN & Ludovic LE GALL
Si le client clique sur un bouton smiley alors
Envoie du smiley à tout le monde
Si le client clique sur le bouton de déconnexion alors
Envoie du nom de l’utilisateur qui s’est déconnecté à tout le monde
Gestion fonctionnalités :
La fonction permettant l’envoie d’un message de type <statut> :
var cbListener:Object = new Object();
cbListener.change = function(event_obj:Object) {
var StatutChanged:String = '<statut typestatut="'+event_obj.target.selectedItem.data+'"
nomuser="'+_global.login+'"><p>'+_global.login+' a changé son statut en
'+event_obj.target.selectedItem.data+'</br></p></statut>';
var messageObj:XML = new XML();
messageObj.parseXML(StatutChanged);
_root.socket.send(messageObj);
};
Nous avons exactement le même genre de code pour envoyer un son.
A présent nous allons détailler la réception d’un message de type XML (nous le ferons
que pour un type de message étant donné que le procédé est dans le même principe). Prenons
l’exemple du message de type <sound> :
else if (msg.nodeName == "sound")
{
monSon=new Sound();
monSon.attachSound(msg.attributes.titre);
monSon.start();
_root.TextArea.text = _root.TextArea.text+"<i><font face='Times New Roman'
size='16' color='#00CC00'>"+msg.attributes.nom+" vient d'envoyer le son suivant : <font
size='16' face='Times New Roman'
color='#FF6600'>"+msg.attributes.titre+"</font></font></i>";
_root.TextArea.vPosition = _root.TextArea.maxVPosition;
}
Nous voyons donc ici, que si l’on trouve le premier nœud du message comme
<sound> alors on entre dans cette boucle. On créé une occurrence d’un nouveau son, on
l’attache à celui transmis par un utilisateur, et on le lit. On affiche également un message pour
dire quel est le son qui vient d’être joué.
7
Nathanaël BONIN & Ludovic LE GALL
Pour finir, nous allons décrire l’enchainement des actions que nous avons attribuées à
notre bouton de déconnexion :
-
Envoie d’un message du type <logout>
-
On le transforme en XML
-
On l’envoie sur le socket
-
On ferme le socket
-
On retourne sur la page d’accueil
Architecture :
-
Fond_Principal : Calque contenant le fond de la scène par défaut
-
Fond Movie : Clip permettant de change le fond
-
ClipDiable : Diable tournant en haut à gauche
-
Composants : Calque contenant les différents composants (TextArea, List, …)
-
Actions : Calque contenant les différentes actions décrites ci-dessus
-
BoutonMin : Calque contenant les différentes miniatures des fonds d’écran
-
BoutonDeco : Calque contenant le bouton de déconnexion en haut à droite
-
Smileys : Calque contenant les 4 smileys
-
LoginDyna : Calque contenant un champ de texte dynamique, rappelant le pseudo
8
Nathanaël BONIN & Ludovic LE GALL
II- Architecture du serveur
Pour le serveur, nous sommes partis d’une ébauche de serveur nous permettant
d’aller un peu plus vite. Comme nous l’avons dit dans l’introduction, il a été développé en
PHP orienté objet. La classe principale s’appelle « Net_Server_Handler_Chat » et elle hérite
de « Net_Server_Handler ». Les seuls choses que nous avons dû lui rajouter sont les
différents messages que nous avons décidé d’implémenter dans notre client. Les différents
messages que le serveur émet ou reçoit sont les suivants :
- <listeuser> qui permet de mettre à jour la liste des utilisateurs connectés
- <message> qui permet l’envoie des messages privés ou publics
- <login> qui permet de prévenir les utilisateurs qu’un nouvel utilisateur s’est connecté
- <logout> qui permet de prévenir les utilisateurs qu’un utilisateur s’est déconnecté
- <statut> qui permet de prévenir les utilisateurs qu’un utilisateur a change de statut
- <sound> qui permet d’entendre le son jouait par un utilisateur
- <smiley> qui permet d’envoyer un smiley à tout le monde
La fonction onReceiveData du serveur n’est qu’un Switch/Case selon ce qu’un
utilisateur lui envoie. La plupart du temps nous utilisons la fonction « broadcastData » pour
envoyer le message à tout le monde. Donnons un exemple pour illustrer ces propos. Nous
allons reprendre l’exemple donné plus haut pour le son :
case "SOUND" :
$this->_server->broadcastData($data);
break;
Ce qui veut dire, que lorsque l’on reçoit une chaîne XML de la forme <sound> on rentre
dans cette boucle et on broadcast l’information que l’utilisateur a envoyé.
9
Nathanaël BONIN & Ludovic LE GALL
Pour finir, nous allons présenter la fonction permettant de mettre à jour la liste des
utilisateurs connectés ainsi que leurs statuts :
function liste_connecte_to_xml($liste, $liste2){
$retour = "<listeuser>";
$liste = array_flip($liste);
foreach($liste as $key => $valeur)
{
$retour .= "<user id=\"$key\" statut=\"$liste2[$key]\">$valeur</user>";
}
$retour .= "</listeuser>";
return $retour;
}
Cette fonction prend en paramètre 2 tableaux. Le premier représente le tableau des
logins avec l’identifiant du client, et le 2e tableau représente le tableau des statuts avec
l’identifiant du client. On créé une chaine XML <listeuser> contenant l’identifiant du client,
le statut et son nom.
Cette liste est ensuite envoyée en broadcast à tout le monde.
10
Nathanaël BONIN & Ludovic LE GALL
Conclusion
Durant le 1er semestre, nous avons surtout appris les aspects graphiques de Flash sans
trop manipuler d’Action Script, langage qui fait la force de Flash, car tout seul nous ne
pourrions pas faire grand-chose. C’est pour cela que nous avons appris ce langage au 2e
semestre pour ainsi réussir à créer notre propre Chat qui allie esthétisme et fonctionnalités en
fin d’année. Nous avons également rencontré quelques problèmes au niveau de la
programmation pour l’envoie des smileys mais également dans les débuts, pour la
compréhension du serveur PHP qui nous était proposé.
Il nous a fallu palier aux différentes difficultés de réalisation d'un projet que sont :
répondre au cahier des charges, gérer le laps de temps imparti ou encore la rédaction d'un
rapport concis.
Notre réalisation s’est vue respectée dans l’intégralité la conception papier de départ et s’est
même vu enrichie avec la gestion des statuts.
Dans l’ensemble, nous en sortons donc assez satisfait de cette réalisation.
11
Nathanaël BONIN & Ludovic LE GALL
Annexe
Echange des messages
12
Nathanaël BONIN & Ludovic LE GALL
Client 1
Serveur
Client 2
Demande de connexion
Acceptation de la connexion
Envoie Login
Login nouveau connecté
Login nouveau connecté
Envoie message public
Message public
Message public
Envoie message privé
Message privé
Envoie d’un son
Son reçu
Son reçu
Envoie d’un smiley
Smiley reçu
Smiley reçu
13
Nathanaël BONIN & Ludovic LE GALL
Client 1
Serveur
Client 2
Changement statut
Mise à jour statut
Mise à jour statut
Demande de déconnexion
Mise à jour liste des connectés
Mise à jour liste des connectés
14