内容简介:如何实现文章的实时保存?一般写文章的写博客的网站都会有这个功能点,这样保证了用户在不小心退出的情况下数据的保存下来,这样的交互比较符合用户的使用心理学。对于用户来说这是一个非常实用的功能,作为一个博客来说,有这个还是不错的。哈哈^_^一个功能的实现,你的编程思路很重要,决定着你在coding之前的设计,思路就是你的编程设计。redisToMysqlTask方法:定时同步redis数据到mysql数据的方法,使用node-schedule库实现定时同步 getDraftPostFromMysql方法:redi
如何实现文章的实时保存?一般写文章的写博客的网站都会有这个功能点,这样保证了用户在不小心退出的情况下数据的保存下来,这样的交互比较符合用户的使用心理学。对于用户来说这是一个非常实用的功能,作为一个博客来说,有这个还是不错的。哈哈^_^
二、实现的思路
一个功能的实现,你的编程思路很重要,决定着你在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从服务端获取数据,并实施将数据传输到服务端进行保存
五、总结
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 保存和恢复模型
- Android 文件保存
- 通过按钮单击保存PhpSpreadSheet
- javascript – Backbone.js – 在上一个保存前保存模型POST(创建)而不是PUT(更新)请求时出现问题
- 使用二进制保存用户状态
- dataframe 保存csv 中文编码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。