How can I avoid creating a new session when a user enters the same url and instead lets the new user join the host session? - node.js

Question

I am trying to make an application which lets the first person to enter the url navigate to his specific hostId. The next person who comes to the same url is supposed to join the "hosts" session. This works, but it simultaneously creates a new session with the new user while also pushing the user to the hosts session. I do think it has something to do with the code where I am saying: "If (!host) { socket.emit("host:joined") }." And since the second user's host is "null" at the first render it also calls for emit("host:joined"), instead of only the "socket.emit("user:joined") (which is in the StartPage component).
How can the second user ONLY join the host session, without creating a new session?
const socket = socketio.connect(import.meta.env.VITE_APP_SOCKET_URL)
function App() {
const [host, setHost] = useState(null)
const [loading, setLoading] = useState(true)
const [showModal, setShowModal] = useState(false)
const [queueList, setQueueList] = useState([])
useEffect(() => {
if (!host) {
socket.emit("host:joined")
}
console.log("socket.id", socket.id)
socket.on("host:joined", (hostId) => {
setHost(hostId)
setLoading(false)
})
socket.on("user:joined", (id) => {
console.log("user joined session:", id)
})
socket.on("playlist", (data) => {
setQueueList(data)
})
if (host === undefined) {
socket.emit("disconnect")
}
console.log("HOST", host)
return () => {
console.log("Cleaning up")
socket.off("host:joined")
socket.off("disconnect")
socket.off("playlist")
}
}, [host, queueList])
return (
<div className="App">
{loading && <LoadingSpinner />}
<Routes>
<Route
path="/:id"
element={
<StartPage
socket={socket}
host={host}
queueList={queueList}
setShowModal={setShowModal}
showModal={showModal}
/>
}
/>
{host && <Route path="/" element={<Navigate to={`/${host}`} />} />}
</Routes>
</div>
)
}
export default App
Startpage component:
const StartPage = ({ socket, host, queueList, setShowModal, showModal }) => {
const { id } = useParams()
useEffect(() => {
if (id !== socket.id) {
socket.emit("user:joined", id)
}
}, [id])
return (
<>
</>
)
}
export default StartPage
Socket_controller:
let io = null
let sessions = []
// Create a session when host enters the site
const handleConnect = function (id) {
console.log("ID", id)
if (!id) {
console.log("Host joined with id:", this.id)
let session = {
id: this.id,
playlist: [],
users: [],
}
if (sessions.find((session) => session.id === this.id)) {
return
} else {
sessions.push(session)
this.join(session)
}
io.to(session).emit("host:joined", this.id)
} else {
console.log("User joined with id:", this.id)
const session = sessions.find((session) => session.id === id)
console.log("session", session)
session.users.push(this.id)
this.join(session)
io.to(session).emit("host:joined", id)
console.log("sessions", sessions)
}
}
/**
* Export controller and attach handlers to events
*/
module.exports = function (socket, _io) {
io = _io
// handle host connect
socket.on("host:joined", handleConnect)
socket.on("user:joined", handleConnect)
}
Backend and frontend consoles:
I have tried many different things, such as using a loadingspinner while host i loading. I've tried refactoring both in the controller and on the frontend. The positive thing is that it works as intended visually, which means that the two users are on the same session and can share information. However, I can see in the code that it is not corrent as new sessions are created, and also the second user is joining twice.