I have application with Websockets using. On server changing some data, after i get some message from websocket what was changed and need update data in table. I get data from websocket, send GET request for getting data, and update my scope with data, but i don't see changes in table. In $scope.ordersList i save date geted from server.
My websockets service:
var services = angular.module('services', []);
services.factory('EventService', ['$cookies',
function($cookies) {
var service = {};
service.connect = function() {
if (service.ws) {
return;
}
var ws = new WebSocket("ws://" + window.location.host + "/events/");
ws.onopen = function() {
ws.send(JSON.stringify({
type: "auth",
token: $cookies.token
}));
console.log("Succeeded to open a conection");
};
ws.onerror = function() {
console.log("Failed to open a connection");
};
ws.onmessage = function(message) {
var obj = JSON.parse(message.data);
if (obj.result) return;
if (obj.id) {
setTimeout(function() {
service.callback(obj);
}, 1000)
}
};
service.ws = ws;
};
service.subscribe = function(callback) {
service.callback = callback;
};
return service;
}
]);
How i use it in my controller:
EventService.subscribe(function(msg) {
console.log('msg', msg);
var item = $.grep($scope.ordersList, function(item) {
return item.id == msg.id
})
if (item.length > 0) {
item[0].status = msg.status
} else {
$scope.ordersList.push(msg);
}
$scope.$apply();
});
$scope.getOrders();
EventService.connect();
And my template:
<tr item="parameter" ng-repeat="item in ordersList">
<td>{{item.id}}</td>
<td>{{item.symbol}}</td>
</tr>
