个人博客开发系列:文章实时保存

TDon

前言

一般用来写东西的网站都会有一个编辑实时保存的功能。对于使用者来说是一个非常实用的功能。作为一个个人博客来说,虽然用处没那么明显,但是还是想实现一下这个功能,就当是练练手吧。

实现思路

  1. 使用WebSocket来进行浏览器与服务器的实时通信;
  2. 服务端使用Redis来缓存实时编辑的文章(编辑时文章改动频繁,频繁读写数据库操作不是个好的方案);
  3. 服务端使用定时任务(如每天凌晨3点),将Redis缓存的数据存储到MySQL数据库中;
  4. 浏览器端初次进入新增文章页面时,使用WebSocket从服务端获取数据(先从Redis中查找,如果没有则再从MySQL数据库中查找);
  5. 浏览器端初次进入编辑文章页面时,不需要从服务端获取数据;
  6. 使用Vue.js的watch来监听文章的变化,变化时使用WebSocket向服务端传送数据。
  7. 文章保存时清空RedisMySQL中实时保存的数据。

源码

Talk is cheap. Show me the code.

说明

  1. 本功能只是个人博客后台使用,没有多账户体系,所以RedisMySQL中都是保存一条记录。如果需要按不同用户来保存的话,需要自行开发。
  2. 代码比较多,具体的代码就不贴了,有兴趣的可以去我的GitHub上查看源码。这里只说明一下各个文件中代码的用处。

1. /server/util/draft-socketio.js

服务端WebSocket服务,使用了socket.io库。

2./server/util/draft-redis.js

Redissetget的公共方法。

3./server/util/redis-mysql.js

  • redisToMysqlTask:定时同步Redis数据到MySQL数据的方法,使用了node-schedule库。
  • getDraftPostFromMysql: Redis中不存在数据时,在MySQL中查询数据。
  • clearDraftPostOfMysql:从MySQL中删除数据(文章保存后操作)。

4. /src/main.js

浏览器端先引入socket.io,使用了vue-socket.iosocket.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从服务端获取数据,并实时将数据传输到服务端进行保存。

总结

  1. 整个功能其实就是WebSocketRedisMySQL的使用,这几个之前都用过,所以开发起来还是比较容易。最重要的是要先想好解决方案。
  2. 最后照例求一下forkstar
阅读 3.4k

DON的前端分享
前端开发,也了解一些后端的开发。分享个人项目和开发经验。
903 声望
42 粉丝
0 条评论
你知道吗?

903 声望
42 粉丝
文章目录
宣传栏