Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Chat avec BlazeDS messaging

Compatible Flex Builder. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible Java. Cliquer pour en savoir plus sur les compatibilités.Par tutocat (TutoCat), le 14 août 2008

Bonjour,

dans ce tutoriel nous allons voir comment créer un système de chat à l’aide BlazeDS.

Vous aurez donc besoin de :

1. BlazeDS

BlazeDS est open source et gratuit, et implémente certaines fonctionnalités de LiveCycle Data services. Il permet entre autre de se connecter à des données côté serveur, et de les afficher en temps réel sur des applications Flex ou AIR. Il contient également un système de transmission de messages, c’est cette dernière fonctionnalité, que nous allons aborder dans ce tutoriel.

2. Installation de Apache

Avant d’installer le serveur Apache, il faut s’assurer que le JDK 1.5 ou une version plus récente est installée. Il suffit pour cela de se rendre sur le lien ci-dessus et de télécharger la dernière version du JDK et de lancer son installation.

Il faut également s’assurer que la variable d’environnement JAVA_HOME pointe sur le dossier où l’on a installé le JDK. Pour cela, il faut faire (sous vista) un click droit sur le poste de travail –> Propriétés –> Paramètres système avancés –> variables d’environnement…

Si la variable n’existe pas, il faut l’ajouter, pour ce faire :

- Cliquez sur la variable Path et ajouter à la suite le chemin du répertoire bin de votre JDK (ex : C:\Program Files\Java\jdk1.6.0_07\bin)

- Créer une nouvelle variable JAVA_HOME avec comme valeur de variable : C:\Program Files\Java\jdk1.6.0_07

Vous pouvez ensuite télécharger le serveur Apache, depuis le lien donné ci-dessus, et extraire tous les fichier du zip à l’endroit de votre choix.

3. Installation de BlazeDS

Télécharger BlazeDS à l’adresse indiquée ci-dessus (Binary distribution). Pour gagner du temps, vous auriez pu également utiliser la version Turnkey qui est déjà intégrée dans un serveur Apache.

Il faut extraire le fichier blazeds.war sous c:\votre dossier tomcat\webapps\

Il ne vous reste maintenant plus qu’à démarrer le serveur, et cela s’effectue depuis une invite de commande dos sous c:\votre dossier tomcat\bin: catalina run.

Vous avez maintenant un nouveau dossier blazeds sous c:\votre dossier tomcat\webapps\blazeds. Avec les dossiers META-INF et WEB-INF, c’est dans ce dernier que l’on peut ajouter des classes Java que Flex peut utiliser dans une application.

4. Création du projet sous Flex builder

File –> New –> Flex Projects

- Entrer myChat comme nom de projet.

- Sélectionner Web Application

- Définir J2EE comme type d’application server

- Cochez la case Use remote object access service

- Sélectionnez LiveCycle data services

–> Next

Dans la partie Server location:

- Décocher la case Use default location for local data services server, et entrer vos données:

o Root Folder : C:\ votre dossier tomcat \webapps\blazeds

o Root URL : http://localhost:8080/blazeds

o Context root : /blazeds

Cliquez sur « finish ». Le projet Flex est maintenant créé, il ne reste plus qu’à implémenter notre application.

5. Implémentation

Il faut commencer par ouvrir le fichier messaging-config.xml qui se trouve sous C:\ votre dossier tomcat \webapps\blazeds\Web-INF\flex\ et ajouter la ligne suivante, juste avant l’élément </service> :

 
<destination id="myChat"/>

Cela permet de définir l’endroit où les clients Flex vont être publiés et quels clients Flex vont pouvoir recevoir les messages publiés.

Il faut maintenant redémarrer l’application serveur.

Nous allons commencer à coder notre application. Pour cela, il faut commencer par créer un producteur de message et un consommateur. Le producteur envoie des messages vers la destination, et le consommateur reçoit ces messages de la destination:

 
<mx:Consumer id="consumer" destination="myChat" message="msgHandler(event.message)"/>
<mx:Producer id="producer" destination="myChat"/>

Il ne nous reste plus qu’à créer l’interface utilisateur pour envoyer et recevoir les messages :

<mx:Script>
<![CDATA[
	import mx.messaging.messages.AsyncMessage;
	import mx.messaging.messages.IMessage;
 
	private function send():void{
		var message:IMessage = new AsyncMessage();
		message.body.chatMessage = msg.text;
		producer.send(message);
		msg.text = "";
	}
 
	private function msgHandler(message:IMessage):void{
		chatMsgs.text += message.body.chatMessage + "\n";
	}
]]>
</mx:Script>
 
<mx:Panel title="My chat with BlazeDS" width="100%" height="100%">
	<mx:TextArea id="chatMsgs" width="100%" height="100%"/>
	<mx:ControlBar>
		<mx:TextInput id="msg" width="100%" enter="send()"/>
		<mx:Button label="Envoyer" click="send()"/>
	</mx:ControlBar>
</mx:Panel>

Lorsque l’on clique sur le bouton «Envoyer» la fonction send() est appelée, un nouveau AsyncMessage est créé, on lui attribut le texte entrer dans le champs «msg». On utilise ensuite la méthode send() du producteur pour envoyer le message.

L’événement msgHandler récupère l’événement message quand le consommateur reçoit le message de la destination, et l’affiche le textArea.

Pour que le consommateur souscrive à la destination au démarrage de l’application, on ajoute le code suivant :

 
creationComplete="consumer.suscribe()"

Il ne reste maintenant plus qu’à lancer l’application, et pour la tester, vous pouvez ouvrir 2 navigateurs.

Source de l'article