Vue2/3 + VS.ioext with VUEX is not listening server events

[carloslema]

Sorry gang for the primitive question.

I've used VueSocketIOExt several times successfully without using VUEX. I am trying to consolidate data handling with VUEX.

When I add the store to VueSocketIOExt I can't get VUEX to receive the server's response—no console error messages. Bypassing VUEX for socket works as expected.

Tested this on both Vue2 and Vue 3, without any luck.

// node.js server
// ...set up express, cors, http/s etc port 48765

var num = 0
io.on("connection", function (socket) {
  socket.emit("connection", true);

  socket.on("greatVue", function () {
    console.info('greatVue called', num++); // track responses
    socket.emit("server_response", "From Server, yup I am here " + num);
  });
});

Vue main.js

import VueSocketio from 'vue-socket.io-extended';
import io from 'socket.io-client';
Vue.use(VueSocketio, io('http://localhost:48765', { store }));

Store.js

export default new Vuex.Store({
  state: {
    isConnected: false,
    socketMessage: ''
  },

  mutations: {
    SOCKET_CONNECT(state) {
      console.log('SERVER CONNECTED');
      state.isConnected = true;
    },
    SOCKET_SERVER_RESPONSE(state, message) {
      console.log('SERVER RESPONDED', message);
      state.socketMessage = message
    },

    SOCKET_GREAT_VALUE() { // this works
      this._vm.$socket.client.emit('greatVue');
    }
  },

Actions:{
    socket_connect({commit}) {
      console.log('socket connected') // not firing
      commit('SOCKET_CONNECT')
    },

    socket_serverResponse({commit}, message){ // tried, socket_server_response, SOCKET_SERVER_RESPONSE,  SOCKET_server_response, SOCKET_SERVERRESPONSE, SOCKET_serverResponse — Nothing
      console.log('socket_serverResponse', message); // not firing
    },

    socket_greatValue({ commit }) { // component sends event to server 
      commit('SOCKET_GREAT_VALUE')
    }
}

The server's event "server_response" is dispatched, but VueSocketIOExt -> VUEX does not trigger the VUEX action "socket_serverResponse" what I am missing here? Again sorry for the basic question.

Any help would be greatly appreciated

[probil]

Hey @carloslema 👋

Could you make sure that you use socket.io-client version 2.x ? (3 and 4 aren't supported yet)

[carloslema]

@probil thanks for the fast reponse. I downgraded to socket.io-client to 2.3.0, now node's CORS is blocking the connection, which was not happening with 4.0. I am also following @loongmxbt question, which seems related.

[probil]

@carloslema In v2 CORS configurations is a bit different, check the link here:

v2: https://socket.io/docs/v2/handling-cors/ v4: https://socket.io/docs/v4/handling-cors/

You can either use proper parameters for configuration or just remove CORS related config all together - in v2 all connections are allowed by default.

I don't seem these issues are related

[carloslema]

@probil Thanks Max — both socket.io and socket.io-client had to be downgraded to 2.3.

Unfortunately, VUEX keeps ignoring socket events.

Bypassing VUEX works as always. Strange. Ohh well... I'll circle back to moving socket handling within VUEX later. Thanks for your help and such an awesome package!

[probil]

@carloslema Yes. Client's and server's version should match. BTW Vue 3 support is experimental thus I suggest to stick to Vue 2 for now.

Speaking about Vuex, there is probably one more issue left. It's really hard find it without seeing actual code but here is the list of things you can consider:

1. There is a typo in the registration code:

   - Vue.use(VueSocketio, io('http://localhost:48765', { store }));
   + Vue.use(VueSocketio, io('http://localhost:48765'), { store });

   Double check you have correct version in you code. The point is you need to pass store as a 3rd argument to Vue.use() not as 2nd argument to io()

2. Actions are supposed to be lowercased e.g. actions (not Actions, might be a typo)

3. Make sure Vuex can be accessed / used from the component the usual way. There is a slight chance it hasn't been registered properly

4. Check whether socket.io client can receive an event from the server without vue-socket.io-extended. Server implementation of socket.io is not straightforward. You can do so this way: In your main JS file

   
   const socket = io('http://localhost:48765');

socket.on('connect', () => { console.log('Connected to the server from the raw socket.io-client') });

Vue.use(VueSocketio, socket, { store });

Drop me a line if none of the points above help

[carloslema]

@probil Max, that was it.... I was passing {store} as 2nd argument to io(), D'oh! It is working as expected. Thank you so much for your help!

[probil]

You are welcome, @capndave Have a nice day ;)

[SelimAydi]

Hey @carloslema 👋

Could you make sure that you use socket.io-client version 2.x ? (3 and 4 aren't supported yet)

Could you state this in the documentation because it's quite misleading

[probil]

@Vitalynx socket.io-client 3 and 4 are supported (check examples in the repo). There were some breaking changes but as long as you have the same socket.io version on client and server it should work just fine