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


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('');
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');
  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 () {'[%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

Websocket service on the server side, using Library
Set method and get public method of redis

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
The browser imports first, and uses the and libraries

import VueSocketio from '';
import socketio from '';

Vue.use(VueSocketio, socketio('http://localhost:9000', {
  path: '/testsocketiopath'

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