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;
});
})
되면. 현재 연결 만하고 있지만 콜렉션의 값을 변경하는 것은 아무것도 업데이트하지 않습니다. – ocespedes
내가 물어볼 수 있다면 어떻게해야합니까? –