vue-socket.io

web

🚀 Installation

    npm install vue-socket.io --save

Using Connection String

  //main.js

  import VueSocketIO from 'vue-socket.io';

  Vue.use(new VueSocketIO({
     debug: true,
     connection: 'http://metinseylan.com:1992', //链接后端接口号
  }))

🌈 Component Level Usage If you want to listen socket events from component side, you need to add sockets object in Vue component, and every function will start to listen events, depends on object key

   //vue

sockets: {
        connect: function () {
            console.log('socket connected')
        },//链接后端chat文件 await this.socket.emit('res', `${count}`)
        res: function (data) {
            this.arr.forEach(element => {
                if(element.id===data.id){
                    element.news1 = data.news1
                }
            });
          console.log(data)
        }
    },
    methods || mounted : { //方法或挂载完毕
            this.$socket.emit('chat', id)
            // 连后端router路由
    }

egg-socket.io

Install

$ npm i egg-socket.io --save

Change ${app_root}/config/plugin.js to enable Socket.IO plugin:

//config/plugin.js
 exports.io = {
  enable: true,
  package: 'egg-socket.io',
};

Configure Socket.IO in ${app_root}/config/config.default.js:

exports.io = {
  init: { }, // passed to engine.io
  namespace: {
    '/': {
      connectionMiddleware: [],
      packetMiddleware: [],
    },
  },
};

Usage Directory Structure

app
├── io
│   ├── controller
│   │   └── chat.js
│   └── middleware
│       ├── auth.js
│       ├── filter.js
├── router.js
config
 ├── config.default.js
 └── plugin.js

Middleware middleware are functions which every connection or packet will be processed by.

Connection Middleware

app/io/controller/chat.js

module.exports = app => {
  class Controller extends app.Controller {
    async ping() {
      const id = this.ctx.args[0];
      let result = await this.ctx.service.home.sum(id);//链接service/home里的方法找到那项
      result[0].news1++ //所用变量++
      let res = await this.ctx.service.home.sumUp({id,news:result[0].news1});//去更新那一项
      await this.ctx.socket.server.emit('res',{news1:result[0].news1,id});//将数据传回前端
    }
  }
  return Controller
};
 

next, config the router at app/router.js

app.io.route('chat', app.io.controller.chat.ping);//路由