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

[Nicholaiii]

If you use jwt, with socketio-jwt you can just connect like normal and emit authenticate when ready. No work-arounds neccessary.

[CooperJiang]

嗨，@busheezy 谢谢你的问题 :) 你是对的。您应该禁用自动连接并稍后连接到套接字（仅在正确的页面上，当身份验证信息在商店等时）

 从'vue-socket.io-extended'导入VueSocketio  ；从'socket.io-client'导入io ； 
   

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

视图。使用（VueSocketio ， 套接字）；

// 当一切准备好连接时（正确的页面，商店中的身份验证信息等）
socket . 打开( ) ; 
// 或在组件中
this . $socket 。客户。打开( ) ;  // 或 `this.$socket.open()` 库版本 1.x-3.x

官方 socket.io 文档中的更多信息 https://socket.io/docs/client-api/#socket-open

让我知道这个问题是否仍然相关

What if you can't get the token in the initialization phase using nuxt? When the login is successful, you can't put the token in the parameters of the IO connection