我的博客开发系列：文章实时保存

前言

通常用来写东西的网站都会有一个编辑实时保存的功能。对于使用者来讲是一个很是实用的功能。做为一个我的博客来讲，虽然用处没那么明显，可是仍是想实现一下这个功能，就当是练练手吧。

实现思路

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'
}));

5./src/pages/Edit.vue

使用WebSocket从服务端获取数据，并实时将数据传输到服务端进行保存。

总结

1. 整个功能其实就是WebSocket、Redis和MySQL的使用，这几个以前都用过，因此开发起来仍是比较容易。最重要的是要先想好解决方案。
2. 最后照例求一下fork和star。