PubNub AngularJS service fires repeatedly - angularjs

I have the following event listener in my AngularJS Controller (as shown in the PubNub SDK docs) that fires multiple times on one message if the browser is refreshed after the message comes in.
But the data is empty after the original call to Pubnub.getMessageEventNameFor() so besides for just checking data (which seems like a hack covering up another issue), how/why is this function being repeatedly called?
$scope.$on(Pubnub.getMessageEventNameFor($scope.myChannel), function(ngEvent, data) {
$scope.$apply(function() {
processMessage(data.message);
});
});
Is there a way to prevent this listener from firing multiple times?
UPDATE: The multiple fires are each associated with a previous message, as opposed to multiple firings of the same message. This is sounding more and more like an Pubnub AngularJS SDK issue.

Related

Cordova resume application and angular $apply() on PhoneGap app

I have Cordova/Ionic/AngularJS application I am currently testing using the PhoneGap app on iOS. This application uses WebSockets to receive external inbound messages. An Angular service function pushes the new messages in an array and binds the array to a scope. I then use $rootScope.$apply() to propagate the change to my view that displays this array of messages.
Everything works fine except when I pause and resume the application. In that case, any new incoming message is indeed correctly stored in the messages array however the view is not updated as I would expect from $apply(). Leaving the view and returning to it fixes the problem. It's as if reloading the view's controller and calling the service resets something.

Killing Previous Route's Controller On Next Route

I'm having an issue in my Angular app where if I arrive at one controller view which makes an $http.get() asynchonous call and navigate away to a different controller view before the promise can resolve then I effectively end up having functions from one controller executing while on a completely different controller.
For example if the first page does an $http.get() and then calls $window.location = data.goToUrl in the .success() function. Then if I open that first page, and navigate away before the .success() fires then when I arrive on the completely different page I was navigating to then when the first page's .success() method eventually fires off I will be navigated away from the new page which should never be navigating me anywhere normally.
How can I either cancel all promises or kill all asynchronous functions of a controller when I leave that controller to make sure it doesn't affect the next view? Or is there a better way of handling this issue?
No, you can't cancel requests which are already started. You should find another way to solve the problem, for example you can disable the button which is handling route by using ng-disable until your promise is rejected or resolved.

Why is my UI updated only once?

I have done a simple SPA with AngularJS/signalR that send a notification to my hub Hello when the app starts.
On the client side I have list of notifications managed by a controller. This list got updated only once whereas I have been able to see that my callback is called every time thanks to the console.log (and the debugger shows that this.messages grows at every notification received).
I don't get why the UI only update on first call (which the one the current client have emittted)
Here is the code that work only once.
NotificationCtrl.prototype.hello = function() {
console.log("hello");
this.messages.push(new Notification("Tom", "Now", "Is now connected"));
}
You need to $scope.$apply because the callback is not scope aware since its not called from angular.
I think you would benefit alot from my library called SignalR.EventAggregatorProxy
Its designed around the Event aggregation pattern and is perfect for MV* enabled sites with Knockout or Angular.
Have a look at the wiki for setting it up
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki
Demo project
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4
Recent blog post I did about it
http://andersmalmgren.com/2014/05/27/client-server-event-aggregation-with-signalr/
Install using nuget
Install-Package SignalR.EventAggregatorProxy

AngularJS $http not sending GET request

In an Angular JS app I'm working on, I am using a service to periodically (in a $timeout) make a GET request to a URL in my API (both the Angular app and the API are being served from port 5000 on localhost).
For some reason, it appears that $http is not actually sending the GET. For each $http.get(), the .error() is called with empty data and a status of 0. When I check in my server log (I'm running a Ruby on Rails backend with the Unicorn gem for my server), it appears that the server never receives the request from Angular.
Here's the function in my service:
updateUserStatus = () ->
$http.get('/api/v1/status').success (statusData) ->
# update the variable and notify the observers
this.userStatus = statusData
notifyObservers()
startStatusTimeout()
.error (error, status) ->
# if there's an error, log it
console.log 'error:'
console.log error
console.log status
startStatusTimeout()
What's really odd is that it only happens sometimes. When it stops working, I can change the URL in the $http.get() to '/api/v1/status.json', and it works. For a while. Then I switch it back and it works again, for a while... obviously there is some greater issue at play.
I've been racking my brain for a few days now, and I've seen a bunch of similar issues on SO, but they all seem to be solved with implementing CORS in Angular, which I don't think is applicable to my situation because it's all coming from localhost:5000. Am I wrong? What's going on?
For reference, I'm using Angular version 1.0.7.
I had the same problem.
Check your code to see whether this happens after events that are fired from the DOM and are unknown to Angular.
If so, you need to add $scope.$apply(); after the get request in order to make it happen.
I'm fairly new to Angular so I'm not sure this is the best practice for using Angular, but it did work in my case.
See this similar question for a better explanation.

Does angularjs have something similar to jQuery's ajaxSetup?

I've browsed through the documentation but couldn't find anything mentioning this. I'm using Angular's $http service and want to run code before every ajax event, and after every ajax event (to display a loading message while waiting for the server to respond).
I have jQuery included and tried doing:
$(document).ready(function() {
$('body').ajaxSend(function(event, jqXHR) {
console.log('in jquery send');
}) ;
});
But couldn't get the message logged to the console. Any help is appreciated.
Please check out the docs on $http service: http://docs.angularjs.org/api/ng.$http
You will see that there are two options that you can use:
httpInterceptor (see Response interceptors section in the docs) - it allows you to wrap every response and do whatever you want before it completes the request. It uses promises so it's really easy to even do some async stuff after each request.
request/response transformations (see Transforming Requests and Responses) - it allows you to process every request and response that goes through $http - so that would be my choice as it allows you to hook before and after the request.

Resources