SignalR Chat Plug Play EnjoyHey as per my promise and continuation to my previous SignalR To Rescue article here I present the more, in-depth concepts and overview of Chat application build over SignalR and asp.net.
For those who are novice to SignalR or have not read my previous post about basic infrastructure and overview and notification sample of SignalR are advised to go through this post first.
Coming straight to the point below is the overview of the chat module that you will build step by step while progressing this post
- It uses SignalR infrastructure as the base.
Used for coding “SRChatServer” server hub and “SRChatClient” client hub.
- It uses JQuery version 1.8.2
Used for all the power pact code on “SRChatClient” client hub
- It uses JQuery Template based binding mechanism for creating UI on client as part of best practice.
Used for binding the json data coming from “SRChatServer” methods and binding it to templates to generate the html based UI quickly
- It uses JQuery Dialog Extension from crab community at http://code.google.com/p/jquery-dialogextend/. Thanks a ton guys for such a beautiful and sleek master piece.
Used for showing the minimizable and movable dialog boxes for each chat instances with different users.
Brief Architecture Overview
Step 1) Create the asp.net web application project and install the SignalR infrastructure. Please refer SignalR to Rescue for basic configuration
Step 2) Create a serializable class named “MessageRecipient“. This class would act as an object for the users connecting to server hub. The reason for marking it serializable is to make easy transfer across the ajax request easily.
[sourcecode language="csharp"]
[Serializable]
public class MessageRecipient
{
publicMessageRecipient()
{
chatRoomIds = new List();
}
public string messageRecipientId { get; set; }
public string messageRecipientName { get; set; }
public string connectionId { get; set; }
public ListchatRoomIds { get; set; }
}
[/sourcecode]
Step 3) Create a serializable class named “ChatRoom “.This class would act as a bridge between the users who want to chat with each other. The same concept can be enhanced for providing Group Chat feature to this module with few lines of code.
[sourcecode language="csharp"]
[Serializable]
public class ChatRoom
{
public string chatRoomId { get; set; }
public string chatRoomInitiatedBy { get; set; }
public string chatRoomInitiatedTo { get; set; }
public ListmessageRecipients { get; set; }
publicChatRoom()
{
chatRoomId = Guid.NewGuid().ToString();
messageRecipients = new List();
}
}
[/sourcecode]
Step 4) Create a serializable class named “ChatMessage“. This class would act as an object for each chat messages that are exchanged between the users over chat.
[sourcecode language="csharp"]
[Serializable]
public class ChatMessage
{
publicChatMessage()
{
}
public string chatMessageId { get; set; }
public string conversationId { get; set; }
public string senderId { get; set; }
public string senderName { get; set; }
public string messageText { get; set; }
public string displayPrefix { get { return string.Format("[{0}] {1}:", timestamp.ToShortTimeString(), senderName); } }
publicDateTime timestamp { get; set; }
}
[/sourcecode]
Step 5) Create a serializable class named “OnlineContacts“. This class would act as an object for each userconnecting to server hub. It is used here so that a list of Message Recipients can be transferred back to client hub when the user wants to initiate the chat.
[sourcecode language="csharp"]
[Serializable]
public class OnlineContacts
{
public ListmessageRecipients { get; set; }
publicOnlineContacts()
{
messageRecipients = new List();
}
}
[/sourcecode]
Step 6) Finally create a class named “SRChatServer” and inherit from Hub class. This is the server hub that would act as the main heart for building the chat server. Decorate the class with [HubName] attribute. This is the name that Client hub uses to connect to sever hub. We will also add two private static variables for holding our data related to chat rooms and users connected to server hub. As SignalR core is totally thread safe I am using ConcurrentDictionary in order to maintain our collection in thread safe manner.
[sourcecode language="csharp"]
[HubName("sRChatServer")]
public class SRChatServer : Hub
{
#region Private Variables
private static readonly ConcurrentDictionary<string, MessageRecipient> _chatUsers = new ConcurrentDictionary<string, MessageRecipient>(StringComparer.OrdinalIgnoreCase);
private static readonly ConcurrentDictionary<string, ChatRoom> _chatRooms = new ConcurrentDictionary<string, ChatRoom>(StringComparer.OrdinalIgnoreCase);
#endregion
}
[/sourcecode]
Now let’s start adding more ingredients to our server hub.
First we will add connect and disconnect method. Connect method is called whenever the client is loaded for first time and theninitiates the request to connect to server hub. It will simply fetch some data related to connecting client like its connection ID, user IDetc. and store or modify the collection maintained on server hub. Similarly the Disconnect method is called just before the client moves out from the server hub.
[sourcecode language="csharp"]
public bool Connect(string userId, string userName)
{
try
{
if (string.IsNullOrEmpty(userId) | string.IsNullOrEmpty(userName))
{
return false;
}
if (GetChatUserByUserId(userId) == null)
{
AddUser(userId, userName);
}
else
{
ModifyUser(userId, userName);
}
SendOnlineContacts();
return true;
}
catch (Exception ex)
{
throw new InvalidOperationException("Problem in connecting to chat server!");
}
}
public override Task Disconnect()
{
try
{
DeleteUser(Context.ConnectionId);
return null;
}
catch (Exception ex)
{
throw new InvalidOperationException("Problem in disconnecting from chat server!");
}
}
[/sourcecode]
Now let’s add few methods that will help clients to initiate and end chat with other users. InitiateChat method simply takes in required data about the users who want to get connected and start the chat. The code simply builds a technical bridge between the two and initiates a pipeline through ChatRoom using which messages will be exchanged. The EndChat method simply ends the chat and removes the bridge between the two.
[sourcecode language="csharp"]
public bool InitiateChat(string fromUserId, string fromUserName, string toUserId, string toUserName)
{
try
{
if (string.IsNullOrEmpty(fromUserId) || string.IsNullOrEmpty(fromUserName) || string.IsNullOrEmpty(toUserId) || string.IsNullOrEmpty(toUserName))
{
return false;
}
var fromUser = GetChatUserByUserId(fromUserId);
var toUser = GetChatUserByUserId(toUserId);
if (fromUser != null && toUser != null)
{
if (!CheckIfRoomExists(fromUser, toUser))
{
//Create New Chat Room
ChatRoom chatRoom = new ChatRoom();
chatRoom.chatRoomInitiatedBy = fromUser.messageRecipientId;
chatRoom.chatRoomInitiatedTo = toUser.messageRecipientId;
chatRoom.messageRecipients.Add(fromUser);
chatRoom.messageRecipients.Add(toUser);
//create and save blank message to get new conversation id
ChatMessage chatMessage = new ChatMessage();
chatMessage.messageText = "Chat Initiated";
chatMessage.senderId = fromUser.messageRecipientId;
chatMessage.senderName = fromUser.messageRecipientName;
fromUser.chatRoomIds.Add(chatRoom.chatRoomId);
toUser.chatRoomIds.Add(chatRoom.chatRoomId);
//Create SignalR Group for this chat room and add users connection to it
Groups.Add(fromUser.connectionId, chatRoom.chatRoomId);
Groups.Add(toUser.connectionId, chatRoom.chatRoomId);
//Add Chat room object to collection
if (_chatRooms.TryAdd(chatRoom.chatRoomId, chatRoom))
{
//Generate Client UI for this room
Clients[fromUser.connectionId].initiateChatUI(chatRoom);
}
}
}
return true;
}
catch (Exception ex)
{
throw new InvalidOperationException("Problem in starting chat!");
}
}
public bool EndChat(ChatMessage chatMessage)
{
try
{
ChatRoom chatRoom;
if (_chatRooms.TryGetValue(chatMessage.conversationId, out chatRoom))
{
if (_chatRooms[chatRoom.chatRoomId].chatRoomInitiatedBy == chatMessage.senderId)
{
chatMessage.messageText = string.Format("{0} left the chat. Chat Ended!", chatMessage.senderName);
if (_chatRooms.TryRemove(chatRoom.chatRoomId, out chatRoom))
{
Clients[chatRoom.chatRoomId].receiveEndChatMessage(chatMessage);
foreach (MessageRecipient messageReceipient in chatRoom.messageRecipients)
{
if (messageReceipient.chatRoomIds.Contains(chatRoom.chatRoomId))
{
messageReceipient.chatRoomIds.Remove(chatRoom.chatRoomId);
Groups.Remove(messageReceipient.connectionId, chatRoom.chatRoomId);
}
}
}
}
else
{
MessageRecipient messageRecipient = GetChatUserByUserId(chatMessage.senderId);
if (messageRecipient != null && messageRecipient.chatRoomIds.Contains(chatRoom.chatRoomId))
{
chatRoom.messageRecipients.Remove(messageRecipient);
messageRecipient.chatRoomIds.Remove(chatRoom.chatRoomId);
if (chatRoom.messageRecipients.Count < 2)
{
chatMessage.messageText = string.Format("{0} left the chat. Chat Ended!", chatMessage.senderName);
if (_chatRooms.TryRemove(chatRoom.chatRoomId, out chatRoom))
{
Clients[chatRoom.chatRoomId].receiveEndChatMessage(chatMessage);
foreach (MessageRecipient messageReceipient in chatRoom.messageRecipients)
{
if (messageReceipient.chatRoomIds.Contains(chatRoom.chatRoomId))
{
messageReceipient.chatRoomIds.Remove(chatRoom.chatRoomId);
Groups.Remove(messageReceipient.connectionId, chatRoom.chatRoomId);
}
}
}
}
else
{
chatMessage.messageText = string.Format("{0} left the chat.", chatMessage.senderName);
Groups.Remove(messageRecipient.connectionId, chatRoom.chatRoomId);
Clients[messageRecipient.connectionId].receiveEndChatMessage(chatMessage);
Clients[chatRoom.chatRoomId].receiveLeftChatMessage(chatMessage);
Clients[chatRoom.chatRoomId].updateChatUI(chatRoom);
}
}
}
}
else
{
throw new InvalidOperationException("Problem in ending chat!");
}
return true;
}
catch (Exception ex)
{
throw new InvalidOperationException("Problem in ending chat!");
}
}
[/sourcecode]
Finally add below methods that actually send the message to particular client. SendChatMessage sends the message from one user to another and invokes the client hub method to push message to that particular client. SendOnlineContacts is just used for getting the online users list using which the chat can be initiated with anyone of them. I have kept this method private so that I can call it from connect method to broad cast the entire list including new user to all the users. If you want to fetch online contacts on some trigger on client do not forget to make it public.
[sourcecode language="csharp"]
public bool SendChatMessage(ChatMessage chatMessage)
{
try
{
ChatRoom chatRoom;
if (_chatRooms.TryGetValue(chatMessage.conversationId, out chatRoom))
{
chatMessage.chatMessageId = Guid.NewGuid().ToString();
chatMessage.timestamp = DateTime.Now;
Clients[chatMessage.conversationId].receiveChatMessage(chatMessage, chatRoom);
return true;
}
else
{
throw new InvalidOperationException("Problem in sending message!");
}
}
catch (Exception ex)
{
throw new InvalidOperationException("Problem in sending message!");
}
}
private bool SendOnlineContacts()
{
try
{
OnlineContacts onlineContacts = new OnlineContacts();
foreach (var item in _chatUsers)
{
onlineContacts.messageRecipients.Add(item.Value);
}
Clients.onGetOnlineContacts(onlineContacts);
return false;
}
catch (Exception ex)
{
throw new InvalidOperationException("Problem in getting contacts!");
}
}
[/sourcecode]
Apart from the above methods there are few auxiliary methods for supporting the above business logic.
That’s it for server hub. Now let’s plug Client Hub Code step by step
Step 1) Add a new asp.net webform and name it “SRChatClient.aspx”
This webform will be our chat client using which users can chat with each other. This webform when loaded will generate a random number and using this random number it connects with SRChatServer and registers itself. When multiple instances of different browsers are opened we have a group of users getting online who can chat with each other.
[sourcecode language="html"]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SRChatClient.aspx.cs" Inherits="SRChat.SRChatClient" %></pre>
<style><!--
.chatRooms
{
max-height: 500px;
overflow: auto;
}
.chatRoom
{
width: 100%;
height: 250px;
border: 1px solid #ccc;
}
.chatMessages
{
width: 100%;
height: 200px;
overflow: auto;
margin-left: 0px;
padding-left: 0px;
}
.chatMessages li
{
list-style-type: none;
padding: 1px;
}
.chatNewMessage
{
border: 1px solid #ccc;
width: 200px;
float: left;
height: 18px;
}
.chatMessage
{
}
.chatSend
{
float: left;
}
--></style>
<pre>
</pre>
<form id="form1">
<h3>SRChat - By Dhaval Upadhyaya - <a href="http://dhavalupadhyaya.wordpress.com/about-me/" target="_blank">http://dhavalupadhyaya.wordpress.com/about-me/</a></h3>
<div>
<div id="userNameLabel"></div>
<div id="chatRooms"></div>
<div id="chatOnlineContacts"></div>
</div>
</form>
<pre>
[/sourcecode]
Step 2) Add references to style and js files required to bootstrap this page.
[sourcecode language="html"]
<link href="Styles/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script><script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="Scripts/jquery.dialogextend.1_0_1.js"></script><script type="text/javascript" src="Scripts/jquery.signalR.js"></script>
<script type="text/javascript" src="Scripts/jQuery.tmpl.js"></script><script type="text/javascript" src="signalr/hubs"></script>
[/sourcecode]
Step 3) Add templates that can be used to bind the json data and generate the html based UI quickly. Each template as the name justifies is used to generate the html UI when that particular type of triggers occur from the server.
[sourcecode language="html"]
<script id="new-online-contacts" type="text/x-jquery-tmpl">// <![CDATA[
<div>
<ul>
{{each messageRecipients}}
<li id="chatLink${messageRecipientId}"><a href="javascript:;" onclick="javascript:SRChat.initiateChat('${messageRecipientId}','${messageRecipientName}');">${messageRecipientName}</a></li>
{{/each}}</ul>
</div>
// ]]></script>
<script id="new-chatroom-template" type="text/x-jquery-tmpl">// <![CDATA[
<div id="chatRoom${chatRoomId}" class="chatRoom">
<ul id="messages${chatRoomId}" class="chatMessages"></ul>
<form id="sendmessage${chatRoomId}" action="#">
<input type="text" id="newmessage${chatRoomId}" class="chatNewMessage"/>
<div class="clear"></div>
<input type="button" id="chatsend${chatRoomId}" value="Send" class="chatSend" onClick="javascript:SRChat.sendChatMessage('${chatRoomId}')" />
<input type="button" id="chatend${chatRoomId}" value="End Chat" class="chatSend" onClick="javascript:SRChat.endChat('${chatRoomId}')" />
</form>
</div>
// ]]></script>
<script id="new-chat-header" type="text/x-jquery-tmpl">// <![CDATA[
<div id="chatRoomHeader${chatRoomId}">
{{each messageRecipients}}
{{if $index == 0}}
${messageRecipientName}
{{else}}
, ${messageRecipientName}
{{/if}}
{{/each}}
<div>
// ]]></script>
<script id="new-message-template" type="text/x-jquery-tmpl">// <![CDATA[
<li class="message" id="m-${chatMessageId}">
<strong>${displayPrefix}</strong>
{{html messageText}}</li>
// ]]></script>
<script id="new-notify-message-template" type="text/x-jquery-tmpl">// <![CDATA[
<li class="message" id="m-${chatMessageId}">
<strong>{{html messageText}}</strong></li>
// ]]></script>
[/sourcecode]
Step 5) Finally we will plug the magical code that would connect to our SRChatServer and registers all the client methods that would be invoked from server side in order to trigger and inject various messages and chat window instances.
[sourcecode language="html"]
<script type="text/javascript">// <![CDATA[
$(document).ready(function () { SRChat.attachEvents(); }); SRChat = new function () { var chatRooms = 0; var numRand = Math.floor(Math.random() * 1000) var senderId = numRand; var senderName = 'User ' + numRand; var sRChatServer; window.onbeforeunload = function () { if (chatRooms > 0)
return "All chat instances will be ended!";
};
this.attachEvents = function () {
$("#userNameLabel").html(senderName);
if ($.connection != null) {
jQuery.support.cors = true;
$.connection.hub.url = 'signalr/hubs';
sRChatServer = $.connection.sRChatServer;
$.connection.hub.start({ transport: 'auto' }, function () {
sRChatServer.server.connect(senderId, senderName).fail(function (e) {
alert(e);
});
});
sRChatServer.client.initiateChatUI = function (chatRoom) {
var chatRoomDiv = $('#chatRoom' + chatRoom.chatRoomId);
if (($(chatRoomDiv).length > 0)) {
var chatRoomText = $('#newmessage' + chatRoom.chatRoomId);
var chatRoomSend = $('#chatsend' + chatRoom.chatRoomId);
var chatRoomEndChat = $('#chatend' + chatRoom.chatRoomId);
chatRoomText.show();
chatRoomSend.show();
chatRoomEndChat.show();
}
else {
var e = $('#new-chatroom-template').tmpl(chatRoom);
var c = $('#new-chat-header').tmpl(chatRoom);
chatRooms++;
//dialog options
var dialogOptions = {
"id": '#messages' + chatRoom.chatRoomId,
"title": c,
"width": 360,
"height": 365,
"modal": false,
"resizable": false,
"close": function () { javascript: SRChat.endChat('' + chatRoom.chatRoomId + ''); $(this).remove(); }
};
// dialog-extend options
var dialogExtendOptions = {
"close": true,
"maximize": false,
"minimize": true,
"dblclick": 'minimize',
"titlebar": 'transparent'
};
e.dialog(dialogOptions).dialogExtend(dialogExtendOptions);
$('#sendmessage' + chatRoom.chatRoomId).keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('#chatsend' + chatRoom.chatRoomId).click();
return false;
}
});
}
};
sRChatServer.client.updateChatUI = function (chatRoom) {
var chatRoomHeader = $('#chatRoomHeader' + chatRoom.chatRoomId);
var c = $('#new-chat-header').tmpl(chatRoom);
chatRoomHeader.html(c);
};
sRChatServer.client.receiveChatMessage = function (chatMessage, chatRoom) {
sRChatServer.client.initiateChatUI(chatRoom);
var chatRoom = $('#chatRoom' + chatMessage.conversationId);
var chatRoomMessages = $('#messages' + chatMessage.conversationId);
var e = $('#new-message-template').tmpl(chatMessage).appendTo(chatRoomMessages);
e[0].scrollIntoView();
chatRoom.scrollIntoView();
};
sRChatServer.client.receiveLeftChatMessage = function (chatMessage) {
var chatRoom = $('#chatRoom' + chatMessage.conversationId);
var chatRoomMessages = $('#messages' + chatMessage.conversationId);
var e = $('#new-notify-message-template').tmpl(chatMessage).appendTo(chatRoomMessages);
e[0].scrollIntoView();
chatRoom.scrollIntoView();
};
sRChatServer.client.receiveEndChatMessage = function (chatMessage) {
var chatRoom = $('#chatRoom' + chatMessage.conversationId);
var chatRoomMessages = $('#messages' + chatMessage.conversationId);
var chatRoomText = $('#newmessage' + chatMessage.conversationId);
var chatRoomSend = $('#chatsend' + chatMessage.conversationId);
var chatRoomEndChat = $('#chatend' + chatMessage.conversationId);
chatRooms--;
var e = $('#new-notify-message-template').tmpl(chatMessage).appendTo(chatRoomMessages);
chatRoomText.hide();
chatRoomSend.hide();
chatRoomEndChat.hide();
e[0].scrollIntoView();
chatRoom.scrollIntoView();
};
sRChatServer.client.onGetOnlineContacts = function (chatUsers) {
var e = $('#new-online-contacts').tmpl(chatUsers);
var chatLink = $('#chatLink' + senderId);
e.find("#chatLink" + senderId).remove();
$("#chatOnlineContacts").html("");
$("#chatOnlineContacts").html(e);
};
}
};
this.sendChatMessage = function (chatRoomId) {
var chatRoomNewMessage = $('#newmessage' + chatRoomId);
if (chatRoomNewMessage.val() == null || chatRoomNewMessage.val() == "")
return;
var chatMessage = {
senderId: senderId,
senderName: senderName,
conversationId: chatRoomId,
messageText: chatRoomNewMessage.val()
};
chatRoomNewMessage.val('');
chatRoomNewMessage.focus();
sRChatServer.server.sendChatMessage(chatMessage).fail(function (e) {
alert(e);
});
return false;
};
this.endChat = function (chatRoomId) {
var chatRoomNewMessage = $('#newmessage' + chatRoomId);
var chatMessage = {
senderId: senderId,
senderName: senderName,
conversationId: chatRoomId,
messageText: chatRoomNewMessage.val()
};
chatRoomNewMessage.val('');
chatRoomNewMessage.focus();
sRChatServer.server.endChat(chatMessage).fail(function (e) {
//alert(e);
});
};
this.initiateChat = function (toUserId, toUserName) {
if (sRChatServer == null) {
alert("Problem in connecting to Chat Server. Please Contact Administrator!");
return;
}
sRChatServer.server.initiateChat(senderId, senderName, toUserId, toUserName).fail(function (e) {
alert(e);
});
};
};
// ]]></script>
[/sourcecode]
That It run the application and start chatting.
In next version I will add the feature of group chat. Though just few lines of code with the above version will do the job, I leave this to reader as a small exercise.
The full source code of Version 1.0 can be found on my GitHub repo at below link.
https://github.com/upadhyayadhaval/SRChat
