Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Chat SharedObject partie 02 : Module de discussion

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

Article écrit le 05/04/2007 13:49.
Par drakini ( Drakini ).

Pour réaliser ce tutorial, il est indispensable d’avoir suivi et compris, la partie 01. Nous allons en effet, ce servir de la première structure / application mise en place.

Mise en forme de l’application : Nous allons rajouter sur la scène de notre application v1, plusieurs éléments. Nous aurons besoin d’un champ de texte, et d’un bouton envoyer. Pour la zone de texte de réception, nous utiliserons le composant TextArea d’Adobe, pour gagner du temps sur la conception. Il suffit de glisser une instance de ce composant dans votre application.

Nous avons donc notre client qui ce connecte à l’application. Son nom, est automatiquement inséré dans un SharedObject userList. Notre liste d’utilisateur s’appuie sur ce SO, pour effectuer sa synchronisation, et avertir tous les clients des changements potentiels. Le fonctionnement sera sensiblement le même en ce qui concerne la création de notre module de discussion.

Un utilisateur connecté envoi un message au serveur. Ce message est ensuite traité et mis en forme sur le serveur. Nous utiliserons ici la méthode send() d’un nouveau SharedObject que nous allons crée. Cette méthode nous servira a envoyé ce message mis en forme, à tous les utilisateurs connecté à ce nouveau SO.

CODE : Côté serveur

//-----------------------------------------------------------------
//
application.onAppStart = function() {
	this.userList = SharedObject.get("public/userList");
        this.chatSO = SharedObject.get("public/chatSO", true);
}
//
//-----------------------------------------------------------------

Reprenons, côté serveur, notre événement onAppStart. Sur le même principe que nous avons initialiser notre SO userList, nous mettons en place un nouveau SO : chatSO. Ici, nous allons le définir en persistant. Cela va nous permettre, par exemple, de conserver un historique de notre chat.

Revenons maintenant côté client pour la mise en place de notre module de discussion. Notre client c’est connecté, et nous avons vu dans la première partie de ce tutorial, qu’une méthode init était alors appelé pour l’initialisation de notre application.

CODE : Côté client

//-----------------------------------------------------------------
function init() {
	// SO Chat
	chatSO = SharedObject.getRemote("public/chatSO", _nc.uri, true);
        chatSO.owner = this;
	chatSO.connect(_nc);
	// SO userliste
	var userList = SharedObject.getRemote("public/userList", _nc.uri, false);
	userList.onSync = function(list) {
		trace("--- Synchronisation du SO userList ---");
		grid.removeAll();
		for (var i in userList.data) {
			trace(i);
			if (userList.data[i] != null) {
				var clientObj = userList.data[i];
				grid.addItem({label:clientObj.login, data:clientObj});
			}
		}
	};
	userList.connect(_nc);
	//
	messagesArea.setStyle("color", "0x666666");
	messagesArea.setStyle("fontFamily", "arial");
	messagesArea.setStyle("fontSize", 11);
	messagesArea.setStyle("borderStyle", "none");
	messagesArea.html = true;
	messagesArea.editable = false;
	messagesArea.wordWrap = true;
	if (messagesArea.text == "") {
		messagesArea.text = "> Message d'accueil \n";
	}
}
//
//-----------------------------------------------------------------

J’ai repris ici, la méthode init dans son ensemble. Au même titre que nous avons initialiser notre SharedObject userList, nous allons ici mettre en place le SO chatSO. Côté serveur, il a été déclaré persistant, nous faisons donc une déclaration identique côté client. Nous le connectons ensuite à notre instance de NetConnection.

A la fin de notre méthode init, nous avons également la mise ne forme de notre composant TextArea. Nous vérifions également son contenu. Cela peut nous permettre d’insérer un message de bienvenue, par exemple.

Analysons maintenant ce qu’il ce passe lorsqu’un utilisateur décide d’envoyer un message. Il tapote son petit texte, et appui sur notre bouton envoyer.

CODE : Côté client

//-----------------------------------------------------------------
//
send_btn.onPress = function() {
	enter();
};
//
function enter() {
	var msg = input_txt.text;
	if (msg == "") {
		return;
	}
	_nc.call("sendMessage", null, msg);
	input_txt.text = "";
}
// Key
sendListener = new Object();
sendListener.owner = this;
sendListener.onKeyDown = function() {
	var encours = Selection.getFocus();
	if (Key.isDown(Key.ENTER) && encours != null) {
		this.owner.enter();
	}
};
//
Key.addListener(sendListener);
//
//-----------------------------------------------------------------

Lorsqu’un utilisateur envoi son message, nous allons appeler, grâce à la méthode call de notre instance NetConnection, une méthode côté serveur. Je ne reviens pas sur l’utilisation de la méthode call ici, j’ai traité le problème dans un autre tutorial, que je vous recommande de lire et de comprendre.

Nous appelons côté serveur, la méthode sendMessage, et nous lui envoyons en paramètre le message tapé par l’utilisateur. J’ai rajouté une petite méthode permettant d’envoyer le message via la touche Entrée de votre clavier. Je ne reviens pas sur ce bout de code, c’est simplissime.

Le message est donc envoyé au serveur, allons voir sa réception et son traitement.

CODE : Côté serveur

//-----------------------------------------------------------------
//
Client.prototype.sendMessage = function(msg) {
  	msg = "<b>" + this.login + " : </b>" + msg;
	application.chatSO.send("showMessage", msg);
}
//
//-----------------------------------------------------------------

Pour la réception, nous allons utiliser la méthode sendMessage de l’objet prototype de notre objet client. Je vous rappel qu’en SSAS, le développement ce fait encore en AS 1. Côté client, le code est bien évidemment en AS 2, mais j’utilise, du coup, encore également quelques prototype. L’utilisation des prototypes est donc un bon moyen de rendre votre code propre et réutilisable côté serveur. Côté client, c'est juste une mauvaise habitude qui durre. En paramètre, cette méthode reçoit le message de l’utilisateur. Il nous suffit de le mettre en forme, via quelques balises html simple.

C’est ensuite que cela devient intéressant. Nous allons utiliser la méthode send() de notre SharedObject. Cette méthode permet d’envoyer un message à tous les utilisateurs connecté à ce SO. Elle va en fait, appelé côté client, la méthode associé, ici showMessage. C’est cette méthode, côté client, qui affichera le contenu du message dans le TextArea à tous les utilisateurs .

CODE : Côté client

//-----------------------------------------------------------------
//
SharedObject.prototype.showMessage = function(msg) {
 
      this.owner.messagesArea.text += msg;
 
      this.owner.messagesArea.vPosition = this.owner.messagesArea.maxVPosition;
 
      this.owner.messagesArea.redraw();
 
      this.data.texte += msg;
 
};
//
//-----------------------------------------------------------------

En fait, cette méthode simple, incrémente le TextArea du nouveau message mis en forme. De plus, via la propriété data, nous insérons une propriété texte à notre SO, contenant, l’ensemble des messages de notre chat.

Voilà, après quelques allez et retour, nous arrivons à la fin de cette deuxième partie de notre tutorial.

Sources

En cas de question, n’hésitez pas à les poser dans la salle Flash Media Server du forum.

Drakini