Mise en oeuvre d`une application flash réseau appli flash + serveur

Mise en oeuvre d'une application flash réseau
appli flash + serveur xml socket (aquaserver)
A) Introduction
Sur le web, les applications flash ne peuvent pas communiquerdirectement entre 2 clients.
Toutefois, pour pouvoir interragir entre 2 clients flash distincts, il existe plusieurs
techniques.
1) Passer par des pages php appelées depuis les applis flash. Ces pages php (ou autres,
asp, jsp , ...) peuvent alors stocker des infos dans des fichiers textes ou dans des
bases de données (mysql par exemple). Simple mais temps de réponse élévé.
Utilisable pour des appli de chat ou jeux tour par tour par exemple.
2) Utiliser « flash communication server» (et flash remoting sur le client) (nous utiliserons
amfphp à la place de flash communication server). Cette option permet d'interfacer
facilement une appli flash client avec tout type de serveur (mysql, sql server , ...) .
comme la premiere solution, elle a pour inconvenient d'avoir un temps de réponse
assez élevé.
3) Passer par un serveur type xml socket (aquaserver, origano, ...) , chaque appli flash
ouvre alors une connexion avec le serveur. Le serveur renvoyant immédiatement toutes
infos émises par un client aux autres clients. Les temps de réponses sont minimisés ce
qui permet d'envisager du jeu réseaux rapide. Gros inconvénient: il faut pouvoir installer
un serveur xml socket sur le serveur !!!
B) Mise en oeuvre de aquaserver avec notre jeu de vaisseau (version d'essai)
Nous allons ici réaliser notre jeu de vaisseau en version réseau 2 joueurs distant (vous pourrez
l'étendre à un jeu multijoueurs plus nombreux)
•
•
Installez un serveur complet (apache, php, mysql) (utilisez sur vos postes easyphp)
Installez le serveur xml socket aquaserver. (installez au préalable l'environnment java car
aquaserver est développé en java: gros avantage car il tourne sur tout type de serveur)
•
faire une copie du jeu des vaisseaux.
Dans cette copie supprimer la gestion de mouvement du 2ieme vaisseau.
ActionScript sur l'image 1 de l'animation:
var connexion:XMLSocket = new XMLSocket();
connexion.onConnect = function (success)
{
if(success!=1) trace("erreur de connexion");
}
connexion.connect("195.83.5.2",1024); //mettre biensur l'IP de votre aquaserver!
ActionScript à ajouter dans la fonction gérant le mouvement du 1ier faisseau :
...
commande= new XML("<player><pseudo>"+_root.pseudoj1+"</pseudo><x1>"+_root.fusee1._x+"</x1><y1>"+_root.fusee1._y+"</y1></player>");
_root.connexion.send(commande);
...
le résultat de ces quelques:
1)on instancie la classe XMLSocket, cette instance va permettre de dialoguer avec le
serveur aquaserver via des chaines au format xml.
2) on déclare tout de même un petit test de connection (.onConnect(...)
3) on lance la connexion ( .connect(... )
4) on envois régulièrement les coordonnées (formaté XML) de la fusée1 au server
aquaserver. ( .send(... )
reste à récupérer ces informations sur un autre poste dans une application flash
spécifique
créer une petite application flash avec 3 zones de texte dynamique
Pseudo:
X1:
Y1:
Associer respectivement les 3 zones aux variables _root.pseudoad , _root.xad , _root.yad
ActionScript sur l'image 1 de l'animation:
var connexion:XMLSocket = new XMLSocket();
connexion.onConnect = function (success)
{
if(success!=1) trace("erreur de connexion");
}
connexion.connect("195.83.5.2",1024); //mettre biensur l'IP de votre aquaserver!
connexion.onData = function(recup) {
var doc = new XML();
doc.ignoreWhite=true;
//permet ici de ne pas tenir compte des retours chariots envoyés par le serveur
doc.parseXML(recup);
_root.pseudoad=doc.firstChild.childNodes[0].childNodes[0];
// recupere le pseudo du client qui envois les coordonnées
_root.xad=doc.firstChild.childNodes[1].childNodes[0];
//recupere x et y
_root.yad=doc.firstChild.childNodes[2].childNodes[0];
}
mettre les swf de cette application sur le serveur que vous avez créé (votre ip étant ici
195.83.5.2) dans le dossier de publication de vos page web
• depuis d'autres postes, appellez votre application de jeu (http://195.83.5.2/monflash.swf) ainsi
que l'appli d'affichage.
• testez l'ensemble.
•
Remarques:
notons ici que pour générer la commande en xml nous n'avons pas utilisé le parseur xml mais
nous avons directement écrit le code xml. Le parseur a été utilisé uniquement pour récupèrer les
données.
Cet exercice nous a permis d'illustrer l'utilisation du serveur xmlSocket.
Nous allons pouvoir mettre en oeuvre cette technique pour le jeu réseau nécessitant des temps de
réponse cours (jeu de tir).
C) Déplacement simultané des 2 vaisseaux sur les 2 postes différents
Modifier la deuxieme application pour que à la place d'afficher les coordonnées cela modifie les
coordonnées d'un clip pour visionner en temps réel la position du vaisseau du joueur.
D) Le jeu final
Modifier l'application principale du jeu pour que le deuxieme vaisseau se déplace en fonction du
mouvement de l'autre joueur.