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.