Question

I created a simple chat application which broadcasts all the connected usernames to all the users who are connected to a server. The list of usernames will be refreshed whenever a new user is connected.

My problem is that.. The list of connected users is showing good only to the newly connected user and the others, the list is full of duplicate usernames as you can see in the below image:

I dont understand why this is happening.. To make it clear to understand, I am even clearing the div showUsernames in which the list of usernames are being displayed.

Please have a look at the below code which is related to this problem. (as the users are increasing the list for the first connected user is increasing too, then second, third, fourth…)

chat.client.joins = function () {

    //calling the server side method "GetConnectedUsers"
    //The return value of the method is stored in a variable "users"
    chat.server.getConnectedUsers().done(function (users) {
        //clearing the div, to fill it again 
        $('#showUsernames').val('');
        console.log(users.length);
        //calling each username stored in a static dictionary on server side using for loop
        for (var i = 0; i < users.length; ++i) {
            $('#showUsernames').append('<li>' + users[i].Name + '</li>');
        }
    });
};

Answer 1

You’re not checking for already connected users.

The quickest way around this would be to empty the list first.

$('#showUsernames').empty();
for (var i = 0; i < users.length; ++i) {
  $('#showUsernames').append('<li>' + users[i].Name + '</li>');
}

line 72 of files.js

EDIT: I now see you are attempting to clear the list using .val(''). This won’t work, as .val() is only meant for input elements etc. .empty() would work here, as shown above.

So, line 70 of files.js – switch .val('') with .empty()