# notebook

**Repository Path**: ymssx/notebook

## Basic Information

- **Project Name**: notebook
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# umi project

## Getting Started

Install dependencies,

```bash
$ yarn
```

Start the dev server,

```bash
$ yarn start
```

## 线上版本

[http://ymssx.gitee.io/notebook/](http://ymssx.gitee.io/notebook/)

## 服务器代码仓库

[https://gitee.com/ymssx/notebook-server/](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. （未做）服务端将来自于客户端的离线修改请求标记为离线，这些数据推送给客户端时带上离线标识，交给客户端自行解决冲突。