2010-07-19 37 views
49

我目前正在編寫一個脫機webapp使用所有html5好東西進行脫機支持。不過,我現在開始考慮編寫同步模塊,以確保將任何脫機數據發送到服務器和服務器數據返回給客戶端。現在我確信這已經完成了,我的意思是它是一個非常經典的設計問題,會影響移動設備和其他許多事情。所以我想知道任何人都可以爲我指出一些很好的設計資源嗎?離線/在線數據同步設計(Javascript)

現在我真的不需要太複雜,我的意思是我沒有處理多個用戶訪問相同的數據,我很高興不合並衝突(只是採取最新),但我仍然想這種設計可以讓我在將來選擇這些選項。

另外,是否有任何開源項目實現這種類型的東西?我不是在撕掉別人的代碼(如果許可證允許的話),我很樂意移植。

回答

8

我有類似的問題。我決定使用純粹的JSON進出方法。我走在表單提交的解決方案是:

  1. 捕獲形式提交事件的用戶
  2. 檢查是否是網上
  3. 如果用戶在線然後提交表單爲正常表單POST
  4. if user is offline然後將JSON請求串化並本地存儲(我決定使用Web SQL數據庫)。隊列表就是Uri和Payload。

然後我有在線/離線事件的全局事件掛鉤。當用戶重新聯機時,它會檢查隊列,如果隊列中有項目,則會以JSON POST請求的形式發送它們。

如果您主要對獲取 JSON數據感興趣,並將其緩存爲脫機使用,請查看jquery.offline

雙向同步的挑戰在於您需要使用任何已排隊的CRUD工作來更新本地緩存列表。

我想找到一個更通用的方法來做到這一點。

1

我遇到了同樣的問題,並最終使用XML文件存儲和git來跟蹤更改並自動提交它們,一旦有連接可用。同步是通過shell腳本中的git commit/push/pull命令和啓動腳本的cronjob完成的。如果您將JSON存儲在文本文件中,這也會起作用。

9

我對類似設計(尚未嘗試)的計劃是使用類似PouchDB的東西在本地存儲數據,然後將其與遠程沙發實例同步。

+0

哎!你成功了嗎?我想聽聽你的經歷。 – Nek 2014-11-24 18:54:59

4

在我們的團隊中,我們已經開發了離線/在線模式的應用程序。

我們使用的是下屆庫:

使用rack-offline我們正在緩存所有資源文件和jst模板以在頁面上呈現內容。 backbonejs和backbonejs-localStorage有助於在客戶端上創建MVC應用程序。這真的很棒,你應該嘗試一下。我們總是使用localstorage來保存數據。當我們爲模型對象創建帖子並保存到localStorage時,我們正在觸發隊列進行同步(同時我們還有定時器後臺工作人員用於自動運行同步過程)。對於每個模型,我們都有獨立的同步類,應該由隊列同步觸發器運行。如果您的navigator.onLine => true,我們會向服務器發送更新請求。如果你關閉瀏覽器,無論如何你不會丟失你的數據,因爲你在localStorage中有隊列。在下次客戶端將第一次加載的數據與navigator.onLine => true同步。

如何使用機架離線使用,您可以檢查我的小項目在github上:

pomodoro-app

祝你好運!

1

我目前正在研究類似的web應用程序。我決定做這樣的工作流程:

  1. 表單並未真正提交 - 「提交」按鈕實際上是將序列化表單數據保存到localStorage(在某個隊列中)。這節省了提交捕獲和編寫額外的錯誤處理代碼以處理表單提交期間的斷開連接的麻煩。
  2. 數據保存後觸發傳輸腳本。它檢查在線/離線狀態。
  3. 在線時,它嘗試從隊列發送最新數據到服務器(AJAX請求),並在成功時從隊列中刪除它(並在短暫超時後繼續從隊列發送下一個數據)。
  4. 它shedules經過一段時間後(通過setTimeout())重新檢查。
1

如果您正在使用可能很繁重的Ext JS/Sencha框架,它具有一個很好的數據API,支持脫機(例如本地存儲)和用於直通到本地然後服務器的代理方法。我使用Sencha Touch(移動專用)。

對於調試Web存儲,請查看Weinre。

6

查看Derby,這是一個具有一些非常好的同步和衝突解決功能的Node MVC框架。 http://derbyjs.com/

+4

Derby使用[RacerJS](https://github.com/codeparty/racer)進行數據同步,所以您不必*去*完整的Derby框架。根據他們自己的說法,RacerJS仍然處於alpha階段。 – 2012-10-02 11:20:28

2

我個人建議你在indexedDB API上編寫一個包裝器,檢查你是否在線/離線。

  • 如果離線,只是存儲在索引資料和設置持續標誌設置爲false的所有文件
  • 如果在線,讓那裏堅持所有文件是假的,並將它們存儲在MongoDB中什麼equivelant在後端,然後存儲新在indexedDB和服務器上的文件夾中,持久標誌爲true。

I've written a small one

你將不得不增加隧道自動設置持久性標誌,也隧道這些文件同步到後端