Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le Flash Remoting en ActionScript 3

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible PHP. Cliquer pour en savoir plus sur les compatibilités.

Article écrit le 30/06/2008 10:27.
Par freyskeyd ( Simon Paitrault ).

:: Le Flash Remoting ::

De nos jours la puissance de l'internet est dans son interactivité et sa capacité à offrir des informations en constante évolution. Flash n'ayant pas la technologie pour communiquer directement avec une base de donnée, des moyens on été mis en place pour remédier à ce problème. Notamment le Flash Remoting.
Dans ce tutoriel nous parlerons d'AmfPHP et d'ActionScript3.


Qu'est ce que le Flash Remoting

Le Flash Remoting est une technologie d'optimisation des échanges entre un client et un serveur.
On retrouve principalement cette technologie dans des logiciels tels que Air ou Flex.
Le Flash Remoting a sont propre format d'échange de données, l'AMF(Action Message Format), c'est grâce à ce format que l'ont peu échanger des variables typés sans pour autant penser à la façon de les transmettre.
Quand une information est transmise par Flash Remoting, le lecteur Flash construit un paquet AMF contenant les informations sérialisées, puis l'envoi au serveur par la méthode POST grâce au protocole HTTP.
Attention le format AMF n'est pas un format texte, mais un format Binaire.
Flash pouvant encoder des données en AMF et les transmettre à un autre script, il faut aussi que le serveur recevant le paquet puisse a son tour le décoder. C'est pour cela qu'on utilise des Passerelles Remoting. Dans notre tutoriel nous utiliserons AmfPhp pour faire dialoguer FLash et Php.
Le schéma 1.1 montre le fonctionnement simplifié de Flash avec AmfPhp.

Schéma 1.1
1.jpg
Vous me direz.. Pourquoi utiliser le AMF alors qu'il serait peut-être plus simple d'utiliser le format texte?
Le format AMF est en réalité moins gourmand et beaucoup plus rapide que la sérialisation/désérialisation texte.
A ce jour il existe deux versions d'amf, AMF0(pour l'actionScript 1 et 2) et AMF3 (pour l'actionScript3)
Vous pouvez obtenir AMFphp ici

Passons aux choses sérieuses..

Installation d'AMFphp

Après avoir téléchargez AMFphp (la version 1.9 est le minimum requis pour faire du AMF3, du AS3 en gros), dézippez le contenu dans un dossier dans le 'www' d'easyPhp par exemple.
Vous pouvez donc remarquer la présence de trois dossiers et de quelques autres fichiers.
Nous allons détailler les principaux fichiers et dossiers important pour nous.

  • Browser : contient l'application de déboguage (Part très importante)
  • Core : Fichiers sources d’AMFPHP. Inutile d'y toucher..
  • Services : Ce répertoire contient les services distants que vous allez créer..
  • Gateway.php : Le fichier passerelle où il faudra connecter Flash.


Dans nos exemples j'utiliserai les informations suivantes:


une fois tous ceci installé, ouvrez Firefox et tappez :
'http://localhost/tuto/gateway.php'
vous devriez voir apparaitre un texte vous informant de la réussite de l'installation de AmfPhp.
Deux options s'offrent à vous, un lien vers une page de documentation sur le site officiel d'AmfPhp, ou le seconde lien (celui qui nous intéresse), l'accès au Browser.

Arrivez sur le Browser vous découvrez une interface graphique et un premier menu de configuration (figure 1.2)
Figure 1.2
2.jpg
Vous pouvez accéder à tous moment à ce menu grâce au bouton 'settings' en haut a gauche du site.
Une fois ceci fait, vous accédez à un menu en arborescence, représentant le dossier Services.

Pour mieux comprendre la puissance du Browser nous allons créer ensemble un service.
Ouvrez Notepad++ et entrer le script php suivant :

<?php
class serviceTest{
      function monPremier($message){
               return ("Vous avez tappé :". $message);
               }
}
?>


enregistrez ce fichier sous le nom : serviceTest.php
Que vous placerez dans le dossier : www/tuto/services/serviceTest/
De retour sur le Browser, recharger le menu à l'aide de la flèche bleu. et cliquez sur le service que vous avez créer.
3.jpg
entrez un message et pressez “Call
Vous avez compris? =]

Le browser est là pour tester vos script php. Il permet de corriger plus rapidement les problèmes survenant du côté script php, avant de les utilisés sur Flash.

Comment ce connecter à un service

Avec actionScript 3 la connection à un serveur se fait par le biais de différentes Classes.

  • flash.net.NetConnection : Qui permet de se connecter à un service.
  • flash.net.Socket : Socket propose un moyen d'échange de données au format AMF grâce au protocole HTTP.

Afin d'appeler la fonction monPremier, il faut créer une instance de la classe NetConnection :

   var connection:NetConnection = new NetConnection ();

Pour nous connecter à la passerelle AMFphp nous allons utiliser la class connect

connection:connect("http://localhost/tuto/gateway.php");

laissons un peu ceci en suspend pour parler d'une nouvelle classe.

La Classe Responder

La classe flash.net.Responder permet la création d'objets de gestions de retour d'appels.
En claire cette classe peut gérer le retour “succès” ou “échec” du serveur.

exemple :

// Nous commençons par définir une variable de connection.
var connection:NetConnection = new NetConnection();
// puis nous connectons cette variable au AMFphp
connection.connect("http://localhost/tuto/gateway.php");
// Création des deux fonctions, l´une Succès, l´autre échec.
function succesServeur(strSucces:*):void
{
	trace("Le serveur a bien répondu");
}
function echecServeur(strEchec:*):void
{
	trace("Echec d´appel");
}
// Création de la variable de Responder, vous pouvez voir 
// que Responder à deux état (succes, echec)
var reponseServeur:Responder = new Responder(succesServeur,echecServeur);
// La variable de connection appel la fonction "monPremier", 
// envoi le résultat à "reponseServeur" 
// et a comme parametre la chaine "je test"
connection.call("serviceTest.serviceTest.monPremier",reponseServeur,"je test");
// si tous ce passe bien le serveur répond..

grâce à la classe Responder nous avons donc vu aussi la méthode call de l'objet NetConnection Nous avons vu aussi comment transmettre une donnée à une fonction.

connection.call("chemin Service",Responder,"chaine,int,ou autre à transmettre");


maintenant voyons comment récupérer le contenu d'une variable stocker dans une fonction. Fichier recupXML.php

<?php
class RecupXML
{
function recupereXML ()
{
$xml =' <journal> 
  <SECTION titre="faits-divers" id="10">
	<SECTION titre="News" id="11"/>
	<SECTION titre="Actu People" id="12"/>
</SECTION>
</journal>';
return $xml;
}
}
?>

Code ActionScript

// Connections
var connection:NetConnection = new NetConnection ();
connection.connect ("http://localhost/tuto/gateway.php");
 
// les diffèrentes fonctions
function succes ( pRetour:* ):void
{
try
{
// convertion chaine en objet XML
var journal:XML = new XML ( pRetour );
trace(journal.SECTION);
} catch ( pErreur:Error )
{
trace( "erreur sur le flux XML");
}
}
function echec ( pErreur:* ):void
 
{
trace("echec d´appel");
}
// création du Responder & appel de la fonction
var reponseServeur:Responder = new Responder (succes, echec);
connection.call ("serviceTest.recupXML.recupereXML", reponseServeur);

on voit donc apparaitre le flux XML.

Transmission de données et manipulations du contenu.

Commençons par créer notre fichier de service tabWOW.php

<?php
class TabWOW
{
function niveauUp ( $Donnees )
{
	$Donnees["nom"] = "Freyskeyd";
	$Donnees["niveau"] += 1;
	return $Donnees;
}
}
?>

puis notre code ActionScript

// Début des connections
var connexion:NetConnection = new NetConnection();
connexion.connect("http://localhost/tuto/gateway.php");
// création de l'objet Personnage
var personnage:Object = new Object();
personnage.nom = "Frey";
personnage.niveau = 69;
personnage.pointsDeVie = 22125;
// Création des fonctions d'affichage des réponses serveur
function succes ( Retour:* ):void
{
 
for ( var i:String in Retour )
{
trace( i, " : " + Retour[i] );
}
}
function echec (erreur:*):void
{
	trace("erreur");
}
// Appel du service avec le parametre Personnage
var retourServeur:Responder = new Responder (succes, echec);
connexion.call ("serviceTest.TabWOW.niveauUp", retourServeur, personnage);

on voit que l'objet personnage à été modifié.
Le personnage.nom a changé
le personnage.niveau aussi
Mais pas personnage.pointDeVie.

