摘要：一寫在前面如何實(shí)現(xiàn)文章的實(shí)時(shí)保存一般寫文章的寫博客的網(wǎng)站都會(huì)有這個(gè)功能點(diǎn)，這樣保證了用戶在不小心退出的情況下數(shù)據(jù)的保存下來(lái)，這樣的交互比較符合用戶的使用心理學(xué)。

如何實(shí)現(xiàn)文章的實(shí)時(shí)保存？一般寫文章的寫博客的網(wǎng)站都會(huì)有這個(gè)功能點(diǎn)，這樣保證了用戶在不小心退出的情況下數(shù)據(jù)的保存下來(lái)，這樣的交互比較符合用戶的使用心理學(xué)。對(duì)于用戶來(lái)說(shuō)這是一個(gè)非常實(shí)用的功能，作為一個(gè)博客來(lái)說(shuō)，有這個(gè)還是不錯(cuò)的。哈哈^_^

一個(gè)功能的實(shí)現(xiàn)，你的編程思路很重要，決定著你在coding之前的設(shè)計(jì)，思路就是你的編程設(shè)計(jì)。

使用webSocket來(lái)進(jìn)行瀏覽器與服務(wù)器的實(shí)時(shí)通信
服務(wù)端使用redis來(lái)緩存實(shí)時(shí)的編輯的文章，因?yàn)榫庉嫷臅r(shí)候文章會(huì)出現(xiàn)頻繁的改動(dòng)，頻繁的讀寫數(shù)據(jù)庫(kù)算不上一個(gè)科學(xué)合理的解決方案
服務(wù)端使用定時(shí)任務(wù)，目前設(shè)置的是每天的凌晨三點(diǎn)，將redis緩存的數(shù)據(jù)存儲(chǔ)到mysql數(shù)據(jù)庫(kù)中
瀏覽器初次進(jìn)入到新增文章的頁(yè)面的時(shí)候，使用websocket從服務(wù)端獲取數(shù)據(jù)，首先從redis中查找有沒(méi)有數(shù)據(jù)，沒(méi)有數(shù)據(jù)再去mysql數(shù)據(jù)庫(kù)中查找
瀏覽器初次進(jìn)入到編輯頁(yè)面，不需要從服務(wù)端獲取數(shù)據(jù)，這樣避免請(qǐng)求接口時(shí)間上浪費(fèi)
使用vue的watch方式來(lái)監(jiān)聽(tīng)寫文章頁(yè)面的變化，變化時(shí)使用websocket向服務(wù)端保存到redis中
文章保存的時(shí)候，清空redis和mysql的實(shí)時(shí)保存的數(shù)據(jù)

const SocketIO = require("socket.io");
const config =  require("../config/environment");
const DraftRedis =  require("./draft-redis");
const redisMysql = require("./redis-mysql");

const draftPostRedisKey = config.draftPostRedisKey;

exports.initSocket = function (server) {
  console.log("init websocket");
  //socket.io
  let socketHandle = SocketIO(server, {
    serveClient: true,
    path: config.socketioPath
  });

  let draftRedis = new DraftRedis(config.db.redis);
  socketHandle.on("connection", function (socket) {
    console.log("socket connected");

    // 離開編輯文章頁(yè)面
    socket.on("disconnect", function () {
      console.info("[%s] DISCONNECTED", socket.sid);
    });

    // 進(jìn)入新增文章頁(yè)面，獲取已保存的草稿（可以為空）
    socket.on("getDraftPost", async function () {
      let data = await draftRedis.get(draftPostRedisKey);
      if (!data) {
        data = await redisMysql.getDraftPostFromMysql();
        socket.emit("getDraftPost", data);
        await draftRedis.set(draftPostRedisKey, data);
      } else {
        socket.emit("getDraftPost", data);
      }
    });

    // 實(shí)時(shí)保存文章內(nèi)容
    socket.on("saveDraftPost", async function (data) {
      let res = await draftRedis.set(draftPostRedisKey, data);
      socket.emit("saveDraftPost", res);
    });

    // 保存后清空已保存的文章草稿
    socket.on("clearDraftPost", async function () {
      await draftRedis.destroy(draftPostRedisKey);
      await redisMysql.clearDraftPostOfMysql();
      socket.emit("clearDraftPost", true);
    });
  });
};

目前個(gè)人博客的后臺(tái)使用的是，只有一個(gè)賬戶，沒(méi)有添加多賬戶體系，所以redis的mysql中只存有一條記錄。后續(xù)有空會(huì)慢慢加上多賬戶體系

涉及到的模塊及說(shuō)明

1、/server/util/draft-socketio.js
服務(wù)端websocket服務(wù)，使用socket.io庫(kù)
2、/server/util/draf-redis.js
redis的set方法和get公共方法
3、/server/util/redis-mysql.js

redisToMysqlTask方法：定時(shí)同步redis數(shù)據(jù)到mysql數(shù)據(jù)的方法，使用node-schedule庫(kù)實(shí)現(xiàn)定時(shí)同步
getDraftPostFromMysql方法：redis中不存在的數(shù)據(jù)時(shí)候，從mysql中查詢數(shù)據(jù)
clearDraftPostOfMysql方法：從mysql中刪除數(shù)據(jù)，文章保存后操作
4、/src/main.js
瀏覽器端先導(dǎo)入socket.io，使用vue-socket.io和socket.io-client庫(kù)

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從服務(wù)端獲取數(shù)據(jù)，并實(shí)施將數(shù)據(jù)傳輸?shù)椒?wù)端進(jìn)行保存

整個(gè)功能本質(zhì)上就是：webSocket、redis、mysql的使用，這幾個(gè)之前使用過(guò)，沒(méi)有聯(lián)合使用過(guò)，還算是比較完滿實(shí)現(xiàn)文章的實(shí)時(shí)保存

最后歡迎fork和start