从闪存接收数据并显示在angularJS客户端 [英] receive data from flash and display on angularJS client side
问题描述
npm install 让它工作）。我使用NodeJS / Express / Socket.io从游戏传输数据。 以下是app.js（服务器端）的代码：
$ b $
var express = require（'express'），
app = express（），$ b $ server = require（'http '）.createServer（app），
io = require（'socket.io'）。listen（server）;
$ b app.configure（function（）{
app.use（express.static（__ dirname +'/ public'））;
app.set（'views'，__dirname +'/ views'）;
}）;
io.configure（）{
io.set（'transports'，['websocket'，'xhr-polling']）;
io.set（' Flash policy port'，10843）;
}）;
var参赛者= [];
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'，函数（数据）{
参赛者= contestants.filter（function（person）{
return person.id！== dat a.id;
}）;
socket.broadcast.emit（'onContestantDeleted'，data）;
}）;
}）;
server.listen（8000）;
上面的关键字是：
<$ （data），function（data）{
socket.broadcast.emit（data）;
}）;
这就是我试图从服务器端向客户端发送数据的地方。在客户端 - 从我的主控制器，我有这个。
leader-board.js（主客户端JavaScript文件）：
socket.on（'data'，function（data）{
$ scope.score.push（data）;
}）
//传出
$ 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（参赛者）;
socket.emit（'createContestant'，参赛者）;
_resetFormValidation（）;
};
正如您所看到的 - 我试图获取发射的数据，并将其推送到一个数组我会保持分数。当用户点击主index.html文件中的提交按钮时， createContestant 函数被调用。
索引.html
< body>
$ b ng-disabled =
ldrbd.contestantName。$ error.required ||
ldrbd.contestantScore。$ error.required
>
提交分数
< / button>
...
< / body>
更新 将服务器端代码更改为： console.log（$ scope.score [0]）;从总是 createContestant 函数中， undefined 。我不知道如果我从服务器端正确发射数据 socket.io - 我不知道我是否正确接收它。我使用 $ scope。$ digest 来刷新作用域，因为 socket.io 内容不在AngularJS中我读过了）。任何帮助将不胜感激。再次 - 我试图将从Flash游戏发出的数据存储到数组中，然而 - 在数据存储之前，它需要被正确地提取 - 而且我的提取总是变成 undefined
$ b
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' 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）
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $'$'$。
}）;
$ Out
$ scope.createContestant = function（）{
socket.emit（'score'）
// 。$ $范围消化;
//console.log($scope.score[0]）;
var contestant = {
id：new Date（）。getTime（），
display_name：Bob，
score：$ scope.score
};
$ scope.contestants.push（参赛者）;
socket.emit（'createContestant'，参赛者）;
_resetFormValidation（）;
};
如果您想亲自尝试，问题中的链接仍然适用于代码！
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?
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!
这篇关于从闪存接收数据并显示在angularJS客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
