Hello AFCS ( bye Cocomo ) : première application multi-utilisateurs

[ 5 mars 2009 : Mise à jour de l'article : Cocomo devient AFCS et passe en version 0.9.1, corrigeant quelques bugs ]

Dans ce 1er exemple d’application Cocomo Adobe Flash Collaboration Services aka A.F.C.S, nous allons développer, à vrai dire « assembler », une application de visioconférence intégrant un tchat, des notes partagées et un gestionnaire de partage de fichiers. Pour cela nous allons utiliser des pods, les composants de plus haut-niveau fournis dans cocomo AFCS .

Pour commencer :

  • créer un nouveau Flex
  • copiez le fichier SWC de cocomo AFCS ( CocomoSDK_0.9.1/lib/player 9 ou 10/afcs.swc ) dans le dossier /libs de votre projet.

Hello Cocomo

L’un des principaux composants d’une application cocomo AFCS est le gestionnaire de session. C’est lui qui sera chargé de la communication avec les serveurs cocomo AFCS , et donc de l’identification des utilisateurs, de la gestion de leur connexion, de la synchronisation des données… et plus encore…

Deux composants peuvent jouer ce rôle : ConnectSessionContainer et ConnectSession ( tous deux implémentent com.adobe.rtc.session.IConnectSession ).

Cocomo ConnectSessionContainer

Commençons avec le ConnectSessionContainer :

Il s’agit d’un composant basé sur la classe Canvas, et intégrant toute la « mécanique » nécessaire à la communication avec les serveurs cocomo AFCS .

Il est à noter que le ConnectSessionContainer, et donc ses « composants-enfants », resteront invisibles tant que la communication avec salon ne sera pas établie. C’est pour cette raison que nous allons lui intégrer nos pods ( WebCamera, SimpleChat, Notes et FileShare ).Tant que la connexion ne sera pas établie, aucun des composants ne sera visible.

Pour débuter une session, nous devrons renseigner deux propriétés du container de session :

  • l’adresse du salon: roomURL ( exemple : http://connectnow.acrobat.com/votreCompte/nomSalon )
  • les identifiants de connexion : authenticator

La transmission des identifiants se fait par l’intermédiaire de la classe AdobeHSAuthenticator.Elle a pour fonction d’encapsuler les informations relatives à l’identification( userName, password ). Plusieurs modes d’authentification sont possibles, nous nous y interresserons plus tard.

Dans un premier temps nous nous contenterons d’inscrire nos identifiants « en dur » dans notre application.

On peut noter que les composants liés à AFCS se référent au namespace ‘AfcsNameSpace’ ( anciennement ‘CocomoNameSpace’ dans version 0.9 )

?View Code MXML
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application layout="absolute"
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:rtc="AfcsNameSpace"
 >
<rtc:ConnectSessionContainer id="sessionManager" width="500" height="400"
 roomURL="http://connectnow.acrobat.com/votreCompte/nomSalon" 
 authenticator="{identificator}"
 backgroundColor="#FFFFFF"
/>
<rtc:AdobeHSAuthenticator id="identificator"
 userName="votreLogin" password="VotreMotDePasse"
/>
</mx:Application>

À ce stade, l’application peut déjà se connecter. Par défaut, dès que le connectSessionContainer est créé, il tente d’initier la communication avec les serveurs. Dans cet exemple, j’ai ajouté une couleur de fond pour le container, de manière à pouvoir observer lorsque la connexion au salon est réussie.

Si vous publiez le projet en mode debug vous verrez les logs relatifs aux communications client/serveur.

Logs Connexion Serveurs AFCS / Cocomo

Pour vérifier si l’authentification est correcte, nous pouvons déclarer des écouteurs d’événements AuthenticationEvent.AUTHENTICATION_FAILURE et AuthenticationEvent.AUTHENTICATION_SUCCESS sur AdobeHSAuthenticator.

Pour capter le moment où notre application est connectée et synchronisée, nous pouvons ajouter un écouteur d’événement SessionEvent.SYNCHRONIZATION_CHANGE sur le container, et surveiller sa propriété ‘isSynchronized‘. Nous reviendrons prochainement sur les différents aspects et acteurs en jeu lors de cette synchronisation.

?View Code MXML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application layout="absolute"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:rtc="AfcsNameSpace"
>
     <mx:Script>
         <![CDATA[
             import mx.controls.Alert;
             import com.adobe.rtc.events.SessionEvent;
 
             // état de la session
             private var isConnected:Boolean = false;
 
             // à chaque évenement de synchronisation de la session
             public function onSynchro( e:SessionEvent ):void
             {
                 if ( sessionManager.isSynchronized && ! isConnected )
                 {
                     Alert.show("Application connectée");
                     isConnected = true ;
                 }
             }
     ]]>
 </mx:Script>
<rtc:ConnectSessionContainer id="sessionManager"
    width="100%" height="100%" backgroundColor="#FFFFFF"
    authenticator="{identificator}" 
    roomURL="http://connectnow.acrobat.com/regartdemo/meetingzone"
    synchronizationChange="onSynchro( event )"
/>
<!-- composant d'identification -->
 <rtc:AdobeHSAuthenticator id="identificator"
   userName="votreLogin" password="VotreMotDePasse"
   authenticationSuccess="Alert.show('identification réussie')"
   authenticationFailure="Alert.show('erreur d\'identification')"/>
</mx:Application>

Maintenant que notre connexion parvient à se connecter au salon, nous allons pouvoir intégrer les pods.

Utilisation des pods

Les pods sont des composants collaboratifs « prêt à l’emploi« . Lorsque vous utilisez un ConnectSessionContainer, il suffit d’insérer vos pods à l’intérieur pour qu’ils puissent repérer la connexion établie et l’utiliser.

À ce jour, les pods disponibles sont :

  • SimpleChat : composant de « clavardage » permettant l’envoi de messages publics et privés
  • WebCamera : composant de visioconférences
  • FileShare : composant de partage de fichier ( upload / download )
  • Note : composant de partage de notes
  • Roster et HorizontalRoster : composant de gestion d’utilisateurs
  • SharedWhiteBoard : tableau blanc partagé

Nous allons maintenant insérer les pods souhaités :

?View Code MXML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<rtc:ConnectSessionContainer id="sessionManager" width="100%" height="100%" backgroundColor="#FFFFFF"
   authenticator="{identificator}"
   roomURL="http://connectnow.acrobat.com/votreCompte/nomSalon"
   synchronizationChange="onSynchro( event )"
   >
 
   <!-- PODS -->
   <mx:VBox width="50%" height="100%" horizontalAlign="center">
 
      <rtc:WebCamera id="webcam" width="300" />
 
      <rtc:SimpleChat id="chat" width="100%" height="100%" />
 
   </mx:VBox>
 
   <mx:VBox width="50%" height="100%"  right="0">
 
     <rtc:FileShare id="fileManager" width="100%" height="50%" />
 
      <rtc:Note id="notes" width="100%" height="50%" />
   </mx:VBox>
</rtc:ConnectSessionContainer>

Hello Cocomo

Les pods intégrent des mécanismes de gestion de droits. Nous y reviendrons …

Toujours est-il que voilà, vous avez créé votre première application cocomo AFCS , ou devrais je dire votre première application de « communication en temps réelle ». Mais comment faisait-on avant ???…

Identification et gestion de la connexion aux serveurs

Bon il manque encore quelque chose peut être… Pour un seul utilisateur çà irait presque… mais c’est pas le but :s…Comment fera-t-on si un jour on trouve des amis et qu’on veut collaborer avec eux ??? Tout le monde va se connecter avec le compte « d’admin » ??? Et n’importe quel décompileur AS3 va pouvoir récupérer les identifiants ? Pas très sécure… Heureusement cocomo AFCS nous permet de gérer facilement tous ces aspects.

Les serveurs cocomo AFCS permettent plusieurs types d’identification, notamment une connexion en tant que hôte, basée sur le compte cocomo AFCS Developper, et une connexion en tant qu’invité, ne nécessitant qu’un nom de participant.

Nous allons donc supprimer les attributs userName et password de l’AdobeHSAuthenticator, et ajouter un formulaire d’authentification à notre application. Ce formulaire permettra de choisir le type d’identification ( hôte ou invité ) :

?View Code MXML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<mx:Panel id="logPanel" >
   <mx:Form>
 
      <mx:FormItem label="Identifiant">
         <mx:TextInput id="chp_login" />
      </mx:FormItem>
 
      <mx:FormItem label="Se connecter en tant que :" direction="horizontal" >
 
         <mx:RadioButtonGroup id="userRole" />
 
         <mx:RadioButton id="isGuest" groupName="userRole"
            label="Invité" value="{UserRoles.VIEWER}"  selected="true"
         />
         <mx:RadioButton id="isOwner" groupName="userRole"
            label="Hôte" value="{UserRoles.OWNER}"
         />
      </mx:FormItem>
 
      <mx:FormItem label="Mot de passe"  enabled="{ userRole.selectedValue == UserRoles.OWNER }">
         <mx:TextInput id="chp_password" displayAsPassword="true"  />
      </mx:FormItem>
 
      <mx:FormItem >
         <mx:Button label="Entrer"
            click="login(chp_login.text , userRole.selectedValue == UserRoles.OWNER ? chp_password.text : null  )"
          />
      </mx:FormItem>
 
   </mx:Form>
</mx:Panel>

La définition des rôles des utilisateurs est basée sur des valeurs numériques, définies dans des constantes de la classe UserRoles.

Les principaux rôles sont Owner ( hôte / propriétaire du salon ), Publisher ( participant autorisé à publier sur un ou plusieurs pods ) et Viewer ( invité seulement autorisé à utiliser le tchat ). Normallement, les invités ne peuvent utiliser un salon que si l’hôte est présent. Il est possible de modifier la configuration initiale des salons ( droit de publication automatique, persistence des données, entrée libre… ), ainsi que les rôles et les droits des utilisateurs connectés, pour cela nous pourrons utiliser l’application CocomoDevConsole AFCSDevConsole ou l’API directement. Mais c’est déjà une autre histoire…

Pour le moment, nous allons permettre à l’utilisateur de s’identifier à l’aide du formulaire. Pour cela nous devons désactiver la connexion automatique du gestionnaire de session en déclarant sa propriété autoLogin= »false ».

Pour finir, nous allons ajouter une méthode login() qui sera chargée de renseigner le AdobeHSAuthenticator, et de lancer la connexion du gestionnaire de session :

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9

private function login ( login:String, password:String ):void
{
   identificator.userName = login;
   // si le mot de passe est renseigné : connexion en tant que hôte ,
   // sinon connexion en tant    qu'invité
   identificator.password = password ;
   // lance la connexion du gestionnaire de session
   sessionManager.login();
}

Nous allons ensuite rajouter un bouton et une fonction de déconnexion.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9

// deconnexion
// il semble qu'avec cette version (0.9), la plupart des pods, une fois déconnectés, ne peuvent être reconnectés.
private function logout():void
{
    sessionManager.logout();
 
    // close() est censé provoquer une déconnexion et la suppression de tous les noeuds enfants, mais ne semble pas encore marcher...
    //sessionManager.close();
}
?View Code MXML
1
2
3
4
5
6
7

<mx:VBox width="50%" height="100%" horizontalAlign="center" right="0">
    <mx:Button label="Déconnexion" click="logout()" />
 
    <rtc:FileShare id="fileManager" width="100%" height="50%" />
 
    <rtc:Note id="notes" width="100%" height="50%" />
</mx:VBox>

Dès que l’application sera connectée, nous supprimerons le formulaire, et en cas de déconnexion le gestionnaire de session sera supprimé :

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// à chaque évenement de synchronisation de la session
// connexion, deconnexion, changement d'état de salon, ...
private function onSynchro( e:SessionEvent ):void
{
    // une fois que l'application parvient à se connecter / synchroniser
 
    if ( sessionManager.isSynchronized && !isConnected )
    {
        Alert.show("Application connectée");
 
        isConnected = true ;
 
        removeChild( logPanel );
 
    } else if ( ! sessionManager.isSynchronized && isConnected ){
    // si la connexion est perdue
    isConnected = false ;
 
   /* supprime le container de session
   *  » il semble que dans cette version certains pods une fois déconnectés n'arrivent pas à se reconnecter.
   *
   *  » Pour se reconnecter, il faudra donc :
   *     - soit forcer le rechargement de la page
   *     - recréer dynamiquement le gestionnaire de sessionet ses pods
   */
   removeChild( sessionManager );
 
   // affichage d'un message de sortie de salon
   Alert.show( 'vous avez quitté la réunion, recharger la page pour entrer à nouveau');
   }
}

La gestion des déconnexions / reconnexions semblent pour le moment un peu instables. Mais bon on est prévenu, c’est une béta. Après quelques tests, je crois que le meilleur moyen de revenir dans un salon après s’être déconnecté, est de recharger la page.

Accéder aux sources complétes

Voilà la fin de ce premier exemple d’utilisation de cocomo AFCS , et il est bien entendu possible d’aller beaucoup plus loin. La prochaine fois nous nous intéresserons de plus près aux différents mécanismes articulés au sein de cocomo AFCS , et plus globalement à l’architecture du service. Nous utiliserons également la CocomoDevConsoleAFCSDevConsole et le LocalConnectionServer, les deux outils AIR proposés dans le SDK.

D’ici là bonne collaboration !!! :)

Bookmark and Share

Niveau : Intermédiaire
Objectif : Développer une première application Cocomo à l'aide des composants fournis dans le SDF
Logiciel : Flex Builder 3, Cocomo

Écrit le 18 déc 2008 par Erick Ghaumez
Posté dans Ressources Flex
Tags : , , , ,

 

Sur le même sujet
En direct du forum

21 réponses Souscrire aux commentaires


  1. Nigel Pegg

    Formidable – ceçi est peut-être le meilleur tuto de tous que j’ai lu pour se commencer avec Cocomo. J’aimerais bien un traduction en Anglais aussi! (pardonnez-moi pour ma grammaire affreuse; j’essaie quand-même … Et « claverdage » est mon nouveau mot favorit =).

    Merçi bien!
    nigel

    21 déc 2008 @ 4:15


  2. Erick Ghaumez

    merci Nigel,
    content de voir que çà intéresse quelqu’un,… et pas n’importe qui :p !
    En tout cas la suite arrive… ( r.CØ aussi ;) )
    Je pourrais essayer de faire une traduction après si tu veux.
    Stay tuned :)

    22 déc 2008 @ 17:13


  3. Julien

    Salut Erick,

    J’ai suivi ton (super) tutorial. Tout s’est bien passé (merci pour les étapes détailées). J’ai cependant du rajouter une ligne de code au script, pour que le programme fonctionne correctement, dans la section « Hello Cocomo » de ton tutorial :

    // état de la session
    private var isConnected:Boolean = false;
    private var isSessionOpen:Boolean;
    (cette dernière ligne)

    Sans cette ligne, il y a une erreur dans Flex Builder :
    1120: Access of undefined property isSessionOpen.

    Mille mercis pour le tutorial.

    A+
    Julien

    08 jan 2009 @ 21:36


  4. Erick Ghaumez

    Salut Vincent,

    en effet y avait un oubli dans le 1er code. Le code source final ne comporte pas l’erreur : la variable à modifier est isConnected et non pas isSessionOpen. Ce qui donne :

    public function onSynchro( e:SessionEvent ):void
    {
    if ( sessionManager.isSynchronized && ! isConnected )
    {
    Alert.show(« Application connectée »);
    isConnected = true ;
    }
    }

    C’est corrigé dans l’article aussi !
    Merci bien :)

    09 jan 2009 @ 22:43


  5. Flashpapa

    Super !
    Ben y a vraiment de quoi faire des trucs sympa !
    Petite question comment ça l’AIR de rien : avez vous vu des tutos sur le SharedProperty ou SharedCollection, non parce que la vidéo, le chat, upload de fichier c’est bien mais NOUS, on veut jouer !!!!
    En gros j’ai mon babyfoot muti-utilisateur qui tourne sur flash média serveur, alors… si ya moyen d’avoir l’équivalent des sharedObject sur cocomo !!!héhéhéhéh
    Bravo pour le tuto, ça donne faim !

    14 jan 2009 @ 17:04


  6. Lionceau

    Bonjour
    C’est la première fois que j’utilise flex et cocomo j’ai un problème lorsque je compile ceci :

    Flex Builder 3 me dis comme ereur :

    Could not resolve to a component implementation. lionceau01/main lionceau01.mxml line 11
    Could not resolve to a component implementation. lionceau01/main lionceau01.mxml line 6

    Merci pour votre soutient et votre aide,

    Lionceau,

    25 fév 2009 @ 23:57


  7. Lionceau

    le code n’apparait pas dans mon message mais le code est le premier code en haut de la page ,

    oû on voit ceci :

    xml version= »1.0″ encoding= »utf-8″
    mx:Application layout= »absolute »
    xmlns:mx= »http://www.adobe.com/2006/mxml »
    xmlns:rtc= »CocomoNameSpace »

    rtc:ConnectSessionContainer id= »sessionManager » width= »500″ height= »400″
    roomURL= »http://connectnow.acrobat.com/votreCompte/nomSalon »
    authenticator= »{identificator} »
    backgroundColor= »#FFFFFF »

    rtc:AdobeHSAuthenticator id= »identificator »
    userName= »votreLogin » password= »VotreMotDePasse »

    mx:Application

    26 fév 2009 @ 0:02


  8. Adobe Flex Tutorial

    Salut,
    j’ai aussi quelques articles sur mon blog à propos de Cocomo et un visiteur a soulevé un problème intéressant:
    http://www.flex-tutorial.fr/2008/11/27/adobe-cocomo-installer-le-sdk-adobe-cocomo/#comment-3620
    Depuis le passage de Cocomo en AFCS, il y a un nouveau SDK avec (surprise), un nouveau namespace. Voici donc la solution:
    http://www.flex-tutorial.fr/2008/11/27/adobe-cocomo-installer-le-sdk-adobe-cocomo/#comment-3635
    Il suffit de remplacer xmlns:rtc= »CocomoNameSpace » par xmlns:rtc= »AfcsNameSpace »

    Fabien
    http://www.flex-tutorial.fr/category/afcs/

    26 fév 2009 @ 0:24


  9. Lionceau

    Voir message comentaire de fnicollet à http://www.flex-tutorial.fr/2008/11/27/adobe-cocomo-installer-le-sdk-adobe-cocomo/#comment-3636

    donc c’est juste que Cocomo a changé de nom et s’appelle maintenant AFCS. Et ils ont changé les namespace, je n’avais pas réessayé les exemples depuis. Il faut donc que tu changes xmlns:rtc= »CocomoNameSpace » en xmlns:rtc= »AfcsNameSpace » et tes composants seront reconnus

    DONC , lol , je vous conseil de vous mettre aussi à jours ;)

    lionceau,

    26 fév 2009 @ 0:31


  10. maru

    Merci Lionceau et Fabien pour ces précisions
    Je vais voir avec Erick pour mettre à jour le tuto.

    26 fév 2009 @ 8:52


  11. Lionceau

    Pour le code qui est juste en desous de  » Nous reviendrons prochainement sur les différents aspects et acteurs en jeu lors de cette synchronisation. »

    J’ai ces ereurs :
    Pourquoi?

    Merci

    Lionceau,

    Erreur de syntaxe : rightbrace est attendu devant end of program. [Generated code (use -keep to save): Path: lionceau01-generated.as, Line: 316, Column: 1]

    Erreur de syntaxe : rightbrace est attendu devant end of program. [Generated code (use -keep to save): Path: lionceau01-generated.as, Line: 316, Column: 1

    Erreur de syntaxe : rightbrace est attendu devant end of program. [Generated code (use -keep to save): Path: lionceau01-generated.as, Line: 316, Column: 1]

    1094: Erreur de syntaxe : un littéral de chaîne doit être terminé avant le saut de ligne. lionceau01/main lionceau01.mxml line 34

    1094: Erreur de syntaxe : un littéral de chaîne doit être terminé avant le saut de ligne. lionceau01/main lionceau01.mxml line 42

    1084: Erreur de syntaxe : rightparen est attendu devant identification. lionceau01/main lionceau01.mxml line 42

    26 fév 2009 @ 16:20


  12. Adobe Flex Tutorial

    J’ai résolu ce problème toujours sur cette page:
    http://www.flex-tutorial.fr/2008/11/27/adobe-cocomo-installer-le-sdk-adobe-cocomo/#comment-3639.
    En fait, il y a un problème de quotes dans le message Alert qui fait que la compilation ne peut pas se faire. Pour le corriger, il faut remplacer par
    authenticationFailure= »Alert.show(‘erreur d\’identification’) »

    26 fév 2009 @ 16:28


  13. Lionceau

    Bonjour ,
    J’ai cherché sur le net et je n’ai pas trop trouvé le rtc pour le share screen , quelqu’un pourais me le donner?
    Merci

    (par ex pour mettre la camera on met la ligne : «  »
    Moi je cherche coment faire pour partager l’écran alors si quelqu’un à une info,
    ca serait sympas , merci )

    Lionceau,

    27 fév 2009 @ 19:22


  14. Lionceau

    la ligne : rtc:WebCamera id= »webcam » width= »100% » height= »80% » /

    Lionceau,

    ps : c ‘est vraiment embétant que le forum ne prenne pas tout les caractères

    27 fév 2009 @ 19:26


  15. Lionceau

    et pareil mais pour gérer le son , quelqu’un aurait une idée ?
    Merci.

    Lionceau,

    27 fév 2009 @ 19:36


  16. lionceau

    un conseil pour les developeurs de cocomo ,

    ya un tat d’exemple dans le dossier SDK, le dossier « example  »

    Lionceau,

    03 mar 2009 @ 13:34


  17. Erick Ghaumez

    « et ouai, et ouai », comme dirait la marionnette, c’est vrai depuis la mise à jour 0.9.1, y a eu du changement. Merci de vos remarques, la faute est maintenant réparée.
    En effet il fallait bien remplacer TrucsSpace par TrucsSpace2, et pis après çà roule…

    @ lionceau : Mieux vaut tard que jamais alors concernant tes questions sans réponses apparentes :

    - le partage d’écran n’est pas encore dispo dans la version 0.9.1… des traces existent à divers endroits du code… laissant présager… alors présageons patiemment !

    - pour le son, il faut utiliser les compos AudioPublisher et AudioSuscriber

    - « et ouai, et ouai », y a des exemples dans le dossier /examples/

    06 mar 2009 @ 0:52


  18. Benoit

    Merci un milliard de fois. Je poste un commentaire ici mais je vais lire toute la série d’articles, que je trouve remarquable. Je débarque dans le développement avec le fabuleux Flex, et ce sont des gens comme vous qui font que c’est un réel plaisir de développer avec cette plateforme. Merci encore, j’espère que vous n’allez pas arrêter de si tôt d’écrire des billets de cette trempe.

    20 mar 2009 @ 17:39


  19. Erick Ghaumez

    je vais rougir… ;)
    merci, çà fait plaisir. Et çà motive !!!
    à bientôt pour la suite alors ( çà va arriver très vite du coup ;) )

    20 mar 2009 @ 19:22


  20. florian

    Bonjour, j’ai des bugs avec
    pour partager fichiers pouvez-vous m’aider?
    je sais pas comment faire, ni comment trouver des exemples qui pourrait m’aider ..

    merci beaucoup pour votre aide.

    lionceau,

    24 juin 2009 @ 14:23


  21. La Fabrick interactive» Blog Archive » Hello AFCS ( bye Cocomo ) ! Simple user authentication with Adobe Flash Collaboration Services

    [...] from French tutorial on FlashXPress [...]

    17 juil 2010 @ 15:26

Répondre