Vue-Socket.io的使用步骤

第一步安装依赖

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