Question

我试图从一个非常简单的Flash游戏中获取数据（用户的得分），以显示在通过AngularJS显示的简单排行榜上。您可以获得所有代码here的副本（您可能需要运行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游戏发出的数据存储到数组中，但是 - 在存储数据之前，需要正确获取数据 - 并且我的提取始终会变为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消息以确认数据是否已经发送和接收（至少是节点）并且它是 - 该消息的输出是一个数字，是得分。我意识到的是......当点击按钮时，应该在客户端输入分数。但是当游戏结束时，数据会从服务器端发出...所以当点击按钮时...那个时刻客户端可以获得的数据是什么？这是差异吗？

Answer 1

这是工作套接字代码（花了我一段时间，但我得到了它）！

服务器端（节点/快速）：

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

如果您想亲自尝试，问题中的链接仍适用于代码！

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

1 个答案: