[Nanu]

img:remarqueConnaissances requises
- Typage fort
- Classes AS2 part 1&2
- Notion d'XMLSocket (http://www.media-box.net/tuts.php?idfl=38491)
- Lecture de la documentation d'XServer : http://xserver.inlabs.net
img:remarqueNiveau
Intermédiaire

img:remarqueBut
Découvrir XServer
Pouvoir créer une application grâce à XServer
Comprendre comment fonctionne une application en XMLSocket

img:remarqueParties
Installation du serveur
Explication sur le serveur
Envoi et réception de message simple
Création du chat

img:coupe
img:remarqueInstallation du serveur
XServer est disponible gratuitement à l'adresse : http://xserver.inlabs.net
Vous trouverez dans le menu à droite le serveur ainsi que des exemples (le serveur étant requis pour que les exemples fonctionnent).
Après avoir téléchargé le serveur, décompressez-le et cliquez sur lance.bat
img:remarque : Pour changer le port sur lequel le serveur doit écouter, éditer le fichier lance.bat et changer le port 1024. Si aucun port n'est définit, XServer écoute sur le 1024
Si tout se passe bien, vous aurez le message :

XServer ecoute sur le port 1045 ...

img:coupe
img:remarqueExplication
Avant de commencer à utiliser l'XMLSocket, il faut tout d'abord en avoir quelques notions.
Pour que plusieurs clients puissent discuter entre eux il faut que le message passe par un serveur socket, ce serveur va tout d'abord analyser le message reçu pour le traiter en conséquence. Il peut très bien par exemple envoyer un message à une room, à tous les clients, sauvegarder ou distribuer des variables.

img:coupe
img:remarqueEnvoi et réception de donnée
Pour commencer toute application avec XServer il vous faut les packages net.inlabs.* et com.gskinner.events.*
Ils se trouvent dans les exemples fournis dans la Documentation
Une fois ces deux dossiers copiés, nous allons créer un .fla dans le même dossier où ils se trouvent.
Commençons par importer la classe qui nous ineresse et on l'instancie :

Code

import net.inlabs.xserver.ConnectionHandler;

var cHandler:ConnectionHandler = new ConnectionHandler();

Nous allons ensuite nous connecter au serveur, comme pour le tutorial avec AquaServer
Nous devons indiquer un port avec un host, ici nous prendrons localhost et 1024 (par habitude).
Nous allons donc nous connecter et inscrire la scène aux événements de connection et de réception de message :

Code

cHandler.connect("localhost",1024);

cHandler.addXmlListener(this);

cHandler.addEventsListener(this);

Dès que le serveur recevra un message, il appelera le fonction onXMLReceived et dès qu'il sera connecté ou bien s'il y'a une erreur de connection : onConnectionStatut

Nous allons donc définir ces fonctions :

Code

function onXMLReceived(e:Object):Void{

var xml:XML = new XML(e.xXML.toString());

trace("xml reçu :"+xml);

}

function onConnectionStatut(e:Object):Void{

var connected:Boolean = e.val.toString() == "true";

trace("état de la tentative de connection :"+e.val);

if(!connected) return;

var sMessage:String = "Hello tout le monde";

var xToSend:XML = new XML("<client dataType='sendToAll'><message>"+sMessage+"</message></client>")

cHandler.sendToServer(xToSend);

}

Ici, dès que le client tente de se connecter, on regarde s'il y arrive et si oui, on envoit un message à tous les clients. Ce message est récupéré par onXMLReceived.
Voila, vous venez de créer votre première application avec XServer.
img:coupe
img:remarqueCréation du chat
Pour la création du chat avec XServer nous allons suivre ce diagramme UML qui se compose de 4 classes :

La classe ChatHandler va permettre de gérer le chat à travers 3 autres classes :
ChatModel : qui contient les méthodes permettant d'envoyer des messages et changer de salle.
ClientHandler : qui permet de se connecter.
ChatDisplayer qui permet d'afficher les salles, les clients et les messages.

En premier lieux, nous allons charger la classe ChatHandler et l'instancier :

Code

import net.inlabs.chat.ChatHandler;

//on instancie la classe

var ch:ChatHandler = new ChatHandler(this);

//on se connecte sur le localhost et le port 1024

ch.init("localhost",1045);

//on évite de mettre nimporte quoi dans le login

