Aujourd'hui, nous allons voir comment créer une application de chat simple en utilisant Flex. Ne prenez pas cet exemple comme une application complète, mais simplement comme une méthode pour comprendre comment les différents éléments impliqués. Ni ne doit comparer ce projet avec le client IRC que j'ai présenté plus tôt cette année, même si les deux sont des applications de chat sont différents systèmes, comme vous le verrez plus tard.
Flash Media Server (FMS, autrefois appelé Flash Communication Server) logiciel Adobe qui vous permet de créer des applications multi-utilisateurs dans un éclair de technologie simple et peu. FMS permet non seulement d'échanger et de synchroniser les messages texte entre les clients, mais aussi audio et vidéo. Si flv est le système excellence de la vidéo sur Internet, FMS est la technologie pour créer des systèmes multi-médias. Le principal inconvénient de FMS est qu'il est payé, et pas exactement pas cher, mais il s'agit d'une licence "développeur" qui vous permet d'utiliser 100% des capacités du serveur, la seule limitation est le nombre d'utilisateurs simultanés que vous pouvez avoir, dix dans ce cas. Il est une alternative Open Source à FMS, Red5 , mais je n'ai jamais utilisé donc je ne peux pas dire. La théorie Red5 est exactement la même que celle avec FMS, il suffit de changer le milieu (Red5 programme FMS avec ActionScript et Java). Des exemples d'applications qui utilisent FMS est Yahoo en direct , l'application d'enregistrement direct à partir de votre webcam Youtube ou tout, absolument toutes les conversations vidéo que vous pouvez trouver en ligne.
Comme vous n'avez probablement pas besoin d'une licence pour FMS, nous allons travailler avec la version développeur nous avons déjà indiqué que nous mettrons en œuvre tous les concepts nécessaires. La première chose à faire est donc de télécharger et d'installer FMS, il existe des versions pour Linux et Windows, choisissez celui qui vous convient le mieux. L'installation a aucun secret si je vais laisser entre vos mains. Dans mon cas, comme toujours, CentOS5 .
Projets FMS sont créés sur les systèmes client / serveur et deux applications doivent fonctionner:
- demande du client, il serait le flash pur et simple, les utilisateurs feront.
- Le serveur d'application serait exécuté sous FMS et ce qui relie l'application cliente.
Dites mágina baguette FMS est défini comme totalement transparente pour le développeur fait le lien entre les utilisateurs et l'injection de messages entre eux. Pour comprendre cette envisager une discussion où les utilisateurs se connectent au serveur et à chaque fois que l'un d'eux écrit un message est automatiquement envoyé aux autres utilisateurs. Imaginez en outre que non seulement parler de texte, mais lorsque l'utilisateur tourne la caméra sur les autres utilisateurs peuvent voir. Tout cela fait FMS pour vous, vous inquiétez seulement de construire votre application.
Planification d'une application FMS
Commencez la pratique de créer le code nécessaire sur le serveur. Par requêtes FMS installés par défaut dans le répertoire / opt / adobe / FMS / applications créant un nouveau répertoire avec le nom de votre application, dans notre cas, le chat texte de l'appel.
Les applications sont chargées et conservées en mémoire lorsque l'utilisateur accède pour la première à lui et, après un délai raisonnable, si aucun utilisateur est déchargé de libérer des ressources en attente pour un autre utilisateur de rentrer. Chaque fois que vous apportez des modifications au serveur d'applications doit être redémarré, mais pas besoin de redémarrer le serveur FMS pour redémarrer une application, il suffit de télécharger et rechargez cette application à partir de la console de gestion tel que discuté ci-dessous. De la même console, nous pouvons voir également la sortie de la commande trace de se produire sur le serveur et les objets créés et son contenu pendant que vous êtes en développement, il aide indispensable. Nous verrons aussi comment activer la sortie de ces options par défaut (pour la sécurité) sont désactivés.
Par défaut, toutes les applications doivent avoir un fichier avec le code nécessaire main.asc. Créez votre main.asc ceci:
"netservices.asc" ) ; charge ("netservices.asc");
( ) { application. onAppStart = function () {
"inicia text chat" ) ; trace ("commencer le chat texte");
= SharedObject . get ( "users_so" , false ) ; Cette users_so = SharedObject get ("users_so", false)..;
= SharedObject . get ( "chat_so" , false ) ; Cette chat_so = SharedObject get ("chat_so", false)..;
= { } ; . Cette userList = {};
= 1 ; . Cette uid = 1;
}
( client, nick, clave, sala ) { application. onConnect = function (client, surnom, mot de passe, chambre) {
nick+ " " +clave+ " " +sala ) ; trace (nick + "touche" + + "" + séjour);
; var valide = 1;
i in this . userList ) { for (i in This. userList) {
String ( this . userList [ i ] . nick ) . toLowerCase ( ) == String ( nick ) . toLowerCase ( ) ) { if (String (this. userList [i]. surnom). toLowerCase () == String (Nick). toLowerCase ()) {
valide = 0;
break;
}
}
valido== 1 ) { if (valide == 1) {
. uid ; client uid = cet uid..;
client nick = nick.;
. client chambre = chambre;
( client ) ; . Cette AcceptConnection (client);
[ client. uid ] = client; Cette userList [uid client.] = Client.;
. setProperty ( client. uid , client ) ; .. Ce users_so setProperty (client. uid, client);
+ client. nick + " ***</b></font><br>" ; var msg = "color <font = '# 666666'> <b> *** Entrée" + client + nick "*** </ b> </ font>.";
. send ( "onMsgSend" , msg ) ; . Cette chat_so envoyer ("onMsgSend", msg).;
"onUserid" , null , client. uid , client. nick ) ; . client put ("onUserid", null, uid client, client surnom..);
++; Cette uid + +.;
{ Else {}
Object ( ) ; var erreur = new Object ();
; err message = "Il existe déjà un utilisateur avec ce nick".;
err. message ) ; trace (un message err.);
client, err ) ; . demande rejectConnection (client, err);
}
}
( oldClient ) { application. OnDisconnect = function (oldClient) {
oldClient. uid != undefined ) { if (uid oldClient.! = undefined) {
"Descontecta cliente. UID: " +oldClient. uid ) ; trace ("Descontecta client UID:.". + oldClient uid);
+ oldClient. nick + " sale ***</b></font><br>" ; var msg = "color <font = '# 666666'> <b> ***" + oldClient nick + "vente *** </ b> </ font>.";
. send ( "onMsgSend" , msg ) ; . Cette chat_so envoyer ("onMsgSend", msg).;
i in application. userList ) { for (i in application. userList) {
Number ( application. userList [ i ] . uid ) == Number ( oldClient. uid ) ) { if (Number (application. userList [i]. uid) == Number (oldClient. uid)) {
i ] = undefined ; demande userList [i] = undefined.;
}
k + +;
}
oldClient ) ; demande déconnecter (oldClient).;
( oldClient. uid , null ) ; .. demande users_so setProperty (oldClient. uid, null);
}
}
Le fonctionnement est très simple. Notre application gère trois événements:
- onAppStart: Prend la photo lorsque l'application est chargée dans la mémoire premier.
- onConnect: déclenchée quand un utilisateur se connecte à l'application.
- OnDisconnect: Quand un utilisateur se déconnecte.
Considérons la théorie d'un chat et comprendre rapidement comment cela fonctionne sur votre serveur FMS de côté. Dans une application de chat typique, le serveur doit gérer une liste d'utilisateurs actuellement connectés (pseudos) et être en mesure de pouvoir envoyer des messages à tous les utilisateurs. Par exemple, lorsqu'un nouvel utilisateur se connecte et écrire quelque chose sans elle, le serveur doit être capable d'envoyer un message du genre "Nick est connecté au chat" pour tous les autres utilisateurs. Pour résoudre ce FMS a ce qui est connu comme objets partagés (SharedObjects), des objets que tous les clients peuvent accéder.
Si vous analysez notre code maintenant onAppStart main.asc voir que l'événement crée les variables utilisées dans l'application:
- userList: tableau contenant la liste des utilisateurs connectés au système.
- uid: ID du dernier utilisateur connecté à localiser sans équivoque un client.
- users_so: liste des utilisateurs d'objets partagés
- chat_so: Causerie objet partagé lui-même, il enverra les messages que les utilisateurs tapent.
Je pense que plus que suffisant explications car il est si simple, cela signifie seulement.
Maintenant, pour la théorie de ce qui se passe quand un utilisateur est connecté, onConnect événement. Chaque fois qu'un client accède à notre chat que nous voyons, tout d'abord, siya un autre utilisateur avec le même surnom, dans ce cas, nous rejetons votre connexion. Si tout se passe bien et que votre surnom est unique doit garder l'utilisateur dans la liste des utilisateurs et avertir tous les clients connectés et il ya un nouvel utilisateur dans le chat.
Maintenant, comparez la théorie avec le code d'événement. Le paramètre client est automatique et représente le client qui se connecte. Il est un autre objet avec les paramètres par défaut. Les autres paramètres de l'événement le client va nous passer de notre flash. Pour voir si un pseudo existe déjà, simplement comparé à tous les autres userList de tableau que nous avons vu qui contient tous les utilisateurs connectés. Le onConnect d'événement peut accepter un client (AcceptConnection) ou rejeter (rejectConnection).
Si l'utilisateur a été admis, nous avons l'UID suivante, puis à avertir les autres usagers de la route que nous avons un nouvel utilisateur. Se souvenir des variables que nous avions un objet partagé qui est accessible à tous les clients, users_so, il suffit d'ajouter notre nouveau client à cet objet:
this.users_so.setProperty (client.uid, client);
Lorsque l'application cliente, nous allons voir comment nous détecter les changements dans cet objet, mais il est extrêmement simple.
Attendez. Nous devons envoyer le message de "Nick est connecté au chat". Aussi simple que:
. send ( "onMsgSend" , msg ) ; . Cette chat_so envoyer ("onMsgSend", msg).;
Magique!. Comme chat_so était un objet partagé, tous les clients et le serveur ont accès et ce que vous l'obtiendrez automatiquement entrer tout le monde. C'est la vraie magie de FMS et ne pas avoir à se soucier de la façon d'envoyer des messages aux utilisateurs un par un, sont synchronisés seul.
Comme un dernier détail, lorsque nous acceptons une connexion client à l'appel de méthode demande du client à distance onUserid. Yeah! vous avez bien lu!, FMS appeler une fonction de votre SWF!. Nous verrons plus tard pourquoi, n'oubliez pas que lorsque vous vous connectez au serveur de chat appelle une méthode de transmettre sa propre application UID.
Enfin, nous voyons le dernier événement du serveur, assez évident si vous avez suivi expliqué ci-dessus et vous avez, de déconnecter un utilisateur.
Sans réfléchir, beaucoup plus que nous comprenons être éliminés userList client et users_so. Pour cette raison, il ya beaucoup plus de science.
Nous avons le serveur complet. Simple n'est-ce pas?. Vous pouvez toujours pas à comprendre certaines choses. Facile, quand on voit le client tout comprendre et voir, il est vraiment très facile de créer ces applications avec FMS.
La console de gestion
Flash est une application à partir de laquelle les administrateurs peuvent se connecter au serveur que le FMS et les opérations de maintenance, y compris le chargement et le déchargement des instances d'application, voir le journal du système (la trace), examiner des objets (en mode debug) ...
Une fois installé FMS vous demande un nom d'utilisateur et un mot de passe et un port où vous installez cette console de gestion. Il vous suffit de connecter et commencer à voir ces données.
Il ya, cependant, certaines particularités de l'administration doit être envisagée. Pour activer les options de débogage vont s'opposer à modifier la conf / _defaultRoot_ / _defaultVHost_ / Application.xml changer:
<AllowDebugDefault> False </ AllowDebugDefault>
à vrai. Vous redémarrez le serveur pour que le changement devient actif et vous verrez quelque chose comme ce qui va vous aider à déboguer votre application.
Dans l'application de la barre d'options (Live journal, clients ...) ont deux petits boutons qui vous permettent de recharger une instance de l'application ou de le télécharger complètement, les options que nous avons déjà mentionné au cours du développement aideront à éviter d'avoir à redémarrer l'ensemble du serveur.
L'application cliente
Et maintenant le dernier point. L'application, le chat, ce que l'utilisateur voit.
J'ai déjà mis une capture d'écran du résultat final. Nous voyons maintenant les tenants et les aboutissants. Bas ont tous le code source pour tous les projets de démonstration.
Je vais aller droit au cœur de la connexion avec FMS et envoyer et recevoir des données, l'interface utilisateur et l'écran d'ouverture de session, je vous laisse. Comme vous pouvez le voir il ya une classe qui centralise Chat.as presque tout le processus de communication avec le serveur.
; Chat = new chat ();
UserIDEvent. USER_ID , onUID ) ; . discuter addEventListener (UserIDEvent. USER_ID, onUID);
NCEvent. STATUS , onStatus ) ; . discuter addEventListener (NCEvent. STATUS, onStatus);
NCEvent. NONICK , onStatus ) ; . discuter addEventListener (NCEvent. nonick, onStatus);
( ) ; .. salaSeleccionada = chambre selectedItem toString ();
"rtmp://" +host+ "/textchat/" +salaSeleccionada, StringUtil. trim ( nick. text ) , StringUtil. trim ( clave. text ) , salaSeleccionada ) ; discuter init ("rtmp :/ /" + accueil + "/ TextChat /" + salaSeleccionada, StringUtil trim (texte nick.), StringUtil TRIM (texte clave.), salaSeleccionada..).;
onUID ( event:UserIDEvent ) : void { fonction privée onUID (event: UserIDEvent): void {
. miuid = événement ID utilisateur;
currentState = "chatState";
; . msg SetFocus ();
; . CursorManager removeBusyCursor ();
( KeyboardEvent. KEY_UP ,keyHandler ) ; . Cette addEventListener (KeyboardEvent. KEY_UP, KeyHandler);
DropdownEvent. CLOSE , pickerClose ) ; . picker addEventListener (DropdownEvent. CLOSE, pickerClose);
}
onStatus ( event:NCEvent ) : void { onStatus fonction privée (event: NCEvent): void {
; . CursorManager removeBusyCursor ();
event. status == "closed" ) { if (éventuellement statut == "fermé") {
= "Desconexión completa." ; . statut text = "arrêt complet.";
}
event. status == "nickexiste" ) { if (éventuellement statut == "nickexiste") {
= "Usuario o contraseña incorrectos." ; . statut text = "Nom d'utilisateur ou mot de passe incorrect.";
}
currentState = "";
}
Lors de la création de l'instance sera détecté une discussion de quelques événements qui se déroulera:
- onUID: feux lorsque le serveur, comme nous l'avons vu, appelle le onUserid client. Nous avons utilisé pour modifier l'état de l'interface utilisateur à partir de la fenêtre de connexion pour discuter et connecté seulement si nous recevons l'UID.
- onStatus: adetectar nous aider refusé connexions et votre déconnexion.
Pour vous connecter vous voyez que nous appelons la méthode init de chat avec quatre paramètres, l'URL de l'instance de notre application (défini comme + accueil + application de chat), l'entaille, la clé (pour l'avenir) et sa propre salle de chat . Si vous examinez cette méthode, vous verrez combien il est facile de démarrer une connexion. Le plus important est
netStatus ( event:NetStatusEvent ) : void { netStatus fonction privée (event: NetStatusEvent): void {
= event. info ; Info Var:. Object = événement d'info;
info. code ) switch (code INFO.)
{
: cas "NetConnection.Connect.Success":
( "users_so" , nc. uri , false ) ; . users_so = SharedObject getRemote ("users_so", nc uri, faux.);
SyncEvent. SYNC , usersSync ) ; . users_so addEventListener (SyncEvent. SYNC, usersSync);
NetStatusEvent. NET_STATUS , onSOnetStatus ) ; . users_so addEventListener (NetStatusEvent. NET_STATUS, onSOnetStatus);
SecurityErrorEvent. SECURITY_ERROR , onSOSecurityError ) ; . users_so addEventListener (SecurityErrorEvent. SECURITY_ERROR, onSOSecurityError);
; users_so client = ce.;
nc ) ; . users_so connect (nc);
( "chat_so" , nc. uri , false ) ; . chat_so = SharedObject getRemote ("chat_so", nc uri, faux.);
NetStatusEvent. NET_STATUS , onSOnetStatus ) ; . chat_so addEventListener (NetStatusEvent. NET_STATUS, onSOnetStatus);
SecurityErrorEvent. SECURITY_ERROR , onSOSecurityError ) ; . chat_so addEventListener (SecurityErrorEvent. SECURITY_ERROR, onSOSecurityError);
; chat_so client = ce.;
nc ) ; . chat_so connect (nc);
break;
: cas "NetConnection.Connect.Rejected":
NCEvent ( NCEvent. NONICK , "nickexiste" ) ) ; dispatchEvent (nouveau NCEvent (NCEvent. nonick, "nickexiste"));
break;
: cas "NetConnection.Connect.Closed":
NCEvent ( NCEvent. STATUS , "closed" ) ) ; dispatchEvent (nouveau NCEvent (NCEvent. STATUS, "fermé"));
break;
}
}
Est-ce que détecte l'état de la connexion, si le serveur accepte ou rejette nous nous comme nous l'avons vu précédemment, même si nous sommes passés. Notez que si nous sommes acceptés, nous allons nous connectons SharedObjects nous avons créé précédemment sur le serveur
. Chat est maintenant qui va faire absolument tout ce travail, application MXML est l'interface utilisateur qui transmet les commandes nécessaires pour discuter en ligne. Prenez, par exemple, comme indiqué discuter avec d'autres utilisateurs d'envoyer un message que nous nous écrivions.
sendMsg ( ) : void { sendMsg fonction privée (): void {
msg. text . length > 0 ) { if (msg. texte. longueur> 0) {
msg. text ) ; . discuter sendMsg (texte msg.);
; . msg text = "";
}
}
Eh bien oui, mais tu as triché, ici vous quittez le coeur dans les mains de chat
. Eh bien, nous allons voir ce qui se passe dans sendMsg.
sendMsg ( color : String , msg: String ) : void { sendMsg de la fonction publique (couleur: String, msg: String): void {
= "" ; outmsg var: String = "";
+ "'><b>" + this . username + ":</b> " + msg + "</font><br>" ; outmsg = "+ couleur + =" # "milliseconde"> <b> "+ ce nom +": </ b>. "+ msg +" </ font> ";
"onMsgSend" , outmsg ) ; chat_so envoyer ("onMsgSend" outmsg).;
}
Rien que ça! Comme nous sommes reliés à SharedObject chat_so, nous disons les choses pour appeler la méthode onMsgSend de ses clients et passerons le texte que vous avez écrit.
Ok, alors comment pouvons-nous lire les messages écrits par d'autres membres?. Je viens de vous dire
. Quand un utilisateur écrit quelque chose, appelez (peu importe comment) une méthode locale de chaque utilisateur qui est responsable de la rédaction du texte dans la fenêtre de chat.
onMsgSend ( msg: String ) : void { onMsgSend fonction publique (msg: String): void {
chatHistory + = msg;
Event ( "histChange" ) ) ; dispatchEvent (new Event ("histChange"));
}
Évidemment, cette méthode doit être publique. En envoyant cet événement est tout simplement mettre à jour le texte du textarea.
Jusqu'à maintenant, je pense que je vais l'obtenir, mais vous n'avez pas expliqué comment nous détectons les entrées et sorties utilisateur. A droite, nous allons voir ensuite. Nous venons de voir que lorsque nous sommes entrés dans le chat et sont admis Connectez-vous avec SharedObjects nous avons créé sur le serveur. Si vous avez remarqué (et si ce n'est pas le faire maintenant), nous mettons les utilisateurs à un auditeur différent:
SyncEvent. SYNC , usersSync ) ; . users_so addEventListener (SyncEvent. SYNC, usersSync);
Cela signifie que chaque fois qu'il ya un changement dans la users_so objet tous les clients seront informés de cela. Par exemple, chaque fois qu'un utilisateur entre ou quitte ou quitábamos vu que nous avons ajouté un élément de cet objet représentant cet utilisateur. Chacune de ces opérations fera notre application cliente reçoit un appel à usersSync.
usersSync ( event:SyncEvent ) : void { fonction privée usersSync (event: SyncEvent): void {
= event. target . data ; var results:.. Object = données événement cible;
= new Array ( ) ; var usersArray: Array = new Array ();
= false ; var existe: Boolean = false;
/ / I données mises à jour uniquement
var i: String in results ) { for (var i: String dans les résultats) {
results [ i ] . sala == this . sala ) { if (résultats [i]. == Cette chambre. salle) {
existe = false;
var j: Number = 0 ; j<dpUsers. length ; j++ ) { for (var j:. Number = 0; j <dpUsers longueur j + +) {
dpUsers [ j ] . uid ==results [ i ] . uid ) { if (dpUsers [j]. uid == résultats [i]. uid) {
existe = true;
break;
}
}
existe ) { if (existe) {
/ / Dans le cas où il a changé le nick
. nick =results [ i ] . nick ; dpUsers [j] = surnom résultats [i] surnom..;
{ Else {}
= new Object ( ) ; var clientObj: Object = new Object ();
i ] . nick ; . clientObj surnom = résultats [i] surnom.;
i ] . uid ; clientObj uid = résultats [i] uid..;
clientObj ) ; . dpUsers addItem (clientObj);
}
}
}
/ / Maintenant, je dois enlever le bas
/ / Supprimer le dernier départ pour ne pas changer indices
j=dpUsers. length -1 ; j>= 0 ; j– ) { for (j = dpUsers. longueur -1, j> = 0, j-) {
existe = false;
i in results ) { for (i in résultats) {
dpUsers [ j ] . uid ==results [ i ] . uid && results [ i ] . sala == this . sala ) { if (dpUsers [j]. uid == résultats [i]. uid && résultats [i]. == Cette salle. salle) {
existe = true;
}
}
!existe ) { if (! existe) {
j ) ; . dpUsers removeItemAt (j);
}
}
/ / Enfin ordonné utilisateurs
: Sort = new Sort ( ) ; Trier var: Sort = new Trier ();
= [ new SortField ( "nick" , true ) ] ; . sorte champs = [nouvelle SortField ("nick", true)];
; dpUsers sort = tri.;
; dpUsers refresh ().;
Event ( "dpChange" ) ) ; dispatchEvent (new Event ("dpChange"));
}
Cette revue de la méthode, tous les utilisateurs de SharedObject par rapport à ceux de la liste des utilisateurs du canal où nous bavardons et ajouter de nouveaux utilisateurs et d'éliminer ceux qui sont partis. Peut-être pas la meilleure façon de gérer les utilisateurs et aurait été beaucoup plus facile d'avoir un couple de méthodes qui gèrent delUsuario addUsuario et automatiquement tous les appels à distance avec des messages tels que, mais je voulais que nous voyons comment recevoir les avis des modifications apportées à un SharedObject.
Conclusions
Nous avons vu d'une manière très simple, nous pouvons créer notre propre conversation sans complications inutiles. Pensez aussi que c'est certainement très simple, la première étape avec FMS, les véritables possibilités sont infinies.
L'article peut élargir les possibilités de ce petit exemple l'ajout de vidéo et audio ou même faire un système d'enregistrement vidéo avec votre webcam peu similaire à Youtube.
Comme toujours, ici je laisse le code complet du projet. Rappelez-vous qu'il est un exemple de ce que vous pouvez faire, vous ne devriez pas l'utiliser comme elle, mais en pratique ce que vous avez expliqué. De même, il y aura des choses qui ne sont pas parfait et ne peut faire mieux, sans doute, mon intention était d'expliquer les rudiments de la SGF et d'afficher leur potentiel.