点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

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

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

代码请戳：

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

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

第二章: 数据动态化处理（localStorage + Vuex），可新增，可编辑

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

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

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

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

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

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

第八章：完结：线上发布

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

本章节主要围绕socket.io做事情，所以没有了解过的，可以戳这里：

Vue.js 如何使用 Socket.IO？

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

Client端

npm install vue-socket.io --save

main.js添加下列代码

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

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 = '' }}

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')})htt

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

解析

1、socket.io监听update-task接收拖动的任务，并把最新要归纳的分组id带回。

2、更新数据

3、更新后查询任务列表，向所有用户广播io.emit()

4、客户端监听update-task-callback消息，得到最新的任务列表数据，并重新渲染页面。

总结

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

代码请戳：

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！