tLogin.restrict = "^<>"

stop();

Nous allons maintenant gérer l'appui sur le bouton Connection :

Code

//Lorsque l'on presse le bouton Connection :

btConnect.onPress = function(){

//on initialise le TextField d'erreur

tError.text =  "";

//on regarde si on est connecté

if(!this._parent.ch.getClient().isConnected()) {

 tError.text = "Pas connecté";

 return

};

//on regarde si le login est bon

if(tLogin.text.length ==0) {

 tError.text = "Un login ? merci";

 return;

}

//on essaye de se connecter

this._parent.ch.getClient().tryLogin(tLogin.text,0);

}

La méthode tryLogin va permettre de sauvegarder la salle, le login et de demander au serveur si le login est correct (s'il n'est pas déjà utilisé)

Code

public function tryLogin(sLogin:String,nRoom:Number):Void{

 _sLogin = sLogin;

 _room = nRoom;

 _cHandler.sendToServer(new XML("<server dataType='setLogin'><login>"+sLogin+"</login><room>"+_room+"</room></server>"));

}

Le serveur va ensuite répondre et la métoheonLogin va être appelée :

Code

private function onLogin(e:Object):Void{

 var xXML = new XML(e.oXML.toString());

 var statut:String = xXML.firstChild.firstChild.firstChild.toString()

 var isLogged:Boolean = statut =="false";

 if(isLogged){

  _stage.nextFrame();

  _stage.tRoom.text = "salle : "+_room;

  return;

 }else if(statut =="ban"){

  _stage.tError.text = "Vous êtes banni";  

 }else{

  _stage.tError.text = "Login déjà présent";

 }

 _sLogin = null;

}

Le client est ensuite envoyé sur la deuxième frame de la scène.
Pour envoyer un message, il va appeler la méthode sendMsg :

Code

function sendMsg(Void):Void{

if(tMsg.text.length == 0) return;

//On regarde si c'est un message privé :

if(tMsg.text.substring(0,1) == "@"){

 var sLogin:String = tMsg.text.substring(1,tMsg.text.indexOf(" "));

 var sMsg:String = tMsg.text.substring(tMsg.text.indexOf(" ")+1,tMsg.text.length);

 if(sMsg.length ==0) return;

 //on envoit le message privé

 ch.getModel().sendPv(sMsg,sLogin);

}else{

 //Sinon on envoit un message à tout le monde

 ch.getModel().sendMessage(ch.getClient().getLogin()+" : "+tMsg.text,ch.getClient().getRoom());

}

//On vide le TextField

tMsg.text = "";

}

Une fois le message reçu, on appelle la fonction onMessage ou onPrivateMessage s'il est privé :

Code

private function onMessage(e:Object):Void{

 var xXML = new XML(e.xMsg.toString());

 _stage.tMsgs.text += unescape(xXML.firstChild.firstChild)+"n";

 _stage.tMsgs.scroll = _stage.tMsgs.maxscroll;

}

Pour changer de salle, on appelle la méthode changeRoom de ChatModel :

Code

public function changeRoom(nRoom:Number):Void{

 var xToSend:XML = new XML("<client dataType='changeRoom'><room>"+nRoom+"</room></client>");

 _cHandler.sendToServer(xToSend);

}

Une fois la liste des clients reçue :

Code

public function displayUsers(Void):Void{

 var aUsers:Array  = _rManager.getList();

 _stage.tUsers.text = "";

 for(var i:Number = 0;i<aUsers.length;i++){

  _stage.tUsers.htmlText += "<a href='asfunction:writePv,"+aUsers[i]+"'>"+aUsers[i]+"</a>n";

 }

}

et

Code

public function displayRooms(aRoom:Array):Void{  

 for(var i:Number = 0; i< aRoom.length; i++){

  _stage.roomList.removeItemAt(aRoom[i][0])

  _stage.roomList.addItemAt(aRoom[i][0], {label:"salle "+aRoom[i][0]+" ("+aRoom[i][1]+")",data:aRoom[i][0]});

 }

}

Voila, vous venez de voir comment faire un chat multiRoom sous XServer.
La source de ce tutorial est en pièce jointe.
[attachmentid=23140]

Fichier(s) joint(s)

•  sample.zip (426.22Ko)
  Nombre de téléchargements: 751

[flasheur débuant]

lien mort