This is a simple tutorial for you how to get Signal R running in a MVC project via Visual Studio and the NuGet package manager console. OK, here we go:
1. Create a new MVC project called "MySignalR" ( either 3 or 4, and either an empty project or a templated project ). I will choose the Empty project for mine.
2. Via the NuGet package manager console, type
Install-Package SignalR
This will add all the necessary files to your project (SignalR assemblies, Newtonsoft assembly, and various javascript files required). If you don't have NuGet installed in your visual studio, then visit this site for more information on how to install http://nuget.codeplex.com/wikipage?title=Getting%20Started
3. Create a Hub to which will be your message "router". So create a new class, "SNLR.cs" and add the following code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR;
using SignalR.Hubs;
namespace MySignalR
{
public class SNRL : Hub
{
public void SendMessage(string msg)
{
Clients.sendMessage(msg);
}
}
}
4. If you have chosen the Empty project, then you will need to create a "Shared" folder within your "Views" folder. Within this, then create a new View called "_Layout.cshtml". This will be the layout for your page and will reference all the Javascript files needed.
Once you have created your _Layout page, add a link to the following javascript files, so your page looks like this:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/Scripts/jquery-1.6.4.min.js"></script>
<script src="~/Scripts/jquery.signalR-0.5.3.min.js"></script>
<script src="~/signalr/hubs"></script>
@RenderSection("JavaScript", false)
</body>
</html>
5. Add a file called "_ViewStart.cshtml" on your Views folder and add the following code:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
6. Create a new Empty Controller in your Controllers folder and name it "Home". This will generate the "Index" ActionResult, so then right click on the word "View();" and select "Add View" making sure that you have "User a layout or master page:" selected.
Add the following code to this newly created "Index.cstml" page:
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<span id="mySpanTag"></span>
@section JavaScript{
<script>
$(function () {
var myHub = $.connection.sNRL;
myHub.sendMessage = function (data) {
$('#mySpanTag').html(data);
};
$.connection.hub.start(function () {
myHub.sendMessage("Hello World!");
});
});
</script>
}
7. Run the project. You will see the phrase "Hello World" on the screen. This has been sent from our JavaScript code to our SNLR Hub and then sent back to our JavaScript code, which then renders it on the page. Simples!
Once you have mastered the basics, you can then look into sending messages from the Hub to only the person requesting the data, or groups of users.
Hope you enjoy the tutorial. You can apply this new features. Find more about ASP.NET MVC 4 hosting on HostForLIFE.eu.