preface

The Todo List project is nearing the end, and there is no detailed explanation in many places. Basically, it is simple to finish a simple demo quickly. Hope to bring some help to small partners.

Todo List GitHub code library

This “Todo List: Vue To-do List Task Management”, divided into chapters, interested students can continue to pay attention to.

Chapter 1: Introduction (Project construction, implementation of basic functional components)

Chapter 2: Data dynamic processing (localStorage + Vuex), can be added, can be edited

Chapter 3: To-do list custom grouping

Chapter 4: To-do List Add descriptions, pictures and other information

Chapter 5: Node + Express builds server connection to Mysql

Chapter 6: Client and Server interaction, to-do task entry, etc

Chapter 7: Multi-person collaborative processing of to-do items, authority management

Chapter 8: Socket. IO Multi-tasking tasks

Chapter 8: Closure: Online release

Eight chapters are initially defined, and may be added or reduced in actual development.

How does vue.js use socket. IO?

The Client side

npm install vue-socket.io --save
Copy the code

Main.js adds the following code

import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
  debug: true.// Server address
  connection: 'http://localhost:3000'
}))
Copy the code

components/list.vue

created() {
  // Receive information from the server
  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
    // Call the interface directly before
    // this.$store.dispatch(types.A_CREATED_TASK, {
    // group_id: this.current,
    // item: this.currentTask
    // })
    // Now use socket update
    this.$socket.emit('update-task', {
      group_id: this.current,
      item: this.currentTask
    })
    this.current = ' '}}Copy the code

The Server side

npm install --save socket.io
Copy the code

/server/app.js

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

io.on('connection'.function(socket) {
  // Receive data
  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)
        }
        // Send data to all users
        io.emit('update-task-callback', result); })})}); }); . http.listen(3000.() = > {
  console.log('Server running at 3000 port')})Copy the code

IO listens for update-task to receive a dragged task and returns the latest group ID to the task. Emit IO. Emit () to all users. 4.

conclusion

Vue-socket. IO uses only the simplest functions, but it can also be used with vuex, which will be explained later.

Todo List GitHub code library