How to prevent connection until authed?

[busheezy]

I have a home page where I'm not using sockets at all. I'm using this with Vuex. Is there a way to prevent the socket from trying to connect on my home page or until it at least has the auth info in my store? There might be something obvious, it's late.

[busheezy]

I was tired. I just disabled auto connections and connected the sockets manually.

[probil]

Hi, @busheezy Thanks for your issue :)
You are right. You should disable auto connection and connect to socket later (only on correct page, when auth info is in the store, etc)

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

const socket = io('http://socketserver.com:1923', {
  autoConnect: false
});

Vue.use(VueSocketio, socket);

// when everything is ready to connection (correct page, auth info in store, etc)
socket.open();
// or in components
this.$socket.client.open(); // or `this.$socket.open()` for library version 1.x-3.x

more info in official socket.io documentation
https://socket.io/docs/client-api/#socket-open

Let me know is the issue still relevant

[busheezy]

Thanks for everything.

[ALiangLiang]

I have same problem too. Do you ever want to write this scenario on README? e.g. FAQ

[probil]

Yeah, I think it's a good idea, @ALiangLiang
Thanks

[xuejiangjun]

Hi, @busheezy Thanks for your issue :)
You are right. You should disable auto connection and connect to socket later (only on correct page, when auth info is in the store, etc)

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

const socket = io({
  url: 'http://socketserver.com:1923',
  autoConnect: false
});

Vue.use(VueSocketio, socket);

// when everything is ready to connection (correct page, auth info in store, etc)
socket.open();
// or in components
this.$socket.open();

more info in official socket.io documentation
https://socket.io/docs/client-api/#socket-open

Let me know is the issue still relevant

I use options like this

const socket = io('http://socketserver.com:1923', {
   autoConnect: false
});

not

const socket = io({
   url: 'http://socketserver.com:1923',
   autoConnect: false> 
});

i do not know why i use your options is not connect success,
documentation https://socket.io/docs/client-api/#io-url-options
sorry my English not good

[LaKing]

@xuejiangjun is right.

Only the options should be in curly braces.

[probil]

Updated original answer. Thanks @xuejiangjun for notice and @LaKing for check.
Added to FAQ

[cannap]

Hi,
how can i add queryString to the connection when i later use
because i have the token/username later
this.$socket.open({query: ???}) ?

[salsa2k]

@cannap

Try:
this.$socket.io.opts.query = { token: 'your-token-here' };

then

this.$socket.open();

[dedosmedia]

Hi, @busheezy Thanks for your issue :)
You are right. You should disable auto connection and connect to socket later (only on correct page, when auth info is in the store, etc)

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

const socket = io('http://socketserver.com:1923', {
  autoConnect: false
});

Vue.use(VueSocketio, socket);

// when everything is ready to connection (correct page, auth info in store, etc)
socket.open();
// or in components
this.$socket.open();

more info in official socket.io documentation
https://socket.io/docs/client-api/#socket-open

Let me know is the issue still relevant

with autoConnect = false
this.$socket.open() did no worked for me.
I had to use this.$socket.client.open()
Has something changed over the last months or am I doing something wrong?

[probil]

Hi @dedosmedia
Yeah. API was changed a bit recently. I guess we should consider having a Docs site with all the questions up to date with latest API.

What do you think @capndave ?

I will update the code here in the meanwhile

[probil]

Thanks @dedosmedia ,answer updated