Angularjs Phonegap Android using Websockets

Question

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.

Are you serving js application and java api from the same domain? — Dmytro Evseev
– Dmytro Evseev, Commented Mar 22, 2013 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
– José Leal, Commented Mar 22, 2013 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? — Dmytro Evseev
– Dmytro Evseev, Commented Mar 22, 2013 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
– José Leal, Commented Mar 22, 2013 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
– José Leal, Commented Mar 22, 2013 at 19:17

Community · Accepted Answer · 2017-05-23 10:32:10Z

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).

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Apr 1, 2013 at 2:50

Paddy

2,8731 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs Phonegap Android using Websockets

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related