How can I accomplish this with SocketIO?

[choff5507]

Hey everyone. I am looking for a little insight on what I am trying to accomplish with SocketIO.
I am developing an app in Node/Express with VueJS as the front end framework.

So, I have users who will submit files via a REST API endpoint. The files may take some time to process so I would like to notify the client when the processing is done via Socket IO. This works fine with one caveat that I have noticed and I am looking for a work around on. The issue that I am trying to avoid is that a new Socket ID is issued everytime the VueJS component refreshes or a user navigates away to another component (page). This means I can no longer address the emit to the user who submitted it because the socket ID has changed.

So give more detail I am importing the socket like this in my Vue JS component:
import { socket } from "../service/socket";

My socket.js file looks like this:

import { io } from "socket.io-client";
import { useAuthStore } from "../store/store.js";

const authStore = useAuthStore();

let socket = io.connect('http://localhost:3000')

//This will store the socket ID in the authStore upon connection. 
// Used in other components so that a specific user can be targeted. 
socket.on('setSocketID', (data) => {
   authStore.socketID = data
   console.log(authStore.socketID)
  })  

export { socket }

So, my thoughts are either to only have one instantiation of the socket (singleton?) or make it some other way. Im open to any suggestions on how I could accomplish this if anyone has any. Im not sure if I am missing something simple, or if this is more of an issue of how I am importing the file in each component vs. simply importing it once and thereby maintaining the connection from that point forward. Basically, I am trying to get a user a socket ID assigned upon login and have it remain the same until the user logs out.

Again, open to any ideas on thank you in advance!

[qiulang]

I have a vue app does the similar thing as you described, "a user a socket ID assigned upon login and have it remain the same until the user logs out." So I only have one instantiation of the socket (yes, singleton) as you described too.

So how did you hit the situation "a new Socket ID is issued everytime the VueJS component refreshes or a user navigates away to another component" ? This will only happen (in my case) when users refresh browser.