我的博客開發系列：文章實時保存

前言

通常用來寫東西的網站都會有一個編輯實時保存的功能。對於使用者來講是一個很是實用的功能。做爲一個我的博客來講，雖然用處沒那麼明顯，可是仍是想實現一下這個功能，就當是練練手吧。

實現思路

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。