Canarys | IT Services

Blogs

How to build chat application using SIgnalR

Date:
Author:
Share

Introduction

Hello friends, This blog is related to a chat application which conatins the exchanging the words in between and also you can share the files.This is a live chat applcation which uses SignalR as a  Dot net library for exchanging the data.  Lets start the discussion in brief.I hope you will be able to integrate this applcation in your projects after reading this blog.

 

What is SignalR ?

SignalR is an asp.net library which helps you to add real time functionality to your application.It communicates between server and client to transfer the data in between without refreshing the page.

 How to add signalR to the project ?

1. Open any visual studio project in VS 2012

2. Right click on the solution.You will get an option of "Manage NuGet Packages"  select the option.

3. Add Microsoft ASP.NET signalR,OWIN and Microsoft.OWIN to your project

OWIN will provode the startup interface to the project and microsoft.owin provides a set of helper tyeps for creating the owin components.

4.After installing all the packages.Add a startup file startup.cs which is a starting point of application to map signalR. 

using System.Web.Routing;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(ProjectName.Startup))]

namespace ProjectName
{

 public class Startup
 {
   public void Configuration(IAppBuilder app)
  {
        app.MapSignalR();
 }
 }
}

 

5. Next we have to create a proxy in reference to the hub in client side and should initialise the methods and events required to run once the hub is available.
 
 
SignalR library contains some of the methods like
  1. chatHub.server.connect()
  2. chatHub.server.sendMessageToAll(mydata)
  3. chatHub.server.sendPrivateMessage(mydata)
  4. chatHub.client.onConnected 
  5. chatHub.client.onNewUserConnected
  6.  chatHub.client.NoExistAdmin
  7. chatHub.client.onUserDisconnected
  8. chatHub.client.messageReceived 
  9. chatHub.client.sendPrivateMessage

First three are the definitions which will call the server side methods which will be explained later.Next six are the client side methods which are explained below.myData is a parameterlist(Optional) which can be sent between the client and server method.The data required to write the code can be sent through the parameters of the definitions.

 

///Server side code
 
 
Add a page by the name ChatHub.cs to your project and paste the below code
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace ProjectName

{

public class ChatHub : Hub
 {

 #region Data Members

 public void Connect(string myData)
 {
 var id = Context.ConnectionId;
   // send to caller

     Clients.Caller.onConnected(myData);

     // send to all except caller client

      Clients.AllExcept(id).onNewUserConnected(myData));
 }
  public void SendMessageToAll(string myData)
 {
  // Broad cast message
  Clients.All.messageReceived(myData);
  }
  public void SendPrivateMessage(string toUserId, string message)
 {
   string fromUserId = Context.ConnectionId;
   if (toUserId!= null && fromUserId !=null)
    {
        // send to 
       Clients.Client(toUserId).sendPrivateMessage(fromUserId, message); 

        // send to caller user

       Clients.Caller.sendPrivateMessage(toUserId,message); 

      }

  }

public override Task OnDisconnected(bool stopCalled)
   {
       var id = Context.ConnectionId;
       Clients.All.onUserDisconnected(id);
       return base.OnReconnected();
    }

  public void SendMessageToGroup(string myData)
    {
     groupID = "1";
     Clients.Group(groupID).getMessages(myData);
    }
     #endregion
  }
}
Foreach logged in user the context id will generate you can use it as a unique identifier for the partcular user.From the server side you can call the client side code with the necessary parameters.The method OnDisconnected will be called once you close the browser tab.
 
These are some of the information related to the SignalR for creating the chat application.I will be updating the blog if i get new information about the signalR and its components.
 

Leave a Reply

Your email address will not be published. Required fields are marked *

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.