個人部落格開發系列：文章實時儲存

TDon發表於2019-02-26

前言

一般用來寫東西的網站都會有一個編輯實時儲存的功能。對於使用者來說是一個非常實用的功能。作為一個個人部落格來說，雖然用處沒那麼明顯，但是還是想實現一下這個功能，就當是練練手吧。

實現思路

  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。

相關文章