AngularJS:将REST与Socket.IO结合起来

Question

在我最近构建的单页webapp中,我使用Restangular模块为我的模型获取数据.我想为应用添加实时更新,因此无论何时在服务器上更改或添加任何模型,我都可以更新我的模型列表.

我已经看到这在Trello等Web应用程序中运行良好,您可以在不刷新网页的情况下查看更新.我确信Trello webclient使用REST API.

如何构建服务器和客户端来存档它的正确方法是什么？

Answer 1

首先,您的问题过于笼统,可能有很多依赖于您的需求和条件的解决方案.

当您想要保留REST API并使用Web套接字添加一些实时时,我将简要介绍一个案例.

1. 从REST获取所有数据 - Sokets仅用于通知.

   优点:易于实现服务器端和客户端.您只需要在服务器上发出有关已修改资源(如资源名称和ID)的信息,并在客户端捕获这些事件并使用REST API获取数据.

   缺点:每次通知时都会向服务器发出一个请求.当您为单个资源拥有大量活动客户端时,这会显着增加流量(它们将向服务器生成大量反向请求).

2. 从REST - 套接字获取初始负载,以获取具有数据有效负载的通知.

   优点:所有信息都附带通知,不会对服务器产生新请求,因此我们的流量较少.

   缺点:更难实现服务器端和客户端.您需要将数据添加到服务器上的所有事件.您需要从客户端的所有事件中获取数据.

   根据评论更新

   至于处理不同类型的模型(只是一种方法).

   客户端.

   1. factory为每个型号保留一个.
   2. 请记住,您只需要对显示的数据进行实时更新(在大多数情况下),因此您可以轻松使用内存缓存(因此您可以通过其ID找到任何实体).
   3. 为每种类型的更改添加侦听器(Created, Updated, Deleted).
   4. 在任何监听器中,你应该调用一些initObject函数,它将通过ID在缓存中找到实体extend,如果没有具有这种ID的实体,只需创建一个新的并将其添加到缓存中.
   5. 任何Delete只是从缓存中删除实体.

   任何时候你需要这个资源,你应该返回缓存对象的链接,以保持双向数据绑定(这就是我使用extend和不使用的原因=).当然,您需要处理以下情况:"用户正在编辑资源,而有关删除的通知".

   服务器端.

   1. 发送所有模型然后只修改字段更容易(在这两种情况下,您必须发送资源的ID).
   2. 对于Create, Update, Delete所有参与用户的任何事件推送事件.
   3. 事件名称应包含操作名称(如"新建","更新","删除")和资源名称(如"用户","任务"等).所以,你会有NewTask,UpdateTask事件.
   4. 事件有效负载应包含模型或仅包含ID的已修改字段.

   可以通过两种方式处理集合更改:添加/更新/删除集合中的项目或更改所有集合作为整体.

当然,所有修改PUT, POST, DELETE都是使用REST进行的.

我为案例1)制作了一个超级简单的伪要点.https://gist.github.com/gpstmp/9868760但它可以更新案例2)像https://gist.github.com/gpstmp/9900454

希望这可以帮助.