最詳細的vue-socket.io用法

第一步安裝依賴

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 github.com/MetinSeylan…