4

I don't even know how to explain this directly, but I'll try.

Intro

I'm building a Phonegap App with angularjs, and I'm trying to stitch up WebSocket messages to update my UI. I used to have services that communicate with the server periodically and change their data accordingly and it was working pretty well. An example:

Service1.js:

     var applyUpdate = function (
         angular.extend(instance, data);
         if (!$rootScope.$$phase) $rootScope.$apply();
     };

     this.update = function () {
         DataProvider.get('getThermostatSettings', {}, applyUpdate, function(){}, true);
     }

So basically I was simply calling the "update" function every 5 seconds, receiving data from the server and updating this service. The controllers would then simply access this service, and everything was working.

The problem

The problem now, is that I stitched up a WebSocket Interface written in java, that handles all the websocket implementation for me. I took it from: https://github.com/ziadloo/PhoneGap-Java-WebSocket . It basically registers an Javascript Interface accessible from Javascript to communicate with java.

Everytime I have a change now, I simply push a string from the server via the WebSocket saying that it should update, and then I call the "update" function from the service in my javascript, instead of querying for data periodically, which is just stupid.

The WebSockets are working well. I can see the message coming, I call the update, it fetches everything correctly from the server, the "update" function calls then the "applyUpdate" with the correct values and etc, even the "$rootScope.$apply" gets called.

But all updated data inside the angular Service is not visible! It seems that all these changes are being run in a different thread!?!?. I know javascript is single threaded, but it just seems so.

Let me put this in a better way: I have the impression that as soon as the WebView calls the javascript callback function, I have a different javascript "thread" running, and nothing outside it can be accessed

More about it

I wrote a function that simply outputs a number every 5 seconds. The websocket updates this number. And my output is the following:

N: 1
N: 1

Then after the WebSocket pushes the data with a new Number (2), I get TWO prints:

N: 1
N: 2

N: 1
N: 2

N: 1
N: 2

Anyone has any pointers about this? Anyone tried doing something similar? I'm no angular pro, but it just seems that everything gets messed up as soon as I get a callback from the java interface.

I have already looked at: Angularjs model changes after websocket data push from server and my code looks very similar. The only problem I think is this callback from Java.

Thank you

Update : It's a problem with AngularJS. If I set this variable in a window global variable, everything get's assigned normally. Is it possible that Angular is somehow creating two different $scopes?

Update[2]: Just to be a bit more clear: In the browser, everything works as expected. Only when I run it in the emulator that this thing gets messed up.

Community
  • 1
  • 1
José Leal
  • 7,989
  • 9
  • 35
  • 54
  • Are you serving js application and java api from the same domain? – Dmitry Evseev Mar 22 '13 at 17:14
  • The javascript makes some cross-domain requests, but they all work, including the WebSocket. See please my update. It seems that angular is creating two scopes somehow. If I set this variable in a global namespace everything works out. – José Leal Mar 22 '13 at 17:17
  • Ok then where do you define `instance` and `data` used in `applyUpdate`. `Data` is obviously returned from websocket, and what's `instanse`? – Dmitry Evseev Mar 22 '13 at 19:02
  • `var instance = this;` on the very beginning of the Angular Service. That's basically `this`. There values are being set. I've put already a log after this line to check if the values are being set correctly, and they are. – José Leal Mar 22 '13 at 19:16
  • Just to be a bit more clear: In the browser, everything works as expected. Only when I run it in the emulator that this thing gets messed up. – José Leal Mar 22 '13 at 19:17
  • Hey guys, I'm new to both phonegap and angularjs, I've [tried](http://briantford.com/blog/angular-phonegap.html) these [tutorials](http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs) but none seemed to work (they worked on Xcode/ios but not android).. can anyone point me to a repo that has a complete project of angularjs/phonegap on android? thx! – abbood Jun 14 '13 at 12:39

1 Answers1

2

It's entirely possible for Angular.js to be making two $scopes. Just see the debugging in this screencast.

It may help to show all the $scopes on the page.

You should also be aware that websockets on mobile aren't the best idea. Crashes and failures seem to be pretty probable, based on that talk (by a Nodejitsu employee with expertise in websockets).

Community
  • 1
  • 1
Paddy
  • 2,793
  • 1
  • 22
  • 27