0

This is a weird one, so I've recorded a short video to better illustrate the problem.

As an additional feature to my chat app I have a panel on the right that displays the users currently on the selected channel. This works in the following manner:

  • whenever a user selects a channel, the client emits a broadcast to the server with the channel and the user that selected it, and afterwards it sends a post request to get the chat history from that channel, this is the relevant javascript code:
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

    socket.on('connect', () => {
        socket.emit('submit_userList', {'channel': sel, 'user': username});    
    }); 

    // load chat history from server 
    const request = new XMLHttpRequest();
    
    request.open('POST', '/load_chat');

    // Callback function for when request completes
    request.onload = () => {

        // Extract JSON data from request
        const data = JSON.parse(request.responseText);

        // Update the chat history window
        if (data.chan_history.length > 0) {
            data.chan_history.forEach(function(item) {
                create_chat(item);
            });
        }
    }

    // Add data to send with request
    const data = new FormData();
    data.append('channel', sel);

    // Send request
    request.send(data);
    return false;       
  • on the server side, when the emit event described above is received, I first remove the user from the channel where he previously was and then add him to the new channel, after which I broadcast a list with all the channels and their users (the emit is called "announce_userlist") - I'm logging this list on the javascript console and it is received correctly

  • finally, on the client side I have a socket.on listener for the "announce_userlist" that iterates over the received data and when the channel in the data matches the current selected channel on the client, updates the user list on the right.

            console.log(data);
            data.channels.forEach(function(item) {
                if (item.name == curr_chan) 
                {
                    item.curr_users.forEach(function(user) {
                        const link = document.createElement('a');
                        link.innerHTML = user;
                        document.querySelector('#users').appendChild(link);
                    });
                }
            });
        }

This all works fine for a while, but if I change the channels a few times in a row, it stops updating the user list and the channels/user list is not longer logged in the javascript console. Initially there is no error in the flask logs, but after half a minute or so I get some 400 errors in both GET and POST request.

I'm very lost as to how to troubleshoot this, since it works fine for a while so the logic seems correct, but I'm sure I'm missing something or doing something the wrong way.

Any help on how to go about troubleshooting this issue would be greatly appreciated!

You must log in to answer this question.

Browse other questions tagged .