Connect / Disconnect / ChangeURL anytime and multiple sockets

[ptheofan]

I know this has been referenced a lot and found a number of duplicates each asking for a tiny bit of each of a major feature upgrade that was missing also from the original vue-socket-io as well.

Proposal

Specs:

1. Multiple socket-io connections (multiple servers)
   • It is very common that we need to connect to multiple different servers each server for a different purpose.
2. Connection string at runtime
   • We do not always have a fixed url.
   • We normally need to supply a jwt auth token during connection which is available only after user login.
   • I do not want to stay connected when I no longer need the connection (ie. user navigated to different page)
3. Protect the app from sending messages that will never arrive since not already connected.

Proposed solution: Out of the top of my head, allow "naming" and dynamically creating clients. This could look like the following.

Vue.use(...., sockets: [
  { name: 'chat', ... }, { name: 'notifs', ... }, { name: 'coins', ...}
]);

This should generate socketio wrapper objects something like

this.$socket.chat
this.$socket.notifs
this.$socket.coins

The wrapper objects hold the socketio state and reflect it.

SocketContainer {
  #socket = null;
  #url = null;
  #connected = false;

  // when connected, bind to socketio events and update local state accordingly
  // if url is provided in the initial options establish connection (backwards compatibility)
  // have a connect(url) method
  // have a disconnect(url) method
}

Is anyone with time available strong enough with vuejs2 to take it on? I would very much like to help however my vuejs knowledge is not as extended so would require a lot of help when it comes to the vuejs plugin tricks.

This is of course an RFC so please feel free to contribute to the proposal.