I have this chat app that I'm working on for a school project, and I need to improve it a little bit since it is pretty basic and simple. How can I make it so users can choose the room where they want their messages to be sent to? As a start, I created 4 room buttons that change the window.location.href (for example, if you click on the "room1" button, it changes the link to "http://127.0.0.1:5500/Client/index.html#room1", this way I can grab the room name and use it later, but I'm not sure if it is the right approach so I'll just change it if suggested). What would be the next steps?

Client side:

 //This changes the link so I can grab the room name when needed
 room1Btn.addEventListener('click', () =>{
        window.location.href='#room1';      
    })


 //This sends the message to the server when clicking on the Submit button
 sendBtn.addEventListener('click', () =>{
        sendMessage();
        })
 function sendMessage(){
        if(messageInput.value === ""){
            return;
        } else {
            const text = messageInput.value;
            socket.emit('message', text);
            socket.emit('sendName', name);
                       
        //This function displays the message
        messageDisplay();
        }
    }

Server side:

io.on('connection', (socket) => { 
 
        //Sends the message to the clients
        socket.on('message', (message) => {
            socket.broadcast.emit('message', `${message}`);        
        });
});