1

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

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

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

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

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

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

4

2 回答 2

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

于 2013-10-06T17:09:51.163 回答
0

查看 1.2 中的这个新功能：

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

于 2014-01-28T00:45:48.503 回答