songEagle开辟系列：怎样科学有用的让博客文章及时保留

2024年5月14日 226次阅读 来源: saucxs

一、写在前面

怎样完成文章的及时保留？平常写文章的写博客的网站都邑有这个功用点，如许保证了用户在不小心退出的情况下数据的保留下来，如许的交互比较相符用户的运用心理学。关于用户来讲这是一个异常有用的功用，作为一个博客来讲，有这个照样不错的。哈哈^_^

二、完成的思绪

一个功用的完成，你的编程思绪很重要，决议着你在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
    原文作者：saucxs
    原文地址: https://segmentfault.com/a/1190000019269567
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