Connect function doesn't fire unless server is restarted

[yazer79]

Hi,
I am trying to get the Socket: connect function to work, but it doesn't. It only works if the "server" is restarted, then I can see the client console logging "socket connected". I keep reloading the page, the server responds with "socket connected", but the client doesn't do anything at all.

I have vsio-ext client 4.0.4 boot:

import io from 'socket.io-client';
import VueSocketIOExt from 'vue-socket.io-extended';

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

export default async ({ Vue }) => {
  Vue.use(VueSocketIOExt, socket)
}

And on component

sockets: {
    connect: function () {
        console.log('socket connected') // never works unless I restart the server
}

[probil]

Hey @yazer79

The problem might be that your component is being rendered after connection is established. There is no way right now for component to detect whether it is rendered before or after successful connection. Having that would be confusing as we have only one connection per app (not one connection per component)

As a solution you need to a add a check in mounted hook whether the socket is connected already and trigger the code you need to perform. Here is an example:

methods: {
   actionAfterConnection() {
    console.log('socket connected');
   }
},
sockets: {
    connect: function () {
       this.actionAfterConnection() // would be triggered on reconnection
    }    
},
mounted() {
   if(this.$socket.connected) {
      this.actionAfterConnection()    // would be triggered for active connection
   }
}

[probil]

I will reopen the issue if that won't help. So keep me posted

[yazer79]

I don't remember how it was fixed I will try to. Thanks for your reply