Dojo + WCF [1ere Partie]

Publié par Fabrice Michellonet sous le(s) label(s) , le 8 avril 2009

Voila déjà plusieurs mois, j’avais une discussion sur les architectures SOA avec Christophe et surtout comment les mettre en œuvre avec les Framework (Ajax) Javascript. A l’époque il démarrait une refonte de sa galerie de photos perso LCCFamilly et souhaitait qu’elle soit Full Ajax.

Sur ce même principe, je me propose aujourd’hui de vous montrer comment interroger un WebService WCF à partir du Framework Dojo ; Faisons un service qui nous donne l’heure et la date courante formatée selon la locale du serveur. On commence par déclarer l’interface de notre service.


[ServiceContract(Namespace="http://www.devolis.com/2009/04/WCFDOJO")]
    public interface IClockService
    {
        [OperationContract]
        [WebInvoke(Method = "POST")]
        string GetTime();
    }

Notez l’utilisation du verbe POST ; Il convient d’éviter le verbe GET comme la peste si vous utilisez Internet Explorer comme client de votre WebService. En effet, sa gestion du cache, fait qu’il n’effectue que le premier appel, puis se contente de renvoyer ce qu’il a en cache.

Puis passons à l’implémentation à proprement dit du service


/// AspNetCompatibilityRequirements n'est utile que si le webservice est hosté dans IIS
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ClockService : IClockService
    { 
        public string GetTime()
        {
            return DateTime.Now.ToString();
        }
    }

Ok, a ce moment précis, il vous est déjà possible de tester le WebService en créant rapidement un projet console et en ajoutant une WebReference sur ce dernier... Je vous laisse le faire de votre coté :)

Passons à notre page web :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Dojo & WCF</title>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.0/dojo/dojo.xd.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
        dojo.require('dojo.parser');
    </script>
    
    <script type="text/javascript">

        function GetTime() {
            dojo.xhrPost({
                url: "ClockService.svc/GetTime",
                handleAs: "text",
                contentType: "application/json; charset=utf-8",
                load: function(response, ioArgs) {
                    dojo.byId('ServerTime').innerHTML = dojo.fromJson(response).d;
                    return response;
                },
                error: function(response, ioArgs) {
                    alert("Error :" + ioArgs.xhr.status);
                    return response;
                }
            });
        }
        
    </script>
</head>
<body onload="GetTime();">
    <input type="button" value="Time?"  onclick="GetTime();" ///>
    <div id="ServerTime"></div>
</body>
</html>

Comme vous pouvez le constater, le code est assez concis. Apres avoir déclaré l’utilisation de Dojo 1.3 à partir du CDN de Google, j’ai déclaré une fonction GetTime() qui par le biais d’un XmlHttpRequest (xhr) va demander au WebService de lui retourner le DateTime actuel ; les données sont attendues sous forme de JSon.

Vous remarquerez aussi la construction de l’url d’appel, il s’agit du nom du Service suivit par le nom de la méthode.

Si vous exécutez maintenant la page web, vous recevrez une erreur http 405. En effet pour l’instant Dojo et WCF ne parlent pas encore la même langue. Dojo parle en JSon et WCF en Soap... il va nous falloir configurer le service.

Voici la globalité du ServiceModel que vous trouverez dans votre web.config ou app.config en fonction du type de projet choisit.


<system.serviceModel>
    
    <behaviors>
      <serviceBehaviors>
        <behavior name="MetaDataBehavior" >
          <serviceMetadata httpGetEnabled="true" />
        </behavior>
      </serviceBehaviors>
      
      <endpointBehaviors>
        <behavior name="ClockServiceBehavior">
          <enableWebScript/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
        
    <services>
      <service name="WCF_TEST.ClockService" behaviorConfiguration="MetaDataBehavior">
        <endpoint address="" 
                  behaviorConfiguration="ClockServiceBehavior" 
                  binding="webHttpBinding" 
                  name="ClockService" 
                  contract="WCF_TEST.IClockService"/>
      </service>
    </services>
    
  </system.serviceModel>

La principale différence avec la configuration standard est au niveau du binding du endpoint. Par défaut le binding est définit en tant que wsHttpBinding (messages soap) ; Pour parler Json il nous faut choisir le binding webHttpBinding (JSon).

Voila, relancez la page web… tadam… c’est magique.

Dans la prochaine partie de cet article je tacherais de vous montrer comment éviter d’avoir à écrire les blocs de javascript xhrPost en passant par dojo.rpc

Christophe, t’as plus qu’a réécrire LCCFamily :)

1 commentaire(s)
top

1 commentaires:

christophe a dit… @ 9 avril 2009 à 09:58

je propose que fab se lance dans la fonte de sa propre galerie photo et teste la mise en place de la techno (bon courage)

Tof

Enregistrer un commentaire