Installing the plugin asynchronously results in socket listeners not working

[GrigorM]

Hello,
I was trying use the plugin in this scenario:
User authenticates on a server, and after the authentication response is positive, the user connects via socketio. So i do something like this:

this.$http.post("url", dataObject).then((data) => {

    if (data.success) {

        SocketInstance = socketio('http://localhost:3001')

        Vue.use(VueSocketIO, SocketInstance, store)

     }

})

After this i can emit events to the server, but the socket event listeners inside the socket block in components do not work. They do work as expected when i connect to the server in the main.js file, but doing it asynchronously seems to break some things down.

Is this a bug or am i doing something wrong?

[codeofsumit]

got a similar problem where the vuex mutations do not work after waiting for user authentication. Not sure why and it seems hard to debug.
Any way to check the socket instance for this plugin?

[chambber]

I'm working similar to you, creating a connection to the socket after a login with Vuex and not a problem, but I made a connection differently.
I hope this helps you figure out where your problem is.

main.js

import socketIo from 'socket.io-client';
import VueSocketIo from 'vue-socket.io';

import store from './store';

Vue.use(VueSocketIo, socketIo('http://localhost:5000', { autoConnect: false }, store));

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

store.js

import Vue from 'vue';
import Vuex from 'vuex';

import chat from './modules/chat';

Vue.use(Vuex);

export default new Vuex.Store({
  actions: {
    socket_connect = ({ commit }) =>
      commit('SOCKET_CONNECT');
    socket_atualizar = ({ commit }, message) =>
      commit('SOCKET_MESSAGE', message);
  },
  modules: {
    chat,
  },
  strict: true,
});

chat.js

const mutations = {
  SOCKET_CONNECT(state) {
    state.connect = true;
  },
  SOCKET_MESSAGE(state, message) {
    state.messages.push(message);
  },
};

const state = {
  connect: false,
  messages: [],
};

export default {
  state,
  mutations,
};

component.vue

<script>
export default {
  methods: {
    click() {
      // in my case I change the header
      this.$socket.io.opts.transportOptions.polling.extraHeaders.Authorization = 'token';
      this.$socket.open()
    }
  }
}
</script>

[souljessi]

@chambber
component.vue
this.$socket.io.opts.transportOptions.polling.extraHeaders.Authorization = 'token';//what is this?

The original only need to set {autoConnect: false}
Then the component can use 'this.$socket.open()' to make the connection? thank you, brother

[chambber]

This is necessary for me because I authenticate via token on the server.
But to make the connection is as you said.

[oviniciusfeitosa]

Another option, works to me:

socket-client-instance.js

import SocketIO from 'socket.io-client';

const socketServer = `http://${process.env.VUE_APP_WEBSOCKET_HOST}:${process.env.VUE_APP_WEBSOCKET_PORT}`;
const token = localStorage.getItem('token');
const clientSocketOptions = {
    autoConnect: false,
    query: { token },
};

export default SocketIO(socketServer, clientSocketOptions);

Vue Component

this.$socket.io.opts.query.token = token;