node.js - AngularJS: Best way to handle data from socket with ng-repeat -
i quite new real-time data socket.io. trying figure out best way handle data coming in socket.io in angularjs ng-repeat?
right have backend sending entire data structure every time there update it.
but causing ng-repeat
refresh in order display new data (if make modifications data on client side only, removed next time data sent backend). there better way this?
should filter out data requires updating on backend , send front end instead of delivering entire data structure again? (but how apply in ng-repeat
update data...)
i tried using underscorejs extend method in frontend seems cause issues sorting of data in ng-repeat
(orderby , filter both break).
my specific use case dealing sports scores (several games (objects) in array), getting updates on data whether time changing in game, or scoring play. updates happening pretty every second. tapping specific api , grabbing data on specific refresh variable, sending front-end via socket. not ideal case use sockets really, way interact api have discovered far.
i think it's best if send client new events only, not entire list every time. add events array , let ng-repeat
render them. here's example using ngsocketio, simple socketio module i've created angular (the syntax won't different 1 you're using, guess):
app.controller('myctrl', function($scope, socket) { $scope.events = []; socket.on('someevent', function(data) { $scope.events.push(data); } }
and markup this:
<ul> <li ng-repeat="event in events">{{ event.name }}</li> </ul>
now can change object of events
array , won't removed when next event arrives. if same event can sent again (with new data, perhaps), replace array "hash":
app.controller('myctrl', function($scope, socket) { $scope.events = {}; socket.on('someevent', function(data) { $scope.events[data.id] = data; } }
the ng-repeat
expression needs changed in order iterate on hash:
<li ng-repeat="(id, data) in events">{{id}}: {{data.name}}</li>
in case local changes event lost if same event arrives again. if want partially update local copy of if, you'll need manually, perhaps saving parts don't want lose , restore them after updating local event new data server.
Comments
Post a Comment