2016-07-15 6 views
2

websocket 서버에서 새로운 정보를받은 후 angularjs 컨트롤러를 업데이트하려고합니다. 나는 각도 웹 소켓을 사용하여 websocket 서버와의 연결을 만듭니다.websocket 데이터로 angularjs 컨트롤러 업데이트

angular.module('VotingApp', ['ngWebSocket']) 
.factory('MyVotingResults', function ($websocket) { 
    // Open a WebSocket connection 
    var ws = $websocket('ws://localhost:80/test');   

    //defaults 
    var collection = { 
     Question: "This is my question?", 
     Results: [ 
      { Percentage: 0, Picture: "http://www.kvmechelen.be/wp-content/uploads/2015/02/De-Witte.jpg", Player: "Seth De Witte", Number: "4", Position: "Defender", Winner: true }, 
      { Percentage: 0, Picture: "http://www.kvmechelen.be/wp-content/uploads/2016/02/15-16grpsf-037-19715104962_19124904603_o.jpg", Player: "Tim Matthys", Number: "7", Position: "Midfielder", Winner: false }, 
      { Percentage: 0, Picture: "http://www.kvmechelen.be/wp-content/uploads/2016/02/NICOLAS-VERDIER.jpg", Player: "Nicolas Verdier", Number: "99", Position: "Forward", Winner: false } 
     ] 
    }; 

    ws.onOpen(function() { 
     console.log("connectie is open"); 
     ws.send("Hello world!"); 
    }); 

    ws.onClose(function() { 
     console.log("connectie is closed"); 
    }); 

    ws.onError(function() { 
     console.log("error!"); 
    }); 

    ws.onMessage(function (response) { 
     console.log("received an update: ", response); 
     collection = JSON.parse(response.data); 
    }); 

    return { 
     collection: collection, 
     get: function() { 
      ws.send(JSON.stringify({ action: 'get' })); 
     } 
    }; 
}) 
.controller('VotingController', function ($scope, MyVotingResults) { 
    $scope.Data = MyVotingResults.collection; 
}) 

내가 시작하는 일부 데이터와 함께 내 컬렉션 변수를 초기화하고 있습니다 :

여기 내 코드입니다. 그것은 작동하고 그것이 예정되어있는 것처럼 페이지에 보여집니다.

{ 
"Question": "Who deserves the Man of the Match award?", 
"Results": [{ 
    "Percentage": 25.0, 
    "Picture": "http://www.kvmechelen.be/wp-content/uploads/2015/02/De-Witte.jpg", 
    "Player": "Seth De Witte", 
    "Number": "4", 
    "Position": "Defender", 
    "Winner": false 
}, { 
    "Percentage": 40.0, 
    "Picture": "http://www.kvmechelen.be/wp-content/uploads/2016/02/15-16grpsf-037-19715104962_19124904603_o.jpg", 
    "Player": "Tim Matthys", 
    "Number": "7", 
    "Position": "Midfielder", 
    "Winner": true 
}, { 
    "Percentage": 35.0, 
    "Picture": "http://www.kvmechelen.be/wp-content/uploads/2016/02/NICOLAS-VERDIER.jpg", 
    "Player": "Nicolas Verdier", 
    "Number": "99", 
    "Position": "Forward", 
    "Winner": false 
}] 
} 

되지 않는 이유는 페이지 업데이트 :

<div class="content" ng-controller="VotingController"> 
    <div class="vraag"> 
     <p>{{Data.Question}}</p> 
    </div> 
    <div class="antwoorden"> 
     <div class="antw" ng-repeat="result in Data.Results"> 
      <div class="result"> 
       <div class="resultWinner"> 
        <img src="img/winner.png" /> 
       </div> 
       <div class="resultImage"> 
        <img src="{{result.Picture}}" /> 
       </div> 
       <div class="resultBalk"> 
        <p><span class="timer">{{result.Percentage}}</span>%</p> 
       </div> 
      </div> 
      <div class="antwText"> 
       <p><span>{{result.Number}}.</span> {{result.Player}}</p> 
       <p>{{result.Position}}</p> 
      </div> 
     </div> 
    </div> 
</div> 

내 websocketserver이 JSON을 다시 보내는 간단한 TESTSERVER입니다 : 여기

내 HTML입니까? 이 코드에 기반하여 다음 코드를 작성했습니다. https://angularclass.github.io/angular-websocket/

도움을 주시면 감사하겠습니다.

편집 : 컨트롤러를 변경했지만 여전히 작동하지 않습니다.

.controller('VotingController', function ($scope, MyVotingResults) { 
    $scope.Data = MyVotingResults.collection; 

    $scope.$watch(function() { 
     return MyVotingResults.collection; 
    }, function (newValue) { 
     $scope.Data = newValue; 
    }); 
}) 
+0

되면. 현재 연결 만하고 있지만 콜렉션의 값을 변경하는 것은 아무것도 업데이트하지 않습니다. – ocespedes

+0

내가 물어볼 수 있다면 어떻게해야합니까? –

답변

0

당신은 당신의 컨트롤러에서 해당 서비스 변수를 "보고"이에 따라 범위를 업데이트 할 수 있습니다 : 데이터가 다시 당신이 컨트롤러를 업데이트 할 필요가 소켓에서 제공

$scope.$watch(function() { 
    return MyVotingResults.collection; 
}, function (newValue) { 
    $scope.Data = newValue; 
}); 
+0

이 코드를 사용했지만 여전히 작동하지 않습니다. –

관련 문제