[Cordova] Problème connexion à constellation

Bonjour,

Nous avons un problème lorsque nous essayons d’insérer notre application web à un projet Cordova.

Mon appli se connecte à Constellation, récupère des stateObjects et envoie des message Callbacks. Il s’agit de l’application JS que nous avions créée lors du dernier cours.

Où faut-il inclure le code js de notre appli dans l’index.js de Cordova ?
Nous pensons que notre problème vient de là, puisque nous arrivons à installer puis lancer l’application Androïd mais que celle-ci ne se connecte pas au serveur Constellation.

Bonjour,

J’ai le même problème, la version web fonctionne bien mais dès que je créé une app avec Cordova, il arrive pas à récupéré les SO.

Hello,

Les prochaines docs seront consacrées aux API JS & Angular et Cordova/Ionic.

En attendant, sur une app Cordova, dans l’index.html il faut d’abord référencer les JS de jQurey, SignalR et Constellation. En gros ca donne :

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.signalR-2.2.0.min.js"></script>
<script type="text/javascript" src="js/Constellation-1.8.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>

Ensuite dans la fonction “onDeviceReady” (index.js) il faut créer le client Constellation.

Par exemple, connectons-nous à Constellation et abonnons-nous aux SO du package HWMonitor pour afficher en temps réel dans notre application Cordova la consommmation CPU de la machone “MON-PC” :

onDeviceReady: function() { 
   var constellation = $.signalR.createConstellationConsumer("http://monServerConstellation", "AccessKey", "MonFriendlyNameDeMonAppCordova");
   constellation.client.onUpdateStateObject(function (stateobject) {
      if (stateobject.Name == "/intelcpu/load/0") {
         $("#cpu").text(stateobject.Value.Value);
      }
   });	
   constellation.connection.stateChanged(function (change) {
      if (change.newState === $.signalR.connectionState.connected) {
         constellation.server.requestSubscribeStateObjects("MON-PC", "HWMonitor", "*", "*");
      }
   });	
   constellation.connection.start();
}

A+

J’ai modifié comme tu as marqué (sauf pour index.js que j’ai du mettre sous la forme :

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        var parentElement = document.getElementById('deviceready');
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        var constellation = $.signalR.createConstellationConsumer("http://url:8088", "api_key", "MonFriendlyNameDeMonAppCordova");
        constellation.client.onUpdateStateObject(function (stateobject) {
            if (stateobject.Name == "/intelcpu/load/0") {
                $("#cpu").text(stateobject.Value.Value);
            }
        });	
        constellation.connection.stateChanged(function (change) {
            if (change.newState === $.signalR.connectionState.connected) {
                constellation.server.requestSubscribeStateObjects("*", "HWMonitor", "*", "*");
            }
        });	
        constellation.connection.start();

    };

J’ai enlevé cette ligne dans index.html sinon j’avais une erreur :

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Par contre j’ai toujours une erreur :

Failed to load resource: the server responded with a status of 400 (Bad Request)
xhr_proxy (0,0)

Une idée du problème ? Je n’ai rien dans la console Constellation.

Dans le fichier “config.xml” tu as bien

<access origin="*" />

?

Tu testes depuis un device Android ou l’emulateur ?

Autrement, ton message d’erreur tu l’obtiens à quel moment ? Ajoutes des console.log à différents endroits (au onDeviceReady, apres la création du client, apres le start de la connexion, au connectionChanged, etc…) pour retracer le déroulement !

Alors pour le moment sur l’émulateur.

Voici le code :

    function onDeviceReady() {

        console.log('test');
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        var parentElement = document.getElementById('deviceready');
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        var constellation = $.signalR.createConstellationConsumer("http://url:8088", "key", "Furya");
        constellation.client.onUpdateStateObject(function (stateobject) {
            console.log('test_1');
            if (stateobject.Name == "/intelcpu/load/0") {
                $("#cpu").text(stateobject.Value.Value);
            }
        });
        console.log('test_2');
        constellation.connection.stateChanged(function (change) {
            console.log('test_3');
            if (change.newState === $.signalR.connectionState.connected) {
                console.log('test_4');
                constellation.server.requestSubscribeStateObjects("*", "HWMonitor", "*", "*");
            }
        });	
        constellation.connection.start();
        console.log('test_5');
    };

Et le résultat :

https://s31.postimg.org/l7tgne37f/Sans_titre.jpg

Par contre il me parle de ripple.js comme quoi il le trouve pas. D’ailleurs quand je mets ma souris sur xhr_proxy :

https://s31.postimg.org/9ucwbswt7/Sans_titre.png

Oui en cherchant ton message d’erreur sur Google j’étais tombé la dessus : http://stackoverflow.com/questions/32753584/ripple-emulator-and-vs2015-400-error-at-login-all-of-a-sudden

Tu utilises l’emulateur de VS ou depuis d’Android ? Perso, je ne test qu’avec celui du SDK Android, pas testé depuis intégré dans VS.

Car visiblement il s’agit en effet d’un prb d’emulateur.

J’ai créé l’apk et installé sur mon téléphone mais ça ne semble pas fonctionner.

Faudrait que je test en debug sur le téléphone.

Prends garde, j’ai écris le code dans mon message ci-dessus “à l’aveugle” ==> le nom du SO pour le CPU n’est pas “/intelcpu/load/0” mais “/intelcpu/0/load/0” !

Comme j’ai vu que tu as copié/collé ce code, ton APK ne va pas marcher :wink:

J’ai effectué les mêmes manœuvres qu’Hydro en apportant les corrections que vous conseillez mais je me retrouve avec le même problème au niveau du ripple.js selon l’emulateur.

J’ai donc essayé de lancer l’apk sur mon android en mode debug USB. J’obtiens alors le résultat suivant dans lequel aucune erreur apparaît. Mais l’appli n’est toujours pas connectée au serveur alors que j’arrive à m’y connecter depuis mon navigateur sur android.

Probleme Cordova Android

Voilà la capture d’écran pour le debug USB via chrome :
http://www.hostingpics.net/viewer.php?id=158734ProbleCordovaAndroid.png

Perso c’est ok de mon côté j’ai bien les valeurs du CPU en temps réel !

Tu as essayé à partir d’un projet vierge ? Tu peux copier les bouts de ton code ?

Je suis bien parti d’un projet Cordova vierge (généré par VS2015)

Voici le code pour l’index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <!--
        Personnalisez la stratégie de sécurité de contenu dans la balise meta ci-dessous selon vos besoins. Ajoutez 'unsafe-inline' à default-src pour activer JavaScript directement dans les lignes.
        Pour obtenir des détails, consultez http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
        
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Push push</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="app">
            <p id="deviceready" class="event">Connecting to Device</p>
        </div>

        <h1>Hello Constellation</h1>

        <span id="state">Non connecte</span>

        <p>CPU = <span id="cpu"> 0 </span>%</p>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.signalR-2.2.0.min.js"></script>
        <script type="text/javascript" src="scripts/Constellation-1.8.0.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>
</html> 

Et voilà celui de l’index.js

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Gérer les événements de suspension et de reprise Cordova
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        
        // TODO: Cordova a été chargé. Effectuez l'initialisation qui nécessite Cordova ici.
        var element = document.getElementById("deviceready");
        element.innerHTML = 'Device Ready';
        element.className += ' ready';

        var constellation = $.signalR.createConstellationConsumer("http://ISENMIC-0NJ2PQV:8088", "0fdb5cd27d724996b7dfe3268baa6c7105e23f51", "TestCordovaConstellation");
        constellation.client.onUpdateStateObject(function (stateobject) {
            console.log('test_1');
            if (stateobject.Name == "/intelcpu/0/load/0") {
                $("#cpu").text(stateobject.Value.Value);
            }
        });
        console.log('test_2');
        constellation.connection.stateChanged(function (change) {
            console.log('test_3');
            if (change.newState === $.signalR.connectionState.connected) {
                console.log('test_4');
                constellation.server.requestSubscribeStateObjects("VINCENTR", "HWMonitor", "*", "*");
            }
        });
        constellation.connection.start();
        console.log('test_5');
    };

    function onPause() {
        // TODO: cette application a été suspendue. Enregistrez l'état de l'application ici.
    };

    function onResume() {
        // TODO: cette application a été réactivée. Restaurez l'état de l'application ici.
    };
} )();

Alors je sais pas si ça change quelque chose mais les script je les ai appelé dans la balise head.

Vincent, ton appli est bien connectée au serveur Constellation, dans ta screenshot on voit un “test_4” dans la console de debug ce qui sous entend que tu passes bien dans le stateChanged en état “connectionState.connected” !

Par contre pas de mise à jour de SO car visiblement pas de “test_1” ! Es-tu sur de l’abonnement ?

Mon application fonctionne maintenant, a priori le problème venait de mon serveur (trop long à ce connecter).
De plus, comme vous le disiez, il y avait l’abonnement au SO qui posait problème : le nom n’était pas celui de la bonne sentinelle.

Merci pour votre aide.

Sebastien tu aurais un exemple pour la connexion à Constellation avec Angular ?