摘要:一寫在前面如何實現文章的實時保存一般寫文章的寫博客的網站都會有這個功能點,這樣保證了用戶在不小心退出的情況下數據的保存下來,這樣的交互比較符合用戶的使用心理學。
一、寫在前面
如何實現文章的實時保存?一般寫文章的寫博客的網站都會有這個功能點,這樣保證了用戶在不小心退出的情況下數據的保存下來,這樣的交互比較符合用戶的使用心理學。對于用戶來說這是一個非常實用的功能,作為一個博客來說,有這個還是不錯的。哈哈^_^
二、實現的思路一個功能的實現,你的編程思路很重要,決定著你在coding之前的設計,思路就是你的編程設計。
三、主要代碼使用webSocket來進行瀏覽器與服務器的實時通信
服務端使用redis來緩存實時的編輯的文章,因為編輯的時候文章會出現頻繁的改動,頻繁的讀寫數據庫算不上一個科學合理的解決方案
服務端使用定時任務,目前設置的是每天的凌晨三點,將redis緩存的數據存儲到mysql數據庫中
瀏覽器初次進入到新增文章的頁面的時候,使用websocket從服務端獲取數據,首先從redis中查找有沒有數據,沒有數據再去mysql數據庫中查找
瀏覽器初次進入到編輯頁面,不需要從服務端獲取數據,這樣避免請求接口時間上浪費
使用vue的watch方式來監聽寫文章頁面的變化,變化時使用websocket向服務端保存到redis中
文章保存的時候,清空redis和mysql的實時保存的數據
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"); // 離開編輯文章頁面 socket.on("disconnect", function () { console.info("[%s] DISCONNECTED", socket.sid); }); // 進入新增文章頁面,獲取已保存的草稿(可以為空) 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); } }); // 實時保存文章內容 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); }); }); };四、方法說明
目前個人博客的后臺使用的是,只有一個賬戶,沒有添加多賬戶體系,所以redis的mysql中只存有一條記錄。后續有空會慢慢加上多賬戶體系
涉及到的模塊及說明
1、/server/util/draft-socketio.js
服務端websocket服務,使用socket.io庫
2、/server/util/draf-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從服務端獲取數據,并實施將數據傳輸到服務端進行保存
整個功能本質上就是:webSocket、redis、mysql的使用,這幾個之前使用過,沒有聯合使用過,還算是比較完滿實現文章的實時保存
最后歡迎fork和start
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109777.html
摘要:一前言,是為了在網絡環境間傳遞聲明而執行的一種基于的開放標準。用戶簽發添加中間件校驗判斷是否可用獲取解密,獲取用戶名和認證失敗中添加處理此處在開發時需要過濾掉登錄接口,否則會導致驗證永遠失敗。前端處理前端開發使用的是,發送請求使用的是。 一、前言 JWT(JSON Web Token),是為了在網絡環境間傳遞聲明而執行的一種基于JSON的開放標準(RFC 7519)。 JWT不是一個新...
摘要:雖然我們可以在網上參照各種模板項目文章博客等創建一個數據科學項目,但是目前也沒有教科書對這些知識做一個統一的回答。舉個例子來說,數據科學分析項目通常就不需要部署和監控這兩個過程。創建文件描述源數據及位置。進一步探索和報告在整個數據科學項目中 摘要:?在一個新的數據科學項目,你應該如何組織你的項目流程?數據和代碼要放在那里?應該使用什么工具?在對數據處理之前,需要考慮哪些方面?讀完本文...
摘要:自動化監控這里我需要問兩個重要的問題為什么洪水警戒會一直發生并且為什么會愈演愈烈問題的根源其實是基于告警監控的積極一面自動化。所以,我們對配置好閾值,并把這項艱巨的工作委派給它。開發人員通過吸收客戶的反饋指導,會選擇短平快的項目。 如果你受困于 Nagios 的告警洪潮中不能自拔,那么這兩篇連載博客就是為你而生的。讓我們來詳細的闡述下這個問題! showImg(https://segm...
閱讀 3637·2021-11-19 09:40
閱讀 3095·2019-08-30 15:54
閱讀 2313·2019-08-30 15:44
閱讀 3196·2019-08-29 15:35
閱讀 3331·2019-08-29 12:22
閱讀 2861·2019-08-28 18:01
閱讀 3141·2019-08-26 13:54
閱讀 902·2019-08-26 12:24