umi project

Getting Started

Install dependencies,

$ yarn

Start the dev server,

$ yarn start

线上版本

http://ymssx.gitee.io/notebook/

服务器代码仓库

https://gitee.com/ymssx/notebook-server/

技术栈

umi + dva + antd + egg

功能点

• 支持多端修改，多端的数据能实时同步
• 离线修改。离线的修改在上线时也能够推送到服务器。
• 本地储存 + 服务器存储
• 基本的增改删操作

数据同步思路

记事本的数据持久化主要有两方面：

• localstorage
• 服务端数据

必须要保证 store数据 - localstorage - server端数据 三方同步

基本流程：

0. 使用时间戳作为版本号，用于比较数据版本是否为最新。
1. 当应用启动时，向服务端请求版本号，如果服务端版本号高于客户端，则向服务端拉取最新数据，并更新本地localstorage。否者直接使用localstorage数据。
2. 当本地客户端更新数据时，同时向 本地localstorage 和 服务端 发起更新请求，并且更新版本号为当前时间戳。

难点：

1. 当客户端离线时，本地更改无法推送到服务器。为了保证离线更改有效，采取以下策略：

当fetch请求失败时，将当前更改请求暂存到一个栈上，同时将这个栈使用localstorage持久化存储，防止页面关闭丢失。在每次请求前，按顺序将更改请求取出进行重新请求，如果请求失败重新放回栈中。

一个优化点：可以将请求去重合并；

2. 当用户同时在多端访问时，一端的更改，在另一端无法及时得到响应，需要手动拉取更新。

使用websocket,服务端被更新时主动推送给前端。

3. 当A端离线，B端在线，这时A、B端同时修改数据，那之后当A重新连接时会将离线修改推送到服务器，这个过程可能导致B的修改被覆盖。

1. （未做）服务端可以使用更复杂的数据结构，记录每次修改的内容以及时间戳，当服务端收到来自离线修改的更新请求时，比较更新时间戳，使新的修改覆盖旧的修改。
2. （未做）服务端将来自于客户端的离线修改请求标记为离线，这些数据推送给客户端时带上离线标识，交给客户端自行解决冲突。