第一步安装依赖
npm install vue-socket.io --save
第二步在main.js中引入
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(
new VueSocketio({
debug: true , // debug调试,生产建议关闭
connection: socketio(window.g.apiUrl),
})
)
第三步在组件中使用推送消息给后台,连接socket,
sockets: {
//查看socket是否渲染成功
connect() {
console.log("链接成功");
},
disconnect(){
console.log("断开链接");
},//检测socket断开链接
reconnect(){
console.log("重新链接");
},
//客户端接收后台传输的socket事件
message(data) {
this.$notify({
title: '新消息',
message: data,
type: 'warning',
duration:10000
});
console.log("data", data);//接收的消息
}
},
客户端往服务端发消息
this.$socket.emit("register","客户端需要帮助了" );
接收服务端的信息
init(){
//接收服务端的信息
this.sockets.subscribe('testRoom', (data) => {
console.log('接收的信息有:',data)
})
}
vuex的使用
state: {
message:''
},
mutations: {
SOCKET_message:(state, data)=>{
state.message = data;
}
}
详细讲解见官方github https://github.com/MetinSeylan/Vue-Socket.io