从flash接收数据并在angularJS客户端显示

receive data from flash and display on angularJS client side

本文关键字：angularJS 客户端 显示 数据 flash      更新时间：2023-09-26

我试图获得数据(用户的分数)，从一个非常简单的flash游戏我做的，要显示在一个简单的排行榜上，这是通过AngularJS显示。您可以在这里获得所有代码的副本(您可能需要运行npm install才能使其工作)。我使用NodeJS/Express/Socket。IO从游戏中传输数据

下面是app.js(服务器端)的代码: 
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);

上面的关键行是:

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

这就是我试图将数据从服务器端发送到客户端的地方。在客户端-在我的主控制器中，我有这个。

leader-board.js(主客户端javascript文件):

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();
};

正如您所看到的-我试图获得发出的数据，并将其推到一个数组中，我将保留分数。当用户从主index.html文件中单击提交按钮时，调用createContestant函数。

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>

行console.log($scope.score[0]);，从createContestant函数内，始终是undefined。我不确定我是否用socket.io正确地从服务器端发出数据-我也不确定我是否正确地接收到它。我使用$scope.$digest来刷新作用域，因为socket.io的东西在AngularJS之外(或者我读过)。任何帮助都将非常感激。再次-我试图将从flash游戏发出的数据存储到一个数组中，然而-在数据存储之前，它需要被正确获取-我的fetch总是出现undefined，当它应该检索从游戏中发出的数字时(我知道我正在从游戏中发出数字，因为我已经用日志消息测试了它)。谢谢!

将服务器端代码改为:

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

…客户端:

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

仍然没有运气-但我添加了console.log消息到服务器端，以确认数据被发送和接收(至少按节点)，它是-该消息的输出是一个数字，这是分数。我意识到的是…分数应该在点击按钮时在客户端输入。但是当游戏结束时数据会从服务器端发出……所以当按钮被点击时。在那个时刻，数据对客户端可用吗?这就是矛盾之处吗?

这是工作套接字代码(花了我一段时间，但我得到了它)!

服务器端(Node/Express): 

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

客户端(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();
};

问题中的链接仍然适用于代码，如果你想尝试它自己!

相关文章：