Tutoriels - Flash - XML Clients Serveurs fichier source



Serveur, XMLsocket : Un chat (écrit par Jérémie )


Vous avez decouvert avec le tutoriel sur ahawasi les bases de l'utilisation d'un serveur XML. Voyons maintenant comment utiliser concrètement ces connaissance avec une application complète : un chat simple.

Pour des chats plus complexes, ou des jeux multijoueurs, le principe est exactement le même, ce sera à vous d'adapter en fonctions (posez vos questions sur le forum)

Prérequis

Bonne connaissance de la programmation en Action Script et des bases de flash
Bonne lecture du premier tutoriel sur Ahawasi (même si tout n'est pas encore trop clair)

Préparation

Si vous avez bien compris, vous devez avoir lancé ahawasi, préparé une salle au moins (ou laissé celles par défaut)

Le serveur est lancé sur votre machine : l'adresse pour y accéder sera localhost, pour faire des tests, vous pourrez lancer plusieurs fenêtre de votre fichier swf en même temps.

Pour inviter des amis à vous y rejoindre, vous devrez leur donner votre adresse IP, et ils devront entrer l'adresse, par exemple, http://213.234.122.0

Etape 1 Préparation de l'application

Dans un nouveau fichier, sur la première image, on va créer un formulaire pour récupérer l'adresse du serveur et le pseudo choisi.

Créez un premier calque "actions", sur la première image, éditez les actions, et écrivez
stop();

Sur un nouveau calque, créez 2 zones de texte statiques et 2 zones de saisie. Donnez les noms de variable "identifiant" et "adresse"



Ajoutez un bouton "discuter" (pour passer à l'image suivante) avec le code

on(press) {
nextFrame();
}


Voila à quoi doit ressembler en gros votre première image.

Rien de bien sorcier pour le moment.


Etape 2 - L'interface du chat

On ne va pas se compliquer la vie pour ce tutoriel, sur la deuxieme image (ou frame), sur un nouveau calque, créez l'interface de votre Chat. Il doit se composer de 2 zones de textes dynamiques (pour le nom des utilisateurs connectés et la fenetre de discussion), une zone de saisie (pour écrire son message) et d'un bouton pour envoyer (ne mettez pas d'actions pour le moment)

Pensez à préciser pour les zones de texte dynamiques la propriété "multiligne" ...

Donnez les noms "utilisateurs", "discussion" et "texte" à vos zones de textes.

Si tout se passe toujours bien, ça ressemble en gros à ça.

Passons maitenant aux actions XML.


Etape 3 - Flash et les sockets XML

Flash propose, pour les échanges de données XML, un objet XMLSocket. Comment ça marche ?
On commence par créer un objet XMLSocket avec la commande
chat = new XMLSocket ();

3 fonctions permettent d'utiliser cet objet :

chat.connect(serveur, port) établit une connexion vers le serveur
chat.close() pour se déconnecter
chat.send(objetXML) pour envoyer du XML au serveur

ensuite, il est possible de définir différentes fonctions associées à cet objet :

chat.onConnect(reussie) est une fonction executée après la connexion. "reussie" est une valeur VRAIE si tout s'est bien passé.
on pourra écrire : if (reussie) { // actions }

chat.onClose() pareil pour la déconnexion (pratique pour afficher un message : "vous êtes maitenant déconnecté(e)")

chat.onXML(donnees) et chat.onData(donnees) fonction executée pour traiter les données reçues du serveur.
pour être honnête j'ai pas bien saisie la nuance entre les deux fonctions, mais sauf erreur, la fonction onXML ne peut recevoir que du code XML. Nous utiliserons onXML pour notre chat.

pour définir ces fonctions, on écrit nos fonctions à part puis on ajoute une ligne :
chat.onConnect = maFonctionDeConnexion;

Ainsi, la fonction maFonctionDeConnexion est executée à chaque connexion.

l'aide de Flash est très complète et claire. Pour plus de précisions ou renseignements faites simplement F1 et cherchez un peu ...


Etape 4 - Les fonctions nécessaires

Pour cette application 4 fonctions vont être créées

verifierConnexion : vérifie que la connexion XML s'est effectuée correctement et le déclare au serveur (définition de onConnect)
receptionDonnees : reçoit des différentes données qui proviennent du serveur et agit en conséquence (définition de onData)
afficherUtilisateurs : affiche à l'écran les différents utilisateurs présents
afficherMessage : affiche à l'écran un message reçu (nom d'utilisateur + son message)

Avec d'écrire ces fonction, sur la deuxième image, sur le calque actions, editez les actions et écrivez :

chat= new XMLSocket(); // création d'un nouvel objet XMLSocket
chat.connect(adresse, 1904); // adresse et port (voir remarque deux lignes plus bas) l'adresse est celle entrée dans le premier formulaire
chat.onConnect = verifierConnexion; // on redéfinit la fonction onConnect
chat.onXML = receptionDonnees; // on redéfinit la fonction onXML
stop ();

Une petite remarque au sujet du port (ici 1904) Vous devez préciser le port de votre machine sur lequel doit se connecter votre chat. Précisez simplement celui de votre salle (dans le fichier de configuration XML d'ahawasi).
Il peut arriver que votre ordinateur utilise déjà ce port, dans ce cas, le chat ne fonctionne pas. Changez tout bêtement le port de la salle dans le fichier de configuration d'ahawasi et dans l'application flash (on remplace 1900 par 1904, ou 1907 ... jusqu'à ce que ça marche)

Créez un nouveau calque "fonctions", et éditez les actions de la première image.

la fonction afficherMessage ne pose pas de problème :

function afficherMessage (nom, message) {
discussion += "<" + nom + "> " + message + "\n";
}

\n est le caractère retour chariot (nouvelle ligne)
on ajoute au texte déjà présent le nom de l'auteur et le nouveau message.
c'est dans le traitement des données (receptionDonnees) qu'on précisera le nom et le message.

la fonction verifierConnexion maintenant

function verifierConnexion (reussie) {
if(reussie){
log = '<control type=\"login\" username=\"'+identifiant +'\"/>'; // donne le code <control type="login" username="OuiOui">
chat.send(log); // on envoie le code de déclaration d'utilisateur
}
}

Ahawasi interprete se code et reconnait un nouvel utilisateur qui s'appelle OuiOui
(voir le premier tutoriel)

Passons à la fonction qui affiche les utilisateurs. Elle n'est pas très différente de celle qui affiche les messages, sauf qu'elle doit traiter un objet XML.

function afficherUtilisateur (donnees) {

utilisateurs = ""; // on efface la liste
var donnees = donnees.childNodes; // on récupère l'ensemble des fils de l'objet XML reçu

for (i=0; i<utilisateurs.length; i++) {
// pour chaque nom d'utilisateur précisé, on ajoute le nom dans la zone de texte
utilisateurs += donnees[i].attributes.username+ "\n";
}
}

enfin, la fonction la plus complexe : receptionDonnees
elle doit recevoir les données XML, les reconnaitre, et, en fonction, appeler afficherMessage ou afficherUtilisateurs
Ahawasi renvoie 3 types de données : les messages (balise XML message), les listes d'utilisateurs (balise XML clients) et une balise qui confirme la connexion de l'utilisateur (balise XML control). Cette dernière fournit un numéro (id) qu'il faut stocker et préciser lors de l'envoi de messages.

si certaines choses ne vous paraissent pas claires dans le code suivant, revoyez le format des données envoyées par ahawasi et le traitement des données XML (dans l'aide de Flash)

function receptionDonnees (donnees) {

var donnees = donnees.firstChild;

while (donnees.nodeName == null) {
// tant que le nom du noeud est nul ...
donnees = donnees.nextSibling; // ... on passe au noeud suivant
}

if (donnees.nodeName == "clients") {
// si le noeud est une liste d'utilisateurs
afficherUtilisateurs(donnees); // on transmet les données à afficherUtilisateurs

} else if (donnees.nodeName == "control") {
if (donnees.attributes.type == "setUserId") {
// si c'est un id
id = donnees.attributes.userId;
}

} else if (donnees.nodeName == "message") {
// si le noeud représente un message ...
if (donnees.attributes.type == "chatMessage") {
// ... et si ce message représente bien un message à afficher
afficherMessage(donnees.attributes.fromName, donnees.attributes.value);
// on utilise afficherMessage avec les attributs fromName (l'auteur)
// et value (le message lui-même)
}
}

}

et voila, la communication est en place.

Reste une action à mettre en place, celle du bouton "envoyer". Sur la scène principale, éditez les actions de votre bouton

on (press, keyPress "<Enter>") {
// lorsqu'on clique sur le bouton ou qu'on appuie sur "entrée"

if (_root.texte!=null) {
// si le message n'est pas nul

message = '<message from=\"'+ id +'\" fromName=\"'+identifiant+'\" type=\"chatMessage\" value=\"'+texte+'\" />';

chat.send(message);

texte = ""; // on efface le texte de saisie
}

}

On choisit ci dessus le type chatMessage, c'est une valeur que vous pouvez choisir.
Elle sert, entre autres, à différencier les messages pour différentes applications qui tournent sur le même serveur et même port. Vous pouvez spécifier un nom de salle, par exemple. Attention, cependant, car tous les utilisateurs vont recevoir ces données, elle ne seront simplement pas affichées, mais les salles sont nombreuses, chaque client va recevoir une grande quantité de messages inutiles...

Le fichier source commenté vous apportera les précisions qui vous manquent.

Améliorations éventuelles

Pour une application vraiment complète, il serait utile de vérifier que le pseudo choisi n'est pas déjà utilisé, et de traiter l'ensemble des erreurs possibles. Il pourrait être pratique de donner des droits particuliers à certaines personnes (les administrateurs), ou de pouvoir exclure les utilisateurs pénibles.
Toutes ces actions peuvent être codées en actionscript, c'est à vous de définir votre méthode.


Merci Bri de m'avoir tout expliqué en premier.
Toutes les questions, commentaires ou idées sont les bienvenus sur le forum.

Ce tutoriel sera complété par des réponses aux questions que vous posez.




Tous droits réservés 2003 Jérémie Cook