🚀 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路由
}
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);//路由