SignalR provides a very simple, high-level API for doing server to client RPC.
Introduction
Signal R is a library that adds real-time web functionality to the ASP.NET applications. It is used to access the server code and push the content to the connected clients instantly instead of waiting for the client's request.
Objective
Here we will see an ASP.NET MVC application using a real-time web application with ASP.NET SignalR.
Lets Implement the sample Walk through.
- Step 1 Create a New Project Open visual studio 2013 RC -> click on File -> New Project -> Create new ASP.NET WebApplication -> Name it as
SignalRSample.
- Step 2 Select MVC Project Template as shown
- Step 3 Now lets install the Asp.net SignalR Package
Open Package Manager console
Click on Tools -> Library Package Manager ->Package Manager Console and And type the following command:
install-package Microsoft.AspNet.SignalR
- Step 4 we can see that the SignalR package has been successfully to our solution Explorer through the scripts
- Step 5 Now Lets add a new folder named Room and add a class file ChatRoom as shown below
Right Click on Room Folder -> Add ->Class and Name it as ChatRoom
Using the code
Open the class and add the below code
using Microsoft.AspNet.SignalR;
namespace SignalRSample.Room
{
public class ChatRoom : Hub
{
public void Collabration(string Client_Name, string Client_Message)
{
Clients.All.NewMessage(Client_Name, Client_Message);
}
}
}
- Step 6 Open Global.asax file and add the following code
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace SignalRSample
{
// Note: For instructions on enabling IIS7 classic mode,
// visit http://go.microsoft.com/fwlink/?LinkId=301868
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
RouteTable.Routes.MapHubs();
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
- Step 7 Now add a ActionResult Chat in our Controller as shown
public ActionResult Chat()
{
ViewBag.Message = "Your chat page";
return View();
}- Step 8 Now Lets generate the view
Right Click on Home Folder -> Add ->Scaffold -->select MVC5View
- Step 9 Now Lets Create the UI..
@{
ViewBag.Title = "Chat";
}
<hgroup>
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
</hgroup>
<div class="container">
<input type="text" id="TxtMessage" />
<input type="button" id="BtnSubmit" value="Submit" />
<input type="hidden" id="UserName" />
<ul id="Chats"></ul>
</div>
@section scripts {
<script src="~/Scripts/jquery.signalR-1.1.3.js"></script>
<script src="~/signalr/Hubs"></script>
<script>
$(function () {
var chat = $.connection.chatHub;
chat.client.NewMessage = function (Client_Name, Client_Message) {
$('#Chats').append('<li><strong>' + htmlEncode(Client_Name)
+ '</strong>: ' + htmlEncode(Client_Message) + '</li>');
};
$('#UserName').val(prompt('Please Enter Your Name:', ''));
$('#TxtMessage').focus();
$.connection.hub.start().done(function () {
$('#BtnSend').click(function () {
chat.server.Collabration($('#UserName').val(), $('#TxtMessage').val());
$('#TxtMessage').val('').focus();
});
});
});
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
Now run the Application you will see the following output
Conclusion
So far we have learned how to use SignalR through a simple chat Application.Post your Valuable comments if you have any issues in this.
Reference
http://signalr.net/