[聚合文章] 个人博客开发系列：文章实时保存

一般用来写东西的网站都会有一个编辑实时保存的功能。对于使用者来说是一个非常实用的功能。作为一个个人博客来说，虽然用处没那么明显，但是还是想实现一下这个功能，就当是练练手吧。

实现思路

1. 使用 WebSocket 来进行浏览器与服务器的实时通信；
2. 服务端使用 Redis 来缓存实时编辑的文章（编辑时文章改动频繁，频繁读写数据库操作不是个好的方案）；
3. 服务端使用定时任务（如每天凌晨3点），将 Redis 缓存的数据存储到 MySQL 数据库中；
4. 浏览器端初次进入新增文章页面时，使用 WebSocket 从服务端获取数据（先从 Redis 中查找，如果没有则再从 MySQL 数据库中查找）；
5. 浏览器端初次进入编辑文章页面时，不需要从服务端获取数据；
6. 使用 Vue.js 的watch来监听文章的变化，变化时使用 WebSocket 向服务端传送数据。
7. 文章保存时清空 Redis 和 MySQL 中实时保存的数据。

源码

Talk is cheap. Show me the code.

说明

1. 本功能只是个人博客后台使用，没有多账户体系，所以 Redis 和 MySQL 中都是保存一条记录。如果需要按不同用户来保存的话，需要自行开发。

2. 代码比较多，具体的代码就不贴了，有兴趣的可以去 我的GitHub 上查看源码。这里只说明一下各个文件中代码的用处。

1. / server / util /draft-socketio.js

服务端 WebSocket 服务，使用了 socket.io 库。

2./ server / util /draft-redis.js

Redis 的 set 和 get 的公共方法。

3./ server / util /redis-mysql.js

• redisToMysqlTask ：定时同步 Redis 数据到 MySQL 数据的方法，使用了 node-schedule 库。
• getDraftPostFromMysql : Redis 中不存在数据时，在 MySQL 中查询数据。
• clearDraftPostOfMysql ：从 MySQL 中删除数据（文章保存后操作）。

4. /src/main.js

浏览器端先引入 socket.io ，使用了 vue-socket.io 和 socket.io-client 库。

import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';

Vue.use(VueSocketio, socketio('http://localhost:9000', {
  path: '/testsocketiopath'
}));