Possible to disable auto-connect?

[staghouse]

I've searched around for a solution but can't find anything. I am also new to Vue so if there's a way to do it with Vue itself any direction would be helpful.

Additionally, if we could pass options to do this via the install method that would be great.

[hagata]

I'm looking to solve a similar problem.

It's possible to load the socket connection at a component level–not just with Vue.use() in the main instance. If you're using ES6 modules, you can import in the component and call io() from there.
more info https://stackoverflow.com/a/48067195

This is how I have it working–the modified component from the example: [Edited to fix incorrect implementation]. I'm not a Vue expert, and I don't know if this is the proper way to load a plugin on a component level.

<script>
import Vue from 'vue' // Import Vue for the component–it is not a Global in the Webpack build.
import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
Vue.use(VueSocketIO, SocketInstance)

// Setup the socket.io connection with the vue-socket.io library
const SocketInstance = io() // by default io-client tries to connect to the same host

data () {
    return {
      isConnected: false,
      socketMessage: ''
    }
  },
// rest of the component methods from this projects readme

Still looking for a way to defer a way to call the vue-socket.io plugin from the component until some action is completed by the user, e.g., a click method. Not quite sure how to do this since this plugin (vue-socket.io) requires an socket-io-client instance to initiate. Any thoughts on how to add a plugin when a method is called would be helpful.

Currently, I'm working around this by calling the above component only when I need to establish the connection. This plugin (vue-socket.io) takes a standatd socket.io-client instance, so all standard API options are available. It's possible to setup some kind of validation to refuse the inital connection with query params for example–I don't like this approach.

[Netolas]

Try someting like this:

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

let sck = Socket('http://127.0.0.1:5121',{
reconnectionAttempts : 100,
reconnectionDelay : 500,
reconnectionDelayMax : 1000,
timeout: 1000,
autoConnect: false
})
Vue.use(VueSocketio, sck);

reconnectionAttempts, reconnectionDelay, reconnectionDelayMax, timeout are vars i use for my project porpuse.

[Vsevo1od]

Try in your main.js

Vue.use(new VueSocketIO({
    connection: YOUR_CONNECTION,
    options: { autoConnect: false }
}));

and in components call this.$socket.connect() and this.$socket.disconnect() when needed

[TrevinAvery]

I tried @Vsevo1od's answer, but found VueSocketIO didn't have an options parameter as they showed. I had to pass the autoConnect: false to the options of the SocketIO object.

import SocketIO from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
    connection: SocketIO(location.origin, {
        path: '/socket-io',
        autoConnect: false,
    })
}))

this.$socket.connect() and this.$socket.disconnect() worked as described to enable and disable the socket manually.