Question

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

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

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

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

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

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

Answer 1

我认为最好只向客户发送新事件，而不是每次都向整个列表发送。您可以将这些事件添加到数组中，然后让ng-repeat呈现它们。下面是使用ngSocketIO，我为角创建了一个简单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>

在这种情况下，如果同一事件再次到达，对事件的任何本地更改都将丢失。如果你想更新部分，如果本地副本，则需要通过保存部分做手工，也许你不想失去，并与来自服务器的新的数据更新本地事件后恢复它们。< / p>

Answer 2

在1.2中查看这个新功能：

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

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

2 个答案: