Dynamic rooms Flask Socket.IO

Question

I want to know why I can't add rooms to my rooms list dynamically, when I click "send" on my input:( here's my code:

Flask:

@socketio.on('new_room')
def new_room(data):
room = data["new_room_name"]
print(room)
ROOMS.append(data["new_room_name"])
join_room(data['new_room_name'])
emit('new room received', data, room, broadcast=True)

JS:

// send new room to the server
document.querySelector('#send_newRoom').onclick = () => {
    socket.emit('new_room', {'new_room_name': document.querySelector('#new_room').value}); // This is what you SEND to the server
}

socket.on('new room received', room => { //This is what you RECEIVE from the server
    console.log('room');
    let createdRoom = room.new_room_name

    const li = document.createElement('li');
    li.innerHTML = createdRoom
    li.setAttribute('class','select-room');

    document.querySelector('#rooms').append(li);
    });

HTML:

<div class="col-lg-4 col-md-4" style="background: lightblue;">
        <div>
            <input type="text" id="new_room" placeholder="Type here..." autocomplete="off"> 
            <button type="button" id="send_newRoom">SEND</button>
        </div>
        <H3>ROOMS</H3>
        <ul id="rooms">
            {% for room in rooms %}
                <li class="select-room">{{ room|title }}</li>
            {% endfor %}
        </ul>
    </div>

and this is how my app looks (Doesn't have design): enter image description here

Answer 1

Just change the last line in python function to:

emit('new room received', data, broadcast=True)

https://flask-socketio.readthedocs.io/en/latest/