AngularJS将实时收集与REST同步，并获得实时更新

AngularJS sync live collection with REST and get live updates

本文关键字：实时更新 同步 REST 实时 AngularJS      更新时间：2023-09-26

我正在寻找一些最佳实践，如何将集合与REST同步，并使用web套接字获得实时更新。如果我有一个集合items。。。

  • {id: 1, title: "First todo", completed: false}
  • {id: 2, title: "Second todo", completed: true}
  • {id: 3, title: "Third todo", completed: false}

我正在为TodoItems定义REST资源：

app.factory('TodoItems', function($resource) {
    return $resource( '/todoitems/:id', { id: '@id' },
            {create: { method: 'POST' },
            update: { method: 'PUT' } }
});

其余资源应用于fetch整个列表，而update仅用于单个项目。

我可能会有某种webSocket.listenForChanges(item.id, cb)。

有了这两种获取、操作数据和实时更新的方法，我该如何使用它？

我可以执行$scope.$watchCollection并在任何更改时获取更新，但每次手动更改集合时回调都会运行，这不仅是因为用户更新需要运行TodoItems.update(item)，而且web套接字更新不能触发我的REST API。

webSocket.listenForChanges(item.id, function(newItem) { $scope.item = newItem; });
// This triggers $watchCollection - NOT GOOD, because $watchCollection
// could trigger and call upon REST

AngularFire不知怎么做到的http://www.youtube.com/watch?v=C7ZI7z7qnHU#t=30m28s但我怀疑他们是通过对整个阵列进行批量同步来实现的。

对每个项目的控制器中的$watch个单独项目进行一点修改，具有以下JADE模板

ul
  li(ng-repeat='todo in todos',ng-controller='TodoItemController')

然而，问题是相同的，$watch无法区分服务器更新和用户更新。

我唯一的希望是只从updateItem(item)removeItem(item)这样的范围控件调用我的REST API，还是有更聪明的方法可以通过REST/websocket自动同步集合？

您可以使用ngChange来监视用户的更改。根据文档，ngChange将"在用户更改输入时评估给定表达式。当值更改来自模型时，不评估表达式。">

我很好奇你为什么要混合一个REST API和一个WebSocket API。为什么不全部通过WebSockets完成呢？它的重量更轻，而且不混合协议似乎不会那么令人困惑。

相关文章：