NodeJs

Todo List: Socket.io多人协同处理待办事项 – 第七章(第二节)

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

Todo List项目已经接近尾声,很多地方都没有细致的讲解,基本都是以简洁为主,快速的完成一个简单的demo。希望能给小伙伴们带来一些帮助。

代码请戳:Todo List GitHub代码库

Socket.io多人协同处理待办事项

本次《todo list: Vue待办事项任务管理》,分为一下章节,有兴趣的同学可以持续关注。

第一章: 初识(项目搭建、基本功能组件实现)

第二章: 数据动态化处理(localStorage + Vuex),可新增,可编辑

第三章:待办事项自定义分组

第四章:待办事项添加描述图片等信息

第五章:Node + Express 搭建服务端连接Mysql

第六章:Client端与Server端交互,待办任务入库等

第七章:多人协同处理待办事项,权限管理(第1节)

第七章:Socket.io多人协同处理待办事项

第八章:完结:线上发布

初步定义8个章节,实际开发中有可能有所增减。

本章节主要围绕socket.io做事情,所以没有了解过的,可以戳这里:
Vue.js 如何使用 Socket.IO?

Socket.io多人协同处理待办事项

Client端

npm install vue-socket.io --save

main.js添加下列代码

import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
  debug: true,
  // 服务器端地址
  connection: 'http://localhost:3000'
}))

components/list.vue

created() {
  // 接收服务端的信息
  this.sockets.subscribe('update-task-callback', (data) => {
    console.log('update-task-callback', data)
    this.$store.commit(types.M_GET_TASK_GROUP, data)
  })
}
...
methods: {
  endDrag () {
    this.drag = false
    // 之前直接调用接口
    // this.$store.dispatch(types.A_CREATED_TASK, {
    //   group_id: this.current,
    //   item: this.currentTask
    // })
    // 现在用socket 更新
    this.$socket.emit('update-task', {
      group_id: this.current,
      item: this.currentTask
    })
    this.current = ''
  }
}

Server端

npm install --save socket.io

/server/app.js

var app = express()
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection',function(socket) {
  // 接收数据
  socket.on('update-task', function (params) {
    console.log(params)               
    let title = params.item.title;
    let description = params.item.description;
    let enclosure = params.item.imgs;
    let level = params.item.level;
    let group_id  = params.group_id;
    let date = moment().format('YYYY-MM-DD HH:mm:ss');
    let id = params.item.id;
    let csql = params.item.id ? eval('`'+sql.UPDATE_TASK_LIST+'`') : eval('`'+sql.CREATED_TASK_LIST+'`');
    console.log('[SQL:]', csql);
    query(csql, (err, result, fields) => {
      if (err) {
        console.log('[UPDATE_TASK_LIST ERROR]:', err.message)
      }
      query(sql.SELECT_TASK_GROUP, (err, result, fields) => {
        if (err) {
          console.log('[SELECT_TASK_GROUP ERROR]:', err.message)
        }
        // 向所有用户发送数据
        io.emit('update-task-callback', result);
      })
    })
  });
});
...
http.listen(3000, () => {
  console.log('Server running at 3000 port')
})

Socket.io多人协同处理待办事项

解析:
1、socket.io监听update-task接收拖动的任务,并把最新要归纳的分组id带回。
2、更新数据
3、更新后查询任务列表,向所有用户广播io.emit()
4、客户端监听update-task-callback消息,得到最新的任务列表数据,并重新渲染页面。

总结

这里vue-socket.io只用了最简单的功能,其实他也可以和vuex结合使用,后面详细讲解。

代码请戳:Todo List GitHub代码库

(437)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注