Working with ASP.NET SignalR in MVC 5 using Visual studio 2013 RC

Rama Sagar
Posted by in ASP.NET MVC category on for Intermediate level | Points: 250 | Views : 12932 red flag

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/

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)