离线/在线数据同步设计（Javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3285348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Offline / Online Data Synchronization Design (Javascript)
提问by gatapia
I'm currently in the process of writing an offline webapp using all the html5 goodies for offline support. However I'm starting now to think about writing the sync module that will ensure that any offline data gets sent to the server and server data back to the client. Now I'm sure this has been done before, I mean its a pretty classic design issue that affects mobile devices and a plethora of other things. So I'm wondering can anyone point me to some good design resources for this kind of thing?
我目前正在编写一个离线 web 应用程序，使用所有 html5 好东西来提供离线支持。但是，我现在开始考虑编写同步模块，以确保将任何离线数据发送到服务器并将服务器数据发送回客户端。现在我确定这之前已经完成了，我的意思是它是一个非常经典的设计问题，会影响移动设备和大量其他事物。所以我想知道任何人都可以为这种事情指出一些好的设计资源吗？
Now I really do not need to be too sophisticated with this, I mean I'm not handling multiple users accessing the same data and I'm happy not to merge conflicts (just take the latest) but still I would like a design that will allow me those options in the future.
现在我真的不需要太复杂了，我的意思是我没有处理访问相同数据的多个用户，我很高兴不合并冲突（只使用最新的）但我仍然想要一个设计让我将来有这些选择。
Also, are there any open source projects implementing this type of thing? I'm not above ripping off someone else's code (if license allows) and I'm happy to port.
另外，是否有任何开源项目实现了这种类型的东西？我不会窃取别人的代码（如果许可证允许），我很乐意移植。
回答by Rebecca
I had a similar problem. I decided to use a purely JSON in and out approach. The solution I'm taking on form submission is:
我有一个类似的问题。我决定使用纯 JSON 输入输出方法。我正在提交表单的解决方案是：
- catch the form submit event
- check whether or not the user is online
- if user is onlinethen submit the form as normal form POST
- if user is offlinethen stringify a JSON request and store it locally (I decided to use Web SQL Database). Queue table is simply Uri and Payload.
- 捕捉表单提交事件
- 检查用户是否在线
- 如果用户在线，则将表单作为正常表单 POST 提交
- 如果用户离线，则将 JSON 请求字符串化并将其存储在本地（我决定使用 Web SQL 数据库）。队列表只是 Uri 和 Payload。
Then I have global event hooks for the online / offline events. When the user comes back online, it checks the queue, and if the queue has items in it, it then sends them through as JSON POST requests.
然后我有在线/离线事件的全局事件挂钩。当用户重新上线时，它会检查队列，如果队列中有项目，则将它们作为 JSON POST 请求发送。
If you are primarily interested in gettingJSON data and caching it for offline usage, then take a look at jquery.offline.
如果您主要对获取JSON 数据并将其缓存以供离线使用感兴趣，请查看jquery.offline。
The challenge with synchronizing in both direction is that you need to update the local cached lists with any CRUD work that you have queued.
双向同步的挑战在于，您需要使用已排队的任何 CRUD 工作更新本地缓存列表。
I'd like to find a more generic way to do this.
我想找到一种更通用的方法来做到这一点。
回答by kybernetikos
My plan for a similar design (not yet tried) is to use something like PouchDBto store the data locally and then sync it with a remote couch instance.
我的类似设计计划（尚未尝试）是使用PouchDB 之类的东西在本地存储数据，然后将其与远程沙发实例同步。
回答by frontendbeauty
Check out Derby, a Node MVC framework that has some pretty sweet synchronization and conflict resolution features. http://derbyjs.com/
查看 Derby，这是一个 Node MVC 框架，它具有一些非常棒的同步和冲突解决功能。http://derbyjs.com/
回答by oivoodoo
in our team we have already developed app in offline/online mode.
在我们的团队中，我们已经在离线/在线模式下开发了应用程序。
we are using the next following libraries:
我们正在使用以下库：
Using rack-offline we are caching all resources files and jst template for rendering content on the page. backbonejs and backbonejs-localStorage helps to make MVC app on the client. it's pretty awesome, you should try it. we are always using localstorage for saving data. when we create post for example model object and saving to the localStorage, we are triggering queues for syncing(also we have by timer background worker for auto running sync process). For each model we have separate sync class that should be run by queue sync trigger. if your navigator.onLine => true we are sending requests to the server with data for updating. if you close browser, anyway you don't loose your data because you have queues in the localStorage. in the next time client will sync data on the first loading with navigator.onLine => true.
使用rack-offline，我们缓存了所有资源文件和jst 模板，用于在页面上呈现内容。backbonejs 和backbonejs-localStorage 有助于在客户端制作 MVC 应用程序。太棒了，你应该试试。我们总是使用 localstorage 来保存数据。当我们创建 post 例如模型对象并保存到 localStorage 时，我们正在触发同步队列（我们也有计时器后台工作人员用于自动运行同步过程）。对于每个模型，我们都有单独的同步类，应该由队列同步触发器运行。如果您的 navigator.onLine => true 我们正在向服务器发送包含更新数据的请求。如果您关闭浏览器，无论如何您都不会丢失数据，因为您在 localStorage 中有队列。下次客户端将在第一次加载时使用 navigator.onLine => true 同步数据。
How to use rack-offline you can check my small project in the github:
如何使用rack-offline你可以在github查看我的小项目：
Good luck!
祝你好运！
回答by brains_at_work
I faced the same problem and ended up using an XML-file for storage and git to track changes and commit them automatically, as soon as a connection is available. The sync is done with the usual git commit / push / pull commands in a shell script and a cronjob starting the script. This would also work if you store JSON in a textfile.
我遇到了同样的问题，最终使用 XML 文件进行存储，使用 git 跟踪更改并在连接可用时自动提交它们。同步是通过 shell 脚本中通常的 git commit / push / pull 命令和启动脚本的 cronjob 完成的。如果您将 JSON 存储在文本文件中，这也将起作用。
回答by yannisgu
DerbyJS were probably the best solution. However Derby is still in development and offline support is only in planning and has not yet been implemented. In the Google Group ( http://groups.google.com/group/derbyjs/browse_thread/thread/7e7f4d6d005c219c) you can find aditional information about what is planned in the future.
DerbyJS 可能是最好的解决方案。然而，Derby 仍在开发中，离线支持只是在规划中，尚未实施。在 Google 群组 ( http://groups.google.com/group/derbyjs/browse_thread/thread/7e7f4d6d005c219c) 中，您可以找到有关未来计划的其他信息。
回答by Raynos
I'd personally recommend you write a wrapper on top of the indexedDB API that checks whether you are online/offline.
我个人建议您在 indexedDB API 之上编写一个包装器来检查您是否在线/离线。
- if offline, just store in indexedDB and set persisted flag to false on all documents
- if online, get all documents where persisted is false and store them in mongodb or something equivelant on the backend, then store new documents in both indexedDB and on the server with the persisted flag to true.
- 如果离线，只需存储在 indexedDB 并在所有文档上将持久标志设置为 false
- 如果在线，获取所有持久化为 false 的文档并将它们存储在 mongodb 或后端的等效内容中，然后将新文档存储在 indexedDB 和服务器上，并将持久化标志设置为 true。
You would have to augment the tunnel to set the persisted flag automatically and also tunnel the synchronization of these documents to the backend
您必须增加隧道以自动设置持久标志，并将这些文档的同步隧道传输到后端
回答by Victor
I'm currently working on similar webapp. I've decided to make such workflow:
我目前正在开发类似的 webapp。我决定制作这样的工作流程：
- Form isn't really submitted - "Submit" button actually saves serialized form data to localStorage (in some queue). This saves from troubles with submit capturing and from writing additional error processing code to handle disconnect during form submission.
- Transport script is triggered after data saving. It checks online/offline state.
- When online, it tries to send latest data from queue to server (AJAX request), and deletes it from queue on success (and continues to send next data from queue after short timeout).
- It shedules re-check after some period of time (by setTimeout()).
- 表单并未真正提交——“提交”按钮实际上将序列化的表单数据保存到 localStorage（在某个队列中）。这避免了提交捕获和编写额外的错误处理代码来处理表单提交期间的断开连接的麻烦。
- 数据保存后触发传输脚本。它检查在线/离线状态。
- 在线时，它尝试将最新数据从队列发送到服务器（AJAX 请求），并在成功时将其从队列中删除（并在短暂超时后继续从队列中发送下一个数据）。
- 它在一段时间后重新检查（通过 setTimeout()）。
回答by Will
If you are up for using the potentially heavy Ext JS / Sencha framework, it has a nice data API with offline (e.g. localStorage) support and a proxy approach for write-thru to local then server. I use Sencha Touch (mobile-specific).
如果您准备使用可能很重的 Ext JS / Sencha 框架，它有一个很好的数据 API，具有离线（例如 localStorage）支持和用于写入到本地服务器的代理方法。我使用 Sencha Touch（特定于移动设备）。
For debugging web storage, check out Weinre.
要调试 Web 存储，请查看 Weinre。
