Skip to content

Connect / Disconnect / ChangeURL anytime and multiple sockets #545

Open
@ptheofan

Description

@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.
  1. 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)
  1. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions