Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Création d'un chat multi-room avec XServer

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

Article écrit le 21/04/2005 13:53.
Par Nanu.

Connaissances requises

Typage fort
Classes AS2 part 1&2
Notion d'XMLSocket
Lecture de la documentation d'XServer : http://xserver.inlabs.net
Niveau intermédiaire

But

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

Parties

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

Installation 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
:arrow: 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 ...

Explication

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.
chat_multiroom_xserver_1.jpg

Envoi 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 :

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 :

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 :

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.

Création du chat

Pour la création du chat avec XServer nous allons suivre ce diagramme UML qui se compose de 4 classes :
chat_multiroom_xserver_2.jpg

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 :

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 :

//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é)

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 :

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 :

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é :

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 :

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 :

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

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.
Voici la source de ce tutorial. =)