CODEWITHSUNDEEP
javascriptnode.jsangularjsflashsockets
ewizard
ewizard

Reputation: 2862

receive data from flash and display on angularJS client side

I am trying to get data (a user's score), from an extremely simple flash game I made, to be displayed on a simple leader board which is displayed through AngularJS. You can get a copy of all of the code here (you might need to run npm install to get it to work). I am using NodeJS/Express/Socket.io to transfer the data from the game.

Here is the code from app.js (server side):

var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server);

app.configure(function() {
    app.use(express.static(__dirname + '/public'));
    app.set('views', __dirname + '/views');
});

io.configure(function() {
  io.set('transports', ['websocket','xhr-polling']);
  io.set('flash policy port', 10843);
});

var contestants = [];

io.sockets.on('connection', function(socket) {

    socket.on('data', function (data) {
        socket.broadcast.emit(data);
    });

    socket.on('listContestants', function(data) {
    socket.emit('onContestantsListed', contestants);
    });

    socket.on('createContestant', function(data) {
    contestants.push(data);
    socket.broadcast.emit('onContestantCreated', data);
    });

    socket.on('updateContestant', function(data){
    contestants.forEach(function(person){
      if (person.id === data.id) {
        person.display_name = data.display_name;
        person.score = data.score;
      }
    });
    socket.broadcast.emit('onContestantUpdated', data);
    });

    socket.on('deleteContestant', function(data){
    contestants = contestants.filter(function(person) {
      return person.id !== data.id;
    });
    socket.broadcast.emit('onContestantDeleted', data);
    });
});

server.listen(8000);

The key lines from above are:

socket.on('data', function (data) {
    socket.broadcast.emit(data);
});

That is where I am trying to send the data from the server side to the client side. On the client side - from within my main controller, I have this.

leader-board.js (main client side javascript file):

socket.on('data', function(data) {
    $scope.score.push(data);
})

    // Outgoing
$scope.createContestant = function() {

    $scope.$digest;

    console.log($scope.score[0]);

    var contestant = {
        id: new Date().getTime(),
        display_name: "Bob",
        score: Number($scope.score[0])
    };

    $scope.contestants.push(contestant);
    socket.emit('createContestant', contestant);

    _resetFormValidation();
};

As you can see - I am trying to get the emitted data, and push it to an array where I will keep the scores. The createContestant function gets called when the user clicks a submit button from within the main index.html file.

index.html

<body>

...

<button ng-click="createContestant()" class="btn btn-success" 
        ng-disabled="
            ldrbd.contestantName.$error.required || 
            ldrbd.contestantScore.$error.required
        "
>
    Submit Score
</button>

...

</body>

The line console.log($scope.score[0]);, from within the createContestant function, is always undefined. I am not sure if I am emitting the data correctly from the server side with socket.io - and I am not sure if I am receiving it correctly either. I use $scope.$digest to refresh the scope because the socket.io stuff is outside of AngularJS (or so I have read). Any help would be greatly appreciated. Again - I am trying to store data emitted from a flash game into an array, however - before the data is stored, it needs to be fetched correctly - and my fetch always turns up undefined, when it should be retrieving a number which is being emitted from the game (I know that I am emitting the number from the game because I have tested it with log messages). Thanks!

UPDATE

Changed server side code to this:

socket.on('message', function (data) {
    console.log(data)
    score = data;
    socket.emit('score', score);
})

...and client side to this:

socket.on('score', function(data) {
    console.log(data);
    $scope.score = data;
});

Still no luck - but I added the console.log message to the server side to confirm that the data was getting sent and received (at least by node) and it is - the output of that message is a number which is the score. The thing I am realizing is...the score is supposed to be input on the client side when the button is clicked. But the data gets emitted from the server side when the game is over...so when the button is clicked...is the data available to the client side in that moment? Is this the discrepancy?

Upvotes: 0

Views: 428

Answers (1)

ewizard
ewizard

Reputation: 2862

Here is the working socket code (took me a while but I got it)!

Server side (Node/Express):

socket.on('message', function (data) {
    console.log(data);
    score = data;
    console.log("Transfered:" + " " + score);
    //
})

socket.on('score', function() {
    socket.emit('sendscore', score);
})

Client side (AngularJS)

socket.on('sendscore', function(data) {
    console.log(data);
    $scope.score = data;
});

// Outgoing
$scope.createContestant = function() {

    socket.emit('score')

    //$scope.$digest;

    //console.log($scope.score[0]);

    var contestant = {
    id: new Date().getTime(),
    display_name: "Bob",
    score: $scope.score
    };

    $scope.contestants.push(contestant);
    socket.emit('createContestant', contestant);

    _resetFormValidation();
};

The link in the question still works for the code if you want to try it yourself!

Upvotes: 1

Related Questions