简体   繁体   English

Angular绑定不随socket.io广播更新

[英]Angular binding not updating with socket.io broadcast

I have a server variable named currentPlayer that binds properly in the emit 'init' call, but won't bind in my broadcast.emit. 我有一个名为currentPlayer的服务器变量,该变量在发出'init'调用中正确绑定,但在我的broadcast.emit中不会绑定。 The variable turnNumber which is passed through from the client first updates properly. 从客户端传递过来的变量turnNumber首先正确更新。 When the pass event is fired I can see currentPlayer switching values in the terminal, but I'm stumped as to why it doesn't update in the view. 当通过事件被触发时,我可以在终端中看到currentPlayer切换值,但是我为为什么它在视图中不更新而感到困惑。

I had some trouble binding to primitive types before, so I tried going an extra step and assigning currentPlayer to an object array: $scope.globalVars = [{ currentPlayer: data.currentPlayer }], but that didn't help. 在绑定到基本类型之前,我遇到了一些麻烦,因此我尝试了一个额外的步骤,并将currentPlayer分配给对象数组:$ scope.globalVars = [{currentPlayer:data.currentPlayer}],但这没有帮助。

//server
var currentPlayer = 1;
socket.emit('init', {
    currentPlayer: currentPlayer
});
socket.on('pass', function (data) {
    currentPlayer = currentPlayer == 1 ? 2 : 1;
    console.log(currentPlayer);
    socket.broadcast.emit('pass', {
        number: data.turnNumber,
        currentPlayer: currentPlayer
    });
});

//client
socket.on('init', function (data) {
    $scope.globalVar.currentPlayer = data.currentPlayer;
});
socket.on('pass', function (data) {
    $scope.globalVar.turnNumber = data.number;
    $scope.globalVar.currentPlayer = data.currentPlayer;
});
//click event
$scope.globalVar.turnNumber++;
socket.emit('pass', {
    turnNumber: $scope.globalVar.turnNumber
});

<!-- html -->
{{globalVar.currentPlayer}} {{globalVar.turnNumber}}

UPDATE: 更新:

I realized I could handle the current turn logic in my angular controller. 我意识到我可以在我的角度控制器中处理电流转向逻辑。 I'm no longer changing the variable on the server and trying to pass it back to the client. 我不再更改服务器上的变量并将其传递回客户端。 Maybe as Chandermani says it's simply out of angular's context. 也许正如Chandermani所说,这完全是出于angular的背景。

//server
socket.on('pass', function (data) {
    socket.broadcast.emit('pass', {
        number: data.turnNumber,
        currentPlayer: data.currentPlayer
    });
});
//client
socket.on('pass', function (data) {
    $scope.globalVar.turnNumber = data.number;
    $scope.globalVar.currentPlayer = data.currentPlayer;
});
//click event
$scope.globalVar.currentPlayer = $scope.globalVar.currentPlayer == 1 ? 2 : 1;
$scope.globalVar.turnNumber++;
socket.emit('pass', {
    turnNumber: $scope.globalVar.turnNumber,
    currentPlayer: $scope.globalVar.currentPlayer
});

These calls seem to be execution outside the anuglar context. 这些调用似乎是在uguglar上下文之外执行的。 Try to use $scope.$apply in the socket.on handlers, like 尝试在$scope.$apply socket.on处理程序中使用$scope.$apply

socket.on('pass', function (data) {
   $scope.$apply(function() {
    $scope.globalVar.turnNumber = data.number;
    $scope.globalVar.currentPlayer = data.currentPlayer;
   });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM