CODEWITHSUNDEEP
angularjswebsocketatmosphere
Desmond
Desmond

Reputation: 1736

Atmosphere and Angular JS how to

I'm an atmosphere & Angular newbie and I'm really struggling to find an answer to this! Maybe I'm asking the wrong question.

I am setting up notifications using Atmosphere. I can open the websocket and watch the updates happen if I post the API URL directly into my browser.

In Angular I have an ng-repeat loop, which I would like to run as each new update adds a new object to the websocket.

<li ng-repeat="notification in notifications track by $index">

I am using angular watch to check for updates, but it doesn't pick up the new objects being added to the array. Here is my code:

// notification alerts
$scope.notifications = [];

notificationsService.notificationAlerts().then(function success(response) {                
    var jsonStringArray = response.data.split('|');
    $scope.notifications = $.map(jsonStringArray, function(n, i){
        if (n !== ""){
            return JSON.parse(n);
        }
    });
    console.log('Connect', response);               
});

$scope.$watch('notifications', function(newVal, oldVal){
    console.log('Watch', $scope.notifications);
}, true);

Hopefully I've made myself clear, let me know if I need to elaborate, or if I'm asking the wrong question. Thanks!

Upvotes: 0

Views: 1440

Answers (1)

Desmond
Desmond

Reputation: 1736

OK, I managed to solve this, for anyone stumbling across it later. Here is the final JS:

// add number of notifications to ".notifications-number"
function updateNumberOfNotifications(){
    var numberOfNotifications = $("ul.notifications-list li").not(".nocount").length;
    if (numberOfNotifications < 1) {
        $(".notifications-number, .notifications-list").addClass("hidden");
    } else {
        $(".notifications-number").html(numberOfNotifications);
        $(".notifications-number, .notifications-list").removeClass("hidden");
    }                
}            

// notification alert variables
$scope.notifications = [];
var socket = atmosphere;
var subSocket;

// subscribe
function subscribe() {
    var request = {
        url : "/service/notifier",
        transport: 'long-polling'
    };

    request.onMessage = function (response) {
        //console.log('response', response);
        var jsonStringArray = response.responseBody.split('|');
        // console.log('json string array', jsonStringArray);
        $.each(jsonStringArray, function(index, elem){
            if (elem != ""){
                $scope.notifications.push(JSON.parse(elem));
                console.log("object", JSON.parse(elem));
            }                        
        });
        //$scope.notifications.push($scope.newNotification);
        $scope.$apply();                  

        updateNumberOfNotifications();          

        // console.log('$scope.notifications', $scope.notifications);             
    };

    subSocket = socket.subscribe(request);
}

function unsubscribe(){
    socket.unsubscribe();
}

// subscribe on load and update notifications
updateNumberOfNotifications();
subscribe();

Upvotes: 1

Related Questions