Setting up dynamic chat rooms in FlaskSocketIO chat

Question

I want to let user's of my mini chat to create their rooms dynamically. For now i got const in flask server app:

# Predefined rooms for chat
ROOMS = ["Lounge", "news", "games", "coding", "food", "cars"]

And user join/leave routes are in flask:

@socketio.on('join')
def on_join(data):
    username = data["username"]
    room = data["room"]
    join_room(room)
    # Notofication about new user joined room
    send({"msg": username + " has joined the " + room + " room."}, room=room)

@socketio.on('leave')
def on_leave(data):
    leave_room(data['room'])
    # Notification about leaving users
    send({'msg': data['username'] + " has left the " + data['room']}, room=data['room'])

And on js. side its like:

// Select a room
document.querySelectorAll('.select-room').forEach(p => {
    p.onclick = () => {
        let newRoom = p.innerHTML
        // Check if user already in the room
        if (newRoom === room) {
            msg = `You are already in ${room} room.`;
            printSysMsg(msg);
        } else {
            leaveRoom(room);
            joinRoom(newRoom);
            room = newRoom;
        }
    };
});

// Trigger 'join' event
    function joinRoom(room) {
        // Join room
        socket.emit('join', {'username': username, 'room': room});

// Trigger 'leave' event if user was previously on a room
    function leaveRoom(room) {
        socket.emit('leave', {'username': username, 'room': room});

How i can let users, to join rooms they creating dynamicly?

Is this a problem with the JavaScript UI changes required to select a custom room, or is it something specific with the Socket.IO server? — Miguel Grinberg, Jul 31 '19 at 09:44
@Miguel i think in both, i dont have any idea how to let users to create dynamic rooms on both sides — Szegerege, Jul 31 '19 at 10:00
The part that I can answer is the Socket.IO side. This is simple, just use the desired room name. Rooms are created the first they are used, so the only thing you need to do to create a room is have someone join it. — Miguel Grinberg, Jul 31 '19 at 14:31
I think your functions are missing a closing curly brace... I hope that it isn't like that in your real code. — Nv7, Aug 04 '19 at 02:18

score 3 · Answer 1 · answered Aug 04 '19 at 02:20

Maybe you could do something like this for your server-side:

@socketio.on('join')
def on_join(data):
    username = data["username"]
    room = data["room"]
    join_room(room)
    # Notofication about new user joined room
    send({"msg": username + " has joined the " + room + " room."}, room=room)

@socketio.on('leave')
def on_leave(data):
    leave_room(data['room'])
    # Notification about leaving users
    send({'msg': data['username'] + " has left the " + data['room']}, room=data['room'])

@socketio.on('new_room')
def new_room(data):
    ROOMS.append(data['new_room_name'])
    room = data['new_room_name']
    username = data['username']
    join_room(data['new_room_name'])
    # Notification about new user joined room
    send({"msg": username + " has created the " + room + " room."}, room=room)

and client-side:

// Select a room
document.querySelectorAll('.select-room').forEach(p => {
    p.onclick = () => {
        let newRoom = p.innerHTML
        // Check if user already in the room
        if (newRoom === room) {
            msg = `You are already in ${room} room.`;
            printSysMsg(msg);
        } else {
            leaveRoom(room);
            joinRoom(newRoom);
            room = newRoom;
        }
    };
});

// Trigger 'join' event
    function joinRoom(room) {
        // Join room
        socket.emit('join', {'username': username, 'room': room});
    }

// Trigger 'leave' event if user was previously on a room
    function leaveRoom(room) {
        socket.emit('leave', {'username': username, 'room': room});
    }

// Trigger this event when a new room needs to be created
    function newRoom(room) {
        socket.emit('new_room', {'username': username, 'room': room});
    }

I have not tested this code, so please forgive me if there is a syntax error, or it just doesn't work, but I believe it should.

Setting up dynamic chat rooms in FlaskSocketIO chat

1 Answers1

Linked