一般用来写东西的网站都会有一个编辑实时保存的功能。对于使用者来说是一个非常实用的功能。作为一个个人博客来说,虽然用处没那么明显,但是还是想实现一下这个功能,就当是练练手吧。
Talk is cheap. Show me the code.
- 本功能只是个人博客后台使用,没有多账户体系,所以 Redis 和 MySQL 中都是保存一条记录。如果需要按不同用户来保存的话,需要自行开发。
- 代码比较多,具体的代码就不贴了,有兴趣的可以去 我的 GitHub 上查看源码。这里只说明一下各个文件中代码的用处。
服务端 WebSocket 服务,使用了 socket.io 库。
Redis 的 set 和 get 的公共方法。
: Redis 中不存在数据时,在 MySQL 中查询数据。
- getDraftPostFromMysql
:从 MySQL 中删除数据(文章保存后操作)。
- clearDraftPostOfMysql
浏览器端先引入 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'
- }));
使用 WebSocket 从服务端获取数据,并实时将数据传输到服务端进行保存。
来源: https://juejin.im/post/5a3f747e6fb9a045211eec09