Angularjs Android Phone Using Web Sockets

I don’t even know how to explain this directly, but I will try.

Introduction

I am building a Phonegap application with angularjs and I am trying to sew WebSocket messages to update my interface. I used to have services that periodically exchanged data with the server and accordingly changed their data, and it worked very well. 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 just called the “update” function every 5 seconds, getting data from the server and updating this service. Then the controllers would simply call this service, and everything worked.

Problem

Now the problem is that I have built a WebSocket interface written in java that handles the entire websocket implementation for me. I took it from: https://github.com/ziadloo/PhoneGap-Java-WebSocket . It basically registers the Javascript interface available from Javascript to communicate with java.

Every time I have a change, I simply push a line from the server via WebSocket, saying that it should be updated, and then I call the "update" function from the service in my javascript instead of periodically requesting data, which is just plain stupid.

WebSockets work well. I see a message, I call the update, it retrieves everything correctly from the server, the update function calls applyUpdate with the correct values, etc. It even calls $ rootScope. $ Apply.

But all updated data inside the angular service is not displayed! It seems that all these changes are being done in another thread!?!? . I know javascript is single-threaded, but it seems like it is.

Let me say it better: I got the impression that as soon as the WebView calls the javascript callback function, I have another javascript javascript stream and nothing outside of it can be accessed

More on this

I wrote a function that simply displays a number every 5 seconds . The website updates this number. And my conclusion is as follows:

 N: 1 N: 1 

Then, after WebSocket pushes the data with the new number (2), I get two prints:

 N: 1 N: 2 N: 1 N: 2 N: 1 N: 2 

Does everyone have any pointers to this? Has anyone tried to do something like this? I'm not angular pro, but it seems like everything gets messed up as soon as I get the callback from the Java interface.

I already looked at: Angularjs model changes after the website data is pushed from the server and my code looks very similar. The only problem, I think, is the callback from Java.

thanks

Update . This is a problem with AngularJS. If I set this variable to a global window variable, everything will be assigned normally. Is it possible that angular somehow creates two different $ -regions?

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

+4
source share
1 answer

For Angular.js, it is entirely possible to make two $ -regions. Just review the debugging of this screencast .

This can help show all areas of $ on the page .

You should also be aware that websites on mobile devices are not a good idea . Crashes and crashes seem pretty likely based on this conversation (Nodejitsu employee with experience in websockets).

+2
source

All Articles