songEagle開発シリーズ:ブログ記事をリアルタイムで保存する方法

一、前に書く

文章のリアルタイム保存を実現するにはどうすればいいですか?一般的に文章を書くブログを書くサイトにはこの機能点があり、ユーザーがうっかり退出した場合のデータの保存を保証し、このようなインタラクションはユーザーの使用心理学に合っている.ユーザーにとってこれは非常に実用的な機能であり、ブログとしてはこれがあればいいのではないでしょうか.ははは^^;

二、実現の構想

1つの機能の実現、あなたのプログラミングの構想はとても重要で、あなたのcodingの前の設計を決定して、構想はあなたのプログラミングの設計です.

webSocketを使用してブラウザとサーバとのリアルタイム通信

を行う.

サービス側はredisを使用してリアルタイムの編集の文章をキャッシュします.編集時に文章が頻繁に変更されるため、頻繁な読み書きデータベースは科学的で合理的な解決策

とは言えません.

サービス側はタイミングタスクを使用し、現在設定されているのは毎日午前3時であり、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);
    });
  });
};

四、方法説明

現在、個人ブログのバックグラウンドで使用されているのは、1つのアカウントしかなく、マルチアカウントシステムが追加されていないため、redisのmysqlには1つの記録しか残っていません.その後、暇があれば徐々にマルチアカウントシステム

を追加します.

に係るモジュール及び説明

1、/server/util/draft-socketio.jsサービス側websocketサービス、socketを使用ioライブラリ2、/server/util/draf-redis.jsredisの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

を歓迎します