node+koa+vue+soket 的使用

socket 是一种双向通信协议，可以实现当第一个 HTTP 请求建立 TCP 连接后，之后的请求都不用再发 HTTP 请求了，socket 分为服务端和客户端，双方都可主动互发或接收数据。

socket 服务端的使用

const Koa = require('koa');
const http = require('http');
const app = new Koa();
const SocketIO = require('socket.io');
const socketioPath = '/testsocketiopath';

let initSocket = (server) => {
  console.log('init websocket');
  let socketHandle = SocketIO(server, {
    serveClient: true,
    path: socketioPath
  });
  socketHandle.on('connection', (socket) => {
    console.log('socket connected');
    console.log(socket.id);
    socket.on('disconnect', () => {
      console.log('我正在执行服务端的disconnect，我的id是', socket.id);
    });
    socket.on('save', async (data) => {
      console.log('我正在执行服务端的save，我正在保存的数据是', data);
      socket.emit('save', 'save');
    });
    socket.on('get', async () => {
      let data = '我是服务端获取到的数据';
      console.log('我正在执行服务端的get，我获取到的数据是', data);
      socket.emit('get', data);
    });
    socket.on('clear', async () => {
      console.log('我正在执行服务端的clear，点击按钮了，我要情况数据了');
      socket.emit('clear', true);
    });
  });
};
app.use(async (ctx) => {
  ctx.body = 'websoket';
});
const server = http
  .createServer(app.callback())
  .listen(1111)
  .on('listening', () => {
    console.log('listen', 1111);
  });
initSocket(server);

• save是保存数据的协议，接收客户端发过来的数据，可以实时保存记录的文章，先存在 redis 中，然后一段时间存在数据库中；get是获取数据，在获取数据后，可以发向客户端；clear是清除数据，可以清空 redis 的数据和 mysql 的数据。
• 使用 socket 进行通信的时候，记着要加一个通道，就是/testsocketiopath

socket 客户端的使用

客户端是 vue 开发的，依赖两个包"vue-router": "^3.0.1", "vue-socket.io": "^2.1.1-a"，注意版本。

<template>
  <div class="">
    <p>从websoket服务端拿来的数据是：{{serverData}}</p>
    <p>{{input}}</p>
    <input type="text" v-model="input" />
    <button @click="submit">submit</button>
  </div>
</template>

export default {
  name: 'Websocket',
  data() {
    return {
      input: '',
      serverData: ''
    };
  },
  methods: {
    submit() {
      this.input = '';
      this.$socket.emit('clear');
    },
    getData() {
      this.$socket.emit('get');
    }
  },
  watch: {
    input(val) {
      this.$socket.emit('save', val);
    }
  },
  sockets: {
    connect: function() {
      console.log('socket connected');
    },
    get(val) {
      this.serverData = val;
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};