Exemple : Connection base de données

Nous allons créer un petit bout de programme qui renvoi la ville du plus grand des deux membres. Puis lequel vit dans la ville saisi. Ce n'est pas très compliqué, mais pourquoi faire compliqué?
Nous placerons les “services” dans : http://localhost/tuto/exemple/

Résalisation de la base

Commençons par créer la base de données qui nous servira dans cet exemple.
aller dans le panneau mysql de Easyphp : http://localhost/mysql/
une fois arrivé créer une table bdd_flash
Cliquez sur 'SQL' et tapez :

CREATE TABLE `membres` (
`id` INT( 2 ) NOT NULL AUTO_INCREMENT ,
`nom` VARCHAR( 50 ) NOT NULL ,
`age` VARCHAR( 2 ) NOT NULL ,
`ville` VARCHAR( 50 ) NOT NULL ,
PRIMARY KEY ( `id` )
);

ensuite nous allons créer deux enregistrements :

INSERT INTO `membres` ( `id` , `nom` , `age` , `ville` )
VALUES (
'', 'Frey', '20', 'Niort'
), (
'', 'Xoz', '19', 'Parthenay'
);


Création de la fonction de connection

Nous allons créer une fonction de connection à la base de données, pour pouvoir la réutiliser dans d'autres condition que notre futur fonction de recherche.
fichier Dbconnect.php

<?php
class Dbconnect
{
     function connection($host, $user, $pass, $base)
     {
         $connection_bdd = mysql_connect($host,$user,$pass);
         $selected = mysql_select_db($base, $connection_bdd);
     }
}
?>

Création des fonctions Utiles


Tous d'abord nous allons créer la fonction nous permettant de récupérer la ville du plus âgé des deux.

<?php
class utiles
{
	function plusgrand()
	{
		$requete="select ville from membres where age=(select MAX(age) from membres)";
		$result = mysql_query($requete);
		$result = mysql_fetch_array($result);
		return $result;
	}
?>


ensuite la seconde fonction que nous ajouterons à la class créé précédemment.

function ville($donnees)
	{
		$requete2 = "select nom from membres where ville='".$donnees."'";
		$result2 = mysql_query($requete2);
		$result2 = mysql_fetch_array($result2);
		return $result2;
	}


Création de la partie As

Nous allons d'abord définir la partie ActionScript mais avant, il vous faudra placer sur la scène : un bouton avec un nom d'occurrence (“btn”) et un TextInput (“ville_ti”).
les commentaires sur le code actionscript décrive bien les différentes étapes de l'exécution du script.

import fl.controls.Button;
import fl.controls.TextInput;
 
//Définition des variables utiles
var connection:NetConnection = new NetConnection();
var mc:Button = this.btn;
var villeti:TextInput = this.ville_ti;
var host:String = "localhost";
var user:String = "rootflash";
var pass:String = "root";
var base:String = "bdd_flash";
//création de la connection à la base de données
connection.connect("http://localhost/tuto/gateway.php");
connection.call("exemple.Dbconnect.connection",new Responder(succes,echec),host,user,pass,base);
//fonctions renvoyant le succès ou l'echec de la connection à la bdd
function succes(retour:*):void{
		trace("connection réussie");
}
function echec(retour:*):void{
		trace("echec de connection");
}
//appel du service "plusgrand"
connection.call("exemple.utiles.plusgrand",new Responder(grand));
//function de traitement du retour du service "plusgrand"
function grand(retour:*):void{
	trace(retour);
}
//définition de la fonction commandé par le bouton. 
function presss(e:Event):void{
	//récuperation du mot saisi
	var ville:String = villeti.text;
	//connection et appel du service "ville"
	connection.call("exemple.Dbconnect.connection",new Responder(succes,echec),host,user,pass,base);
	connection.call("exemple.utiles.ville", new Responder(villeS,villeE),ville);
	//functions renvoyant le succes ou l'echec de la requete
	function villeS(retour2:String):void{
		trace(retour2);
	}
	function villeE(retour2:*):void{
		trace("erreur");
	}
}
mc.addEventListener(MouseEvent.CLICK,presss);



Voila le tutoriel est fini.
je pense qu'avec les informations présentes sur cette page vous pourrez vous en sortir. Le fonctionnement est sensiblement le même.
A vous d'adapter suivant les situations et les contraintes.
Merci de votre attention.