我正在写一个基于网络的游戏,可以让您对纸牌出价并与其他玩家进行交易。对于此应用程序,我使用的是Node,Express,MongoDB和Angular。
该视图显示了玩家的化身和名字以及他们的连接状态。此连接状态保存在游戏模型中,但也可以通过socket.io websockets进行实时跟踪。
当玩家加入游戏时,服务器会向所有客户端发送一条消息。然后,客户端通过比较游戏ID来检查消息是否适合他们。
socketService.on("playerConnection", function(data) {
if (data.gameId === gameId) {
handlePlayerConnection(data);
}
});
如果消息是给我们的客户的,则将数据传递到函数“ handlePlayerConnection”。
function handlePlayerConnection(data) {
if ($scope.game) {
for (var i = 0; i < $scope.game.players.length; i++) {
if ($scope.game.players[i].user.id === data.userId) {
$scope.game.players[i].isConnected = data.connected;
}
}
}
}
在视图中,我只是将玩家头像绑定到“ isConnected”,因此它会在玩家连接/断开连接时显示/隐藏。
游戏模型不时改变(很明显),服务器通知客户端(同样,通过套接字)刷新$ scope.game。
下面的代码显示了如何刷新$ scope.game。
function getGame(gameId, callback) {
gameService.getGame(gameId, function(err, data) {
if (!err) {
$scope.game = data; // Set game
if (callback) callback(data);
}
});
}
至此,视图已基本冻结。它完全停止响应播放器的连接和断开连接。刷新浏览器或控制器可解决此问题。
我已经记录了$ scope.game.players进行控制台,它似乎包含正确的连接状态。该视图根本没有响应。我试图以各种方式在不同地方实现$ scope。$ apply(),但是给我的就是' angular.js:13920错误:[$ rootScope:inprog] $ apply已经在进行中'。在$ timeout()中包装$ scope。$ apply()可以摆脱上述错误,但不能解决问题。
在花了几个小时尝试解决此问题之后,我可能遇到了Tunnelvision的情况。对任何可以帮助我的人的无休止的敬意。
编辑:刚刚意识到所有套接字数据都是通过$ rootScope.apply()处理的。完整代码:
var socket = io.connect("http://localhost:8180/");
return {
on: function(eventName, callback) {
socket.on(eventName, function() {
var args = arguments;
$rootScope.$apply(function() {
callback.apply(socket, args);
});
});
},
emit: function(eventName, data, callback) {
socket.emit(eventName, data, function() {
var args = arguments;
$rootScope.$apply(function() {
if (callback) {
callback.apply(socket, args);
}
});
})
},
off: function(eventName) {
socket.off(eventName);
}
};
现在我什至不知道该怎么办..
终于修好了...
我忘记了我将指令用作“玩家”。出于懒惰的原因,我没有创建隔离的范围并传递播放器对象,而是通过以下方式将播放器对象分配给该范围:
link: function(scope, elem, attrs) {
/*
Decided not to use an isolated scope because the
player directive needs access to the $rootScope.
The solution below eliminates the need of said scope.
*/
scope.player = scope.$eval(attrs.player);
}
如您所见,甚至还有一条评论解释了我的愚蠢决定。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句