Hello Friends, in this tutorial I am going to introduce you about Signalr in ASP.NET MVC. Also, we are going to create a simple chat application using Signalr.

After completing this tutorial you will be able to understand:

  • What is Signalr in ASP.NET MVC?
  • How to create a simple chat application using Signalr in ASP.NET MVC?

What is Signalr in ASP.NET MVC?

Signalr provides a bi-directional communication framework that adds real-world functionality to our application. The term real-time functionality means it is used to access the access the server code and push the content to related clients instantly instead of the server waiting for the client’s request.

Signalr

Simple Chat Application using Signalr in ASP.NET MVC.

Step 1- Open Visual Studio and Create an ASP.NET MVC application SignalrDemo.

Signalr

 

An empty application will be created.

Step 2- The first thing we need to do is to install dependency related to Signalr. Go to Tools >Library Package Manager>Manage NuGet Packages For Solutions.

Signalr

Step 3- Type signalr in Search Box and click on Install button.

Signalr

Step 4- Right Click on the Solution and create Create a folder with the name Hubs.

Step 5- Right Click on the Hubs folder and create a class with the name SignalrChatHub.

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MessageSharing.Hubs
{
 [HubName("SignalrChatHub")]
 public class SignalrChatHub : Hub
 {
 public void Send(string sName, string sMessage)
 {
 Clients.All.Message(sName, sMessage);
 }

 }

}

Step 5-  To allow communications between the hub and the JavaScript, you must also enable SignalR in the Configuration method in the Startup class of your application. For this Right Click on the Hubs folder and create a class with the name StartUp.

using Microsoft.Owin;
using Owin;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
[assembly: OwinStartup(typeof(SignalrDemo.Hubs.StartUp))]
namespace SignalrDemo.Hubs
{
 public class StartUp
 {
 public void Configuration(IAppBuilder app)
 {

app.MapSignalR();

}
 }
}

Step 6- Right Click on the Controller folder and add a Home Controller. A Controller with the following code will be created.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SignalrDemo.Controllers
{
 public class HomeController : Controller
 {
 //
 // GET: /Home/

public ActionResult Index()
 {
 return View();
 }

}
}

Step 7-  Right Click on the Index Action method and add a View named Index.

<html>

<head>

<title>Signalr Sample</title>

</head>


<script src="~/Scripts/jquery-1.6.4.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>


<script src="~/signalr/hubs"></script>

<script type="text/javascript">

$(function () {

var chat = $.connection.SignalrChatHub;

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

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

chat.server.send($('#name').val(), $('#txtMessage').val());

});

});

chat.client.Message = function (sName, sMessage) {

var encodedName = $('<div />').text(sName).html();

var encodedMessage = $('<div />').text(sMessage).html();


$('#MessageList').append('<li><strong>' + encodedName + '</strong> : &nbsp;&nbsp;' + encodedMessage + '</li>');

};

$('#name').val(prompt('Enter Name : ', ''));

});

</script>

<body>


<div>

<div>

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

<input type="button" value="Send" id="btnSend" />

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

</div>


<div>

<ul id="MessageList"></ul>

</div>


</div>

</body>

</html>

Run the application in two different tabs.Signalr

Enter the name and click on OK button. Send messages from the both tabs.

Signalr

You can download the complete source code of the application from here.

Hope you understand what is Signalr in ASP.NET?  And how it works?

You must also see the following links:

Thank You.

Leave a Comment