AngularJS：使用 ng-repeat 处理来自套接字的数据的最佳方法

Question

我对使用 Socket.IO 的实时数据非常陌生。我想弄清楚在 AngularJS ng-repeat 中处理来自 Socket.IO 的数据的最佳方法是什么？

现在，每当有更新时，我都会让后端发送整个数据结构。

但这会导致ng-repeat 刷新以显示新数据（如果我仅在客户端对数据进行任何修改，则它们会在下次从后端发送数据时被删除）。有一个更好的方法吗？

我是否应该在后端过滤掉唯一需要更新的数据，然后将其发送到前端，而不是再次交付整个数据结构？ （但是我将如何在只有更新数据的ng-repeat 中应用它......）

我尝试在前端使用 UnderscoreJS 扩展方法，但它似乎会导致ng-repeat 中的数据排序出现问题（orderBy 和 filter 都中断）。

我的具体用例是处理运动成绩（数组中的几场比赛（对象）），我会不断更新我的数据，无论它们是比赛中的时间变化，还是得分比赛。更新几乎每秒都在发生。我正在利用这个特定的 API 并获取特定刷新变量上的所有数据，然后通过套接字将其发送到前端。确实不是使用套接字的理想情况，但它是与我迄今为止发现的 API 交互的唯一方式。

Answer 1

我认为最好只向客户发送新事件，而不是每次都发送整个列表。您可以将这些事件添加到数组中并让ng-repeat 呈现它们。这是一个使用 ngSocketIO 的示例，这是我为 Angular 创建的一个简单的 SocketIO 模块（我猜它的语法与您已经使用的没有太大不同）：

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 的本地副本，则需要手动执行此操作，也许通过保存您不想丢失的部分并在使用来自服务器的新数据更新本地事件后恢复它们。

Answer 2

查看 1.2 中的这个新功能：

http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm