Songeagle Development Series: how to save blog articles in real time scientifically and effectively

Time:2019-11-21

I. write in the front

How to save articles in real time? Generally, blog sites that write articles have this function point, which ensures that users can save the data when they exit accidentally. Such interaction is more in line with user psychology. This is a very practical function for users. As a blog, it’s good to have this. Ha ha!

II. Ideas for implementation

The realization of a function, your programming idea is very important, determines your design before coding, the idea is your programming design.

  • Using websocket for real-time communication between browser and server
  • The server uses redis to cache real-time edited articles, because articles will change frequently during editing, frequent reading and writing database is not a scientific and reasonable solution
  • The server uses scheduled tasks. At present, it is set to store redis cached data into MySQL database at 3:00 a.m. every day
  • When the browser first enters the page of new articles, it uses websocket to obtain data from the server. First, it finds whether there is data from redis, and then goes to MySQL database to find if there is no data
  • When the browser enters the editing page for the first time, it does not need to obtain data from the server, so as to avoid wasting the time of requesting interface
  • Use the watch mode of Vue to monitor the changes of the page where the article is written, and use websocket to save the changes to the server in redis
  • When saving the article, clear the real-time saved data of redis and mysql

III. main code

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');

    //Leave the edit article page
    socket.on('disconnect', function () {
      console.info('[%s] DISCONNECTED', socket.sid);
    });

    //Enter the new article page to get the saved draft (can be empty)
    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);
      }
    });

    //Save article content in real time
    socket.on('saveDraftPost', async function (data) {
      let res = await draftRedis.set(draftPostRedisKey, data);
      socket.emit('saveDraftPost', res);
    });

    //Empty saved draft articles after saving
    socket.on('clearDraftPost', async function () {
      await draftRedis.destroy(draftPostRedisKey);
      await redisMysql.clearDraftPostOfMysql();
      socket.emit('clearDraftPost', true);
    });
  });
};

IV. method description

  • At present, there is only one account in the background of personal blog, and there is no multi account system added, so there is only one record in MySQL of redis. In the future, we will gradually add a multi account system when we have time
  • Modules and descriptions involved

1、/server/util/draft-socketio.js
Websocket service on the server side, using socket.io Library
2、/server/util/draf-redis.js
Set method and get public method of redis
3、/server/util/redis-mysql.js

Redistomysqltask method: the method of regularly synchronizing redis data to MySQL data, and the node schedule library is used to achieve timing synchronization
Getdraftpostfrommysql method: query data from MySQL when data does not exist in redis
Cleardraftpostofmysql method: delete data from MySQL and save the article
4、/src/main.js
The browser imports socket.io first, and uses the vue-socket.io and socket.io-client libraries

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
Use websocket to get data from the server and transfer the data to the server for saving

Five, summary

  • In essence, the whole function is the use of websocket, redis and MYSQL, which have been used before and have not been used jointly. It is quite a complete realization of real-time saving of articles
  • Finally, welcome to fork and start

Recommended Today

Manjaro uses SS method (requires nodejs environment)

Just installed manjaro, need to installshadowsocks-qt5+Proxy SwitchyOmega, but the latest Chrome has long blocked the installation of non Google store CRX channels. Here is my solution, which is troublesome but usable. If you are familiar with NPM commands in nodejs, you won’t find it troublesome, because nodejs is used for compilation. Preparation environment: A VPS […]