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

希望這可以幫助。