Software Engineering: Using SignalR in ASP.Net MVC

I assume that you already know what SignalR is and this post is only a step by step guide to start using SignalR in an ASP.Net MVC application. Our working environment will be:

Visual Studio(VS) 2010

ASP.Net MVC 4

SignalR 1.0

Create an ASP.Net MVC Solution

Create a new ASP.Net MVC 4 solution: Open VS and select “File>New>Project” and select “ASP.Net MVC 4 Web Application”. Name the application as “AspDotNetMvc.Integrate.SignalR” and click OK. On the next screen select “Empty” template and click OK. Now, VS will create the following project hierarchy as follows:

Under “Controllers”, create a new controller as follow:

using System.Web.Mvc;

namespace AspDotNetMvc.Integrate.SignalR.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

Then, under “Views” create a view for our HomeController’s Index action as follow (Here, I created the view without a layout page and with the default Razor engine:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

</head>

<body>

<div>

"Hello SignalR"

</div>

</body>

</html>

Now, run the project and we’ll see the browser with the text “Hello World”. Now our solution will be like below:

Install SignalR

Now, we need to get SignalR from NuGet. For this, go to “Tools>Library Package Manager>Package Manager Console” and type the following and press enter:

Install-Package Microsoft.AspNet.SignalR –pre

NuGet will install SignalR in our solution and the structure will look like below:

Notice that NuGet has added 2 new javascript files. In our folder structure, we can see a new folder called “packages”

And, under Packages, we can see all the dll’s that NuGet downloaded for us:

Here are the references that NuGet added for the needed DLL’s in our project.

Using SignalR: Server Side

Let’s use SignalR to create a tweet application where users can submit a tweet and then it will be broadcasted to all the connected users. Create a folder called “Hubs” under root, and then create a class in that folder called “Tweet”.

using Microsoft.AspNet.SignalR.Hubs;

namespace AspDotNetMvc.Integrate.SignalR.Hubs

{

public class Tweet:Hub

{

public void SendTweet(string tweetText)

{

Clients.All.addTweet(tweetText);

}

This class is called a hub and it derived from the SignalR’s Hub base class. The clients will send new tweets to the SendTweet method in our tweet hub and then it will broadcast it to all the connected clients by calling the “addTweet” javascript method.

Now, add the line “RouteTable.Routes.MapHubs();” in the “Aplication_Start” method in the Global.asax file. This method will create the mapping to the dynamically created javascript file “~/signalr/hubs” that is discussed in the client side section below.

public class MvcApplication : HttpApplication

{

protected void Application_Start()

{

RouteTable.Routes.MapHubs();

AreaRegistration.RegisterAllAreas();

WebApiConfig.Register(GlobalConfiguration.Configuration);

FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

RouteConfig.RegisterRoutes(RouteTable.Routes);

}

That’s all we have to do on the server side.

Using SignalR: Client Side

To set up the client side, add the following scripts in the html head of the Index view,:

Here, first we add JQuery as SignalR needs it, then we add the javascript for SignalR. Next line with the src attribute “~/signalr/hubs” points to a dynamically created javascrip file on the server by SignalR. Below is our current structure of the solution and you can see that there is no folder at root called “SignalR” and, thus, make sure that we don’t create any folder by the name “SignalR” at the root.

Now, create the user interface for our tweets. Add a textbox and a button to send tweets to the server and a list to add new tweets sent by the server:

<div>

</div>

Next step is to wire up the client with the server tweet hub. For this, add the following script at the end of the head:

$(function() {

var tweetProxy = $.connection.tweet;

tweetProxy.client.addTweet = function (message)

{

$('#tweet-list').append('<li>' + message + '</li>');

};

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

function () {

$("#send-tweet").click(

function() {

tweetProxy.server.sendTweet($('#tweet').val());

});

</script>

Here, we first create a proxy to talk with the server with the line “$.connection.tweet”. In the next line, we have the “addTweet” javascript function that the server will use to call the browser. In this method, we will simply add the new tweets sent by the server to our tweet list that we created on the html body. The last line, we start the proxy and bind the “Send Tweet” buttons’ click event to send the value in the text box to our tweet hub. Now, our Index view should look like below with the newly added code highlighted in yellow:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

$(function() {

var tweetProxy = $.connection.tweet;

tweetProxy.client.addTweet = function (message)

{

$('#tweet-list').append('<li>' + message + '</li>');

};

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

function () {

$("#send-tweet").click(

function() {

tweetProxy.server.sendTweet($('#tweet').val());

});

</script>

</head>

<body>

<div>

"Hello SignalR"

</div>

<div>

</div>

</body>

</html>

That’s all we need to do, now, let’s see our efforts in action. Run the project and open two separate browsers. In each browser, navigate to the local site: