Click here to Skip to main content
14,640,145 members
Articles » Web Development » ASP.NET » General
Posted 14 Mar 2013


220 bookmarked

Asp.Net SignalR Chat Room

Rate this:
4.92 (159 votes)
Please Sign up or sign in to vote.
4.92 (159 votes)
14 Mar 2013CPOL
This article helps you to understand the ASP.NET SignalR API and create a chat room using it.
Image 1


Recently Microsoft added some new features in its ASP.NET Web Application Framework. SignalR is one of the prominent feature to build real time application e.g. social application, multiuser games, news weather etc. In real time applications server pushes the content to connected clients instantly it become available. It provides a simple ASP.NET API for creating server-to-client remote procedure calls (RPC) that calls JavaScript functions in client browsers from server-side .NET code. 

The web application works in Request-Response model. Browsers and other user agents make requests and web server provide a response to that request. The response is sent to the delivery address provided in the request by user agent. In this model server can’t make responses without a request. So in real time application server pushed newly available contents/data to the client. You can achieve this feature using ASP.NET SignalR API.

Get Started

For explaining the SignalR Web API, in this article we will create a chat application where you can do group chat and private chat with single user. You require Visual Studio 2012 Express Development Tool for creating this project. You can get more details on

Create a new web application project in visual studio and In Solution Explorer, Right-click the project, select Add > New Item, and select the SignalR Hub Class item. Name the class and press the Add button. It will add the Hub class, required references and scripts.

Image 2

You can see added script and references by expanding ‘Scripts’ and ‘References’ nodes.

Image 3

Register Hub URL

For using SignalR API, we need to register ~/signalr/hubs URL. Add global.asax file in your solution and in the Application_Start method register hub url using RouteTable.Routes.MapHubs() command.

public class Global : System.Web.HttpApplication

   protected void Application_Start(object sender, EventArgs e)
       // Register the default hubs route: ~/signalr/hubs


Hub Class

ChatHub class must be inherited from the Microsoft.AspNet.SignalR.Hub class. The Hub class exposes some properties and methods. Using Clients property you can communicate with connected clients. You can get the information of client who is calling method using Context and you can also manage groups using Groups property.

public abstract class Hub : IHub, IDisposable

  public HubConnectionContext Clients { get; set; }
  public HubCallerContext Context { get; set; }
  public IGroupManager Groups { get; set; }

  public virtual Task OnConnected();        
  public virtual Task OnDisconnected();       
  public virtual Task OnReconnected();


Derived class can override OnConnected, OnDisconnected, which are very useful to perform some actions on these events. ChatHub class is derived from the Hub class and we will discuss its method in next comming sections.

public class ChatHub : Hub

   public void Connect(string userName);

   public void SendMessageToAll(string userName, string message);

   public void SendPrivateMessage(string toUserId, string message);

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



Client calls Connect method when he wants to join Chat room. For sending message in chat room to all connected clients, it calls SendMessageToAll , For private chat with single user client calls SendPrivateMessage method.

Proxy at Client side

Add new page index.html in the solution and set the references of JQuery, SignalR and autogenerated hubs.

<script src=""></script>

<!--Reference the SignalR library. -->
<script src=""></script>

<!--Reference the autogenerated SignalR hub script. -->
<script src=""></script>

At the client side you need to create the hub proxy and start that proxy. You can create hub proxy using $.connection.yourHubClass and then start hub using $.connection.hub.start() method.

<script type="text/javascript">

 $(function () {

    // Declare a proxy to reference the hub.
    var chatHub = $.connection.chatHub;


    // Start Hub
    $.connection.hub.start().done(function () {





The import thing to be noticed here is the naming convention is being used in auto generated Hub proxy. We named our class ChatHub at server in camel case but at client side we are getting it in lower camel case like $.connection.chatHub

Connect to the Chat Room

Image 4

In our Chat room user connects to the chat room by passing his name and on the successful connection, we send him a list of connected clients and some recent chat history which we saves in our application. Our first method in the ChatHub class is the Connect.

public void Connect(string userName)

   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);



Get the connection id of the client who is calling the Connect method using Context.ConnectionId property. Check the id in existing connected clients list. If it does not exist then add it into the list. Now we need to do two more steps. First we have to send list of already connected clients and recent message list to the client who wants to connect and second we have to inform the other connected clients about new joiner.

So we can easily call the client side method of single client who want to connect using Clients.Caller property.

// send to caller
Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);

Inform the other connected clients about the new client, but we don’t want to call the method of the newly connected client. Use AllExcept property of the Clients, which can excludes some client as per your wish.

// send to all except caller client
Clients.AllExcept(id).onNewUserConnected(id, userName);     

Define/Expose your client side methods which are being called by server side code by statements Clients.Caller.onConnected(...) and Clients.AllExcept(id).onNewUserConnected(...). You can define your methods using chatHub.client.yourMethodName at client side.

// Calls when user successfully logged in
chatHub.client.onConnected = function (id, userName, allUsers, messages) {



// On New User Connected
chatHub.client.onNewUserConnected = function (id, name) {

   AddUser(chatHub, id, name);

From the client side you can Call the server side methods using chatHub.server.yourMethod statement in your web page.  


Send Message in Chat room

Image 5

In main chat room message typed by user is broadcast to all connected clients. On the server side in ChatHub class write SendMessageToAll and broadcast message using Clients.All.messageReceived method. messageReceived is a client side method.

public void SendMessageToAll(string userName, string message)
   // store last 100 messages in cache
   AddMessageinCache(userName, message);

   // Broad cast message
   Clients.All.messageReceived(userName, message);

On client side expose the messageReceived method and in this method simply add message in the chat area using JQuery.

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

   AddMessage(userName, message);


After writing client side and server side methods, now we have to register button click event on client side and when user will click button we will call server side method sendMessageToAll, which broadcast message to the all connected clients.

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

    var msg = $("#txtMessage").val();
    if (msg.length > 0) {

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

        chatHub.server.sendMessageToAll(userName, msg);


Private Chat

Image 6

You can also initiate private chat by double clicking on the connected client name. In private chat we do not send message to all connected client. In Private chat only two clients can send/receive each other message. So for sending private message sender will call server side sendPrivateMessage method. And in this method we send message to other client using Clients.Client(toUserId).sendPrivateMessage(..) method.

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);


On Disconnect

On the close of the browser SignalR API calls OnDisconnected method. Override this method in your ChatHub class and in this method remove disconnected client from the cache list and send notification to other connected clients.

public override System.Threading.Tasks.Task OnDisconnected()
    var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
    if (item != null)

        var id = Context.ConnectionId;
        Clients.All.onUserDisconnected(id, item.UserName);


    return base.OnDisconnected();


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Shakeel Iqbal
Software Developer (Senior) TEO
Pakistan Pakistan
Passion and positive dedication is essential part of success. I believe on hardworking and sharing knowledge with others. I always try to be a better than I am and think positive for positive result.

My Blogs

My Linked-In Profile

Comments and Discussions

QuestionDuplicate tab - chathub.client.sendprivatemessage not called Pin
Purvi Pandya15-Oct-19 19:14
MemberPurvi Pandya15-Oct-19 19:14 
QuestionSaving in the database Pin
Member 1400320730-Sep-18 20:41
MemberMember 1400320730-Sep-18 20:41 
GeneralGoes offline after refresh Pin
Member 132431963-Jul-18 17:27
MemberMember 132431963-Jul-18 17:27 
Questionplease help me Pin
Member 133109858-Dec-17 21:58
MemberMember 133109858-Dec-17 21:58 
AnswerRe: please help me Pin
zazi123429-Dec-17 3:23
Memberzazi123429-Dec-17 3:23 
QuestionRequest Pin
Member 1032207010-Oct-17 21:19
MemberMember 1032207010-Oct-17 21:19 
QuestionNot working after deployment/published Pin
VinodhCV20-Sep-17 3:01
MemberVinodhCV20-Sep-17 3:01 
AnswerRe: Not working after deployment/published Pin
VinodhCV20-Sep-17 4:29
MemberVinodhCV20-Sep-17 4:29 
QuestionIssues with SignalRRouteExtensions being obsolete? Pin
Member 1341648219-Sep-17 12:16
MemberMember 1341648219-Sep-17 12:16 
QuestionThank you Shakeel Pin
JANAZA1-May-17 23:15
professionalJANAZA1-May-17 23:15 
QuestionActually Works! Pin
t2nolan15-Feb-17 22:25
Membert2nolan15-Feb-17 22:25 
Questionstart chat button not working~ Pin
Member 1287174411-Dec-16 20:50
MemberMember 1287174411-Dec-16 20:50 
SuggestionCan you record a video? Pin
Ensar GUCLU2-Dec-16 20:41
MemberEnsar GUCLU2-Dec-16 20:41 
Questioni want signar chat with sql data base can you help me Pin
MemberSAVAJ INFOTECH7-Jun-16 2:43 
QuestionNice article Pin
NaveedAhmed10-Feb-16 0:52
MemberNaveedAhmed10-Feb-16 0:52 
QuestionHow to refresh page but still not lose content private chat? Pin
rivalred21-Jan-16 23:01
Memberrivalred21-Jan-16 23:01 
QuestionClear Cache Button Pin
Member 121952089-Dec-15 8:57
MemberMember 121952089-Dec-15 8:57 
QuestionInput is not working on mobile browser Pin
Member 121952089-Dec-15 8:53
MemberMember 121952089-Dec-15 8:53 
GeneralAppreciation Pin
micworld3-Nov-15 18:28
Membermicworld3-Nov-15 18:28 
Questionhow to send signal for somebody is typing Pin
Member 108141077-Oct-15 1:20
MemberMember 108141077-Oct-15 1:20 
GeneralMy vote of 5 Pin
D V L7-Sep-15 8:29
professionalD V L7-Sep-15 8:29 
QuestionThank you for posting this project. Pin
Clearwater Company3-Sep-15 10:33
MemberClearwater Company3-Sep-15 10:33 
QuestionThank you Shakeel. Your generosity spreads good will to also share and to work hard. Pin
Member 1193901529-Aug-15 21:12
professionalMember 1193901529-Aug-15 21:12 
QuestionConnectedusers Error Pin
Member 1193121824-Aug-15 1:40
MemberMember 1193121824-Aug-15 1:40 
QuestionAbout Chat Histoty Pin
Mohammed Sajid Qureshi21-Aug-15 4:25
MemberMohammed Sajid Qureshi21-Aug-15 4:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.