TUTORIELS FREE P3

Tutoriel : Créer une animation flash qui communique avec un serveur

Table des matières

Créer une animation flash qui communique avec un serveur
XMLSocket : qu'est-ce que c'est ?
Connexion au serveur
Envoi / réception de données

Créer une animation flash qui communique avec un serveur

Bonjour à tous. :)

Pour commencer, je dois vous prévenir que pour lire ce tutoriel, il faut des connaissances en AS (ActionScript) 2.0. Si vous voulez l'apprendre, un tuto a déjà été créé : Tuto AS 2.0.

Si vous avez ces connaissances, ce tuto devrait être très simple ou tout du moins, pas très compliqué.

XMLSocket : qu'est-ce que c'est ?

XMLSocket permet de faire dialoguer plusieurs animations (ici, des animations Flash).
Ces animations vont envoyer des données au serveur qui sera chargé de les renvoyer aux autres.

Animation 1 envoie : "je suis l'anim 1"

Animation 1 reçoit > "je suis l'anim 1"
Animation 2 reçoit > "je suis l'anim 1"
Animation 3 reçoit > "je suis l'anim 1"
Animation 4 reçoit > "je suis l'anim 1"
Animation X reçoit > "je suis l'anim 1"
Etc.

Si vous avez bien compris comment étaient réparties les données, la suite ne devrait pas poser de problèmes.

Un serveur ? Quel serveur ?

Il existe beaucoup de serveurs XMLSocket : personnellement, j'utilise AquaServer, que vous pouvez télécharger ICI.
Ou bien vous pouvez en choisir un autre, il n'y a aucune différence pour la partie du code.

Si vous avez choisi AquaServer, il suffit d'ouvrir le répertoire server et de lancer le fichier lance.bat. Une fenêtre va s'ouvrir et vous indiquer quel port le serveur écoute.

Vous avez deux commandes :

• List : affiche la liste des clients connectés au serveur ;
• Quit : arrête le serveur.

---

Connexion au serveur

Maintenant, nous allons nous occuper du code.

Pour vous connecter au serveur, il vous faut créer un objet XMLSocket, comme ceci :

var serveur:XMLSocket = new XMLSocket();

C'est cet objet qui va nous servir pour communiquer avec le serveur.

Connexion

Pour vous connecter au serveur, il va vous falloir deux choses :

• l'adresse IP du serveur ;
• le port écouté par le serveur.

Si le serveur est lancé sur votre PC et si l'animation est elle aussi sur ce PC, l'adresse IP à fournir sera alors 127.0.0.1 (l'adresse IP locale).
Si vous avez choisi AquaServer, il y a de grandes chances pour que le port soit 1024, sinon regardez sur le serveur : il devrait vous l'indiquer.

À présent, le code :

serveur.connect("127.0.0.1",1024);

Si vous aviez des informations différentes, il suffit de modifier les paramètres envoyés.

Il va maintenant falloir vérifier si la connexion a bien été établie. Pour cela, on utilise le gestionnaire d'évènement onConnect.

serveur.onConnect = function(etat) // la variable etat va nous dire si la connexion s'est terminée avec succès
{

if(etat) // Si la connexion a été établie 
{ 
  trace("Connexion établie");
}else{
  trace("Erreur de connexion");
}

};

À partir de maintenant, il vous suffit de connaître deux fonctions et vous serez à même de créer un chat en Flash !
(Je sais, je ne suis pas très original, mais c'est le plus simple.)

---

Envoi / réception de données

Envoi

Pour envoyer des données au serveur XMLSocket sous forme de chaînes de caractères, il vous suffit d'utiliser une méthode simple de la classe XMLSocket : send.

Imaginons pour notre chat un message tout simple :

var msg:String = "Vive le SdZ !";?
serveur.send(msg);

C'est aussi simple que ça ?

Oui, et on ne va pas s'en plaindre car la réception est un tout petit peu plus complexe, mais sans grandes difficultés.

Réception

La réception est, elle, un tout petit peu plus compliquée.
On va commencer par un code erroné, pour finalement mieux comprendre le fonctionnement.

Pour la réception, on utilise un gestionnaire d'évènement : onData.

serveur.onData = function(msg_recu)
{

 trace(msg_recu);

}

Maintenant, créez deux animations, les deux se connectent au même serveur, l'une envoie des messages tandis que l'autre les réceptionne et les affiche.

... et là, malheur ! Ça ne fonctionne pas !

Pourquoi ?

Parce que onData vérifie à l'instant même si des messages ont été envoyés par le serveur : sinon il ne fait rien, une fois exécuté, il ne vérifie plus l'arrivée des données.

Comment faire pour remédier à ça ?

C'est tout simple, on va l'appeler à chaque frame.

Code complet

var serveur:XMLSocket = new XMLSocket();

serveur.connect("127.0.0.1",1024) // Connexion au <italique>serveur</italique>

serveur.onConnect = function(etat)
{
 if(etat)
 {
  _root.onEnterFrame = function()
  {
    serveur.onData = function(msg_recu)
    {
    
     trace(msg_recu);

    }
  };
 
  }else{
 
    trace("Erreur lors de la connexion avec le serveur");
  }
 
};

Voilà : vous savez tout ; maintenant, à la pratique !

Le tuto est fini mais qui sait...

Chapitre précédent

Chapitre suivant