AngularJS: лучший способ обработки данных из сокета с ng-repeat

Я новичок в данных в режиме реального времени с Socket.IO. Я пытаюсь выяснить, что является лучшим способом обработки данных, поступающих из Socket.IO в AngularJS ng-repeat?

Прямо сейчас у меня есть бэкэнд, отправляющий всю структуру данных каждый раз, когда есть обновление к ней.

Но это вызывает обновление ng-repeat для отображения новых данных (если я вношу какие-либо изменения в данные только на стороне клиента, они удаляются в следующий раз, когда данные отправляются из бэкэнд). Есть лучший способ сделать это?

Должен ли я отфильтровывать единственные данные, требующие обновления на бэкэнд, а затем отправлять их на передний план, а не доставлять всю структуру данных еще раз? (Но тогда как я применил бы это в ng-repeat только с данными обновления...)

Я попытался использовать метод расширения UnderscoreJS во внешнем интерфейсе, но он, похоже, вызывает проблемы с сортировкой данных в ng-repeat (orderBy и фильтрует оба прерывания).

Мой конкретный случай использования имеет дело со спортивными оценками (несколько игр (объектов) в массиве), я постоянно получаю обновления по своим данным независимо от того, меняется ли это время в игре или забивает игру. Обновления происходят почти каждую секунду. Я обращаюсь к этому конкретному API и захватываю все данные по определенной переменной обновления, а затем отправляю их в интерфейс через сокет. Не идеальный случай использования сокетов действительно, но это единственный способ взаимодействия с API, который я обнаружил до сих пор.

2 ответа

Я думаю, что лучше всего, если вы отправляете клиенту только новые события, а не весь список каждый раз. Вы можете добавить эти события в массив и позволить ng-repeat визуализировать их. Вот пример использования ngSocketIO, простого модуля SocketIO, который я создал для Angular (синтаксис не будет сильно отличаться от того, который вы уже используете, я думаю):

app.controller('MyCtrl', function($scope, socket) {
 $scope.events = [];

 socket.on('someEvent', function(data) {
 $scope.events.push(data);
 }
}

И разметка может быть примерно такой:

<ul>
 <li ng-repeat="event in events">{{ event.name }}</li>
</ul>

Теперь вы можете изменить любой объект массива events и он не будет удален, когда придет следующее событие. Если одно и то же событие может быть отправлено снова (возможно, с новыми данными), вы можете заменить массив "хешем":

app.controller('MyCtrl', function($scope, socket) {
 $scope.events = {};

 socket.on('someEvent', function(data) {
 $scope.events[data.id] = data;
 }
}

Выражение ng-repeat должно быть слегка изменено для того, чтобы он перебирал хэш:

<li ng-repeat="(id, data) in events">{{id}}: {{data.name}}</li>

В этом случае любые локальные изменения события будут потеряны, если одно и то же событие снова поступит. Если вы хотите частично обновить локальную копию if, вам нужно будет сделать это вручную, возможно, сохранив те части, которые вы не хотите потерять, и восстановите их после обновления локального события новыми данными с сервера.

licensed under cc by-sa 3.0 with attribution.