Question

In my chat application project, I am trying to broadcast usernames to all the users whenever a new user is connected to a server. and remove a username whenever the user leaves the server. The below is the code which I have tried by going through tutorials. (please check the file.js file which is not showing the desired output)

Chat.cs (Working) –> Implements “Hub” class of SignalR

public class Chat : Hub 
{ 
    /* showing only related content */
    static ConcurrentDictionary<string, User> _users = new ConcurrentDictionary<string, User>();

    public override Task OnDisconnected()
    {            
        var user = _users[Context.ConnectionId]; //user as ConnectionId
        User removedUser; //new class object
        _users.TryRemove(Context.ConnectionId, out removedUser);
        return Clients.All.leave(user, DateTime.Now.ToString()); //dynamic expression
    }

    public void Joined()
    {
        User user = new User(Context.ConnectionId, Clients.Caller.username);
        _users.TryAdd(user.ConnectionID, user);
        Clients.All.joins(user.ConnectionID, user.Name, DateTime.Now); //dynamic expression
    }
}

User.cs (Working)

public class User
{
    public User(string ConnID, string Username)
    {
        Name = Username;
        ConnectionID = ConnID;
    }
    public string Name { get; set; }
    public string ConnectionID { get; set; }
}

file.js (not working)

var chatUsername = window.prompt("Enter Username:", "");  //username
var chat = $.connection.chat;  //connection
//
chat.client.joins = function (ConnectionId, name, Date) {
    ConnectionId = 1; /* given value to just test */
    name = chatUsername;
};

chat.client.leave = function (user, date) {
    user = "";  //making the string empty so that the disconnected user value will be lost.
};

//Here is the connection which calls the "Joined" function of the server (Chat.cs)

What should I write in file.js functions (joins and leave) so that I will get the desired result as I mentioned above. Before asking here, I have gone through this site which is doing the same but including additional javascript files(knockout.js and json) which I dont want to include.(bcos I am new to jquery).

Answer 1

In order to pass UserNames to the client you can take your dictionary and in your joined server side method you could change the SignalR line to be:

Clients.All.joins(_users.Values); //dynamic expression

Then the client version of joins would be:

chat.client.joins = function (users) {
    for(var i = users.length - 1; i >= 0; i--) {
        alert("User Name: " + users[i].Name + "\nUser Connection ID: " + users[i].ConnectionID);
    }
};

Of course you can handle the user information differently than alerting it, but that’s the gist of how to handle the data. Lastly, I’d recommend against passing down the connection ID to everyone because a third party could then easily hijack it.