第一步安装依赖
npm install vue-socket.io --save
第二步在main.js中引入
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://metinseylan.com:1992',
vuex: {
store,
actionPrefix: 'SOCKET_', //为vuex设置的两个前缀
mutationPrefix: 'SOCKET_'
},
options: { path: "/my-app/" } //Optional options
}))
第三步,在组件中使用推送消息给后台,连接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","客户端需要帮助了" );
vuex的使用
state: {
message:''
},
mutations: {
SOCKET_message:(state, data)=>{
state.message = data;
}
}
详细讲解见官方github https://github.com/MetinSeylan/Vue-Socket.io