multiple group chat rooms in asp.net using SignalR

Question

I am trying this code for multiple chat rooms like stackoverflow, but my code working for only one chat room group

Code is here shown:

div id="header">

SignalR Chat Room

</div>

<br />

<br />

<br />

<div id="divContainer">

<div id="divLogin" class="login">

<div>

Your Name:<br />

<input id="txtNickName" type="text" class="textBox" />

</div>

<div id="divButton">

<input id="btnStartChat" type="button" class="submitButton" value="Start Chat" />

</div>

</div>

<div id="divChat" class="chatRoom">

<div class="title">

Welcome to Chat Room [<span id='spanUser'></span>]

</div>

<div class="content">

<div id="divChatWindow" class="chatWindow">

</div>

<div id="divusers" class="users">

</div>

</div>

<div class="messageBar">

<input class="textbox" type="text" id="txtMessage" />

<input id="btnSendMsg" type="button" value="Send" class="submitButton" />

</div>

</div>

<input id="hdId" type="hidden" />

<input id="hdUserName" type="hidden" />

</div>

JavaScript Code:

Hide Expand Copy Code

<script type="text/javascript">

$(function () {

setScreen(false);

// Declare a proxy to reference the hub.

var chatHub = $.connection.chatHub;

registerClientMethods(chatHub);

// Start Hub

$.connection.hub.start().done(function () {

registerEvents(chatHub)

});

});

function setScreen(isLogin) {

if (!isLogin) {

$("#divChat").hide();

$("#divLogin").show();

}

else {

$("#divChat").show();

$("#divLogin").hide();

}

}

function registerEvents(chatHub) {

$("#btnStartChat").click(function () {

var name = $("#txtNickName").val();

if (name.length > 0) {

chatHub.server.connect(name);

}

else {

alert("Please enter name");

}

});

$('#btnSendMsg').click(function () {

var msg = $("#txtMessage").val();

if (msg.length > 0) {

var userName = $('#hdUserName').val();

chatHub.server.sendMessageToAll(userName, msg);

$("#txtMessage").val('');

}

});

$("#txtNickName").keypress(function (e) {

if (e.which == 13) {

$("#btnStartChat").click();

}

});

$("#txtMessage").keypress(function (e) {

if (e.which == 13) {

$('#btnSendMsg').click();

}

});

}

function registerClientMethods(chatHub) {

// Calls when user successfully logged in

chatHub.client.onConnected = function (id, userName, allUsers, messages) {

setScreen(true);

$('#hdId').val(id);

$('#hdUserName').val(userName);

$('#spanUser').html(userName);

// Add All Users

for (i = 0; i < allUsers.length; i++) {

AddUser(chatHub, allUsers[i].ConnectionId, allUsers[i].UserName);

}

// Add Existing Messages

for (i = 0; i < messages.length; i++) {

AddMessage(messages[i].UserName, messages[i].Message);

}

}

// On New User Connected

chatHub.client.onNewUserConnected = function (id, name) {

AddUser(chatHub, id, name);

}

// On User Disconnected

chatHub.client.onUserDisconnected = function (id, userName) {

$('#' + id).remove();

var ctrId = 'private_' + id;

$('#' + ctrId).remove();

var disc = $('<div class="disconnect">"' + userName + '" logged off.</div>');

$(disc).hide();

$('#divusers').prepend(disc);

$(disc).fadeIn(200).delay(2000).fadeOut(200);

}

chatHub.client.messageReceived = function (userName, message) {

AddMessage(userName, message);

}

chatHub.client.sendPrivateMessage = function (windowId, fromUserName, message) {

var ctrId = 'private_' + windowId;

if ($('#' + ctrId).length == 0) {

createPrivateChatWindow(chatHub, windowId, ctrId, fromUserName);

}

$('#' + ctrId).find('#divMessage').append('<div class="message"><span class="userName">' + fromUserName + '</span>: ' + message + '</div>');

// set scrollbar

var height = $('#' + ctrId).find('#divMessage')[0].scrollHeight;

$('#' + ctrId).find('#divMessage').scrollTop(height);

}

}

function AddUser(chatHub, id, name) {

var userId = $('#hdId').val();

var code = "";

if (userId == id) {

code = $('<div class="loginUser">' + name + "</div>");

}

else {

code = $('<a id="' + id + '" class="user" >' + name + '<a>');

$(code).dblclick(function () {

var id = $(this).attr('id');

if (userId != id)

OpenPrivateChatWindow(chatHub, id, name);

});

}

$("#divusers").append(code);

}

function AddMessage(userName, message) {

$('#divChatWindow').append('<div class="message"><span class="userName">' + userName + '</span>: ' + message + '</div>');

var height = $('#divChatWindow')[0].scrollHeight;

$('#divChatWindow').scrollTop(height);

}

function AddDivToContainer($div) {

$('#divContainer').prepend($div);

$div.draggable({

handle: ".header",

stop: function () {

}

});

}

</script>

SignalR C# Code:

Hide Expand Copy Code

public class ChatHub : Hub

{

#region List of Data Member

static List<UserDetail> ConnectedUsers = new List<UserDetail>();

static List<MessageDetail> CurrentMessage = new List<MessageDetail>();

#endregion

#region Send, recieve and broadcast message methods

public void Connect(string userName)

{

// To get the clients connected connection ID's

var id = Context.ConnectionId;

if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)

{

ConnectedUsers.Add(new UserDetail { ConnectionId = id, UserName = userName });

// send to caller

Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);

// send to all except caller client

Clients.AllExcept(id).onNewUserConnected(id, userName);

}

}

// To send message to all the connected clients

public void SendMessageToAll(string userName, string message)

{

// store last 100 messages in cache

AddMessageinCache(userName, message);

// Broad cast message

Clients.All.messageReceived(userName, message);

}

public void SendPrivateMessage(string toUserId, string message)

{

string fromUserId = Context.ConnectionId;

var toUser = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == toUserId);

var fromUser = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == fromUserId);

if (toUser != null && fromUser != null)

{

// send to

Clients.Client(toUserId).sendPrivateMessage(fromUserId, fromUser.UserName, message);

// send to caller user

Clients.Caller.sendPrivateMessage(toUserId, fromUser.UserName, message);

}

}

public override System.Threading.Tasks.Task OnDisconnected()

{

var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);

if (item != null)

{

ConnectedUsers.Remove(item);

var id = Context.ConnectionId;

Clients.All.onUserDisconnected(id, item.UserName);

}

return base.OnDisconnected();

}

#endregion

#region private Messages send to individual

private void AddMessageinCache(string userName, string message)

{

CurrentMessage.Add(new MessageDetail { UserName = userName, Message = message });

if (CurrentMessage.Count > 100)

CurrentMessage.RemoveAt(0);

}

#endregion

}

Two Other Classes:

Hide Copy Code

public class MessageDetail

{

public string UserName { get; set; }

public string Message { get; set; }

}

Hide Copy Code

public class UserDetail

{

public string ConnectionId { get; set; }

public string UserName { get; set; }

}

Please any one tell me right solution to implement chat server like stackoverflow.