Post
Ask Question

Adding Real Time Functionality With SignalR

Introduction

SignalR is a ASP.NET server library for adding real-time functionality to a website. SignalR Simply is a process of adding real-time functionality to web applications. Real time describes a human rather than a machine sense of time or in other words something that happens with us at a specific time. It provides the bidirectional communication for the client and server both. SignalR provides us the facility of easily creating real-time websites and web applications.

Using SignalR in projects

The following summarizes why developers should choose SignalR for project:

  • If we are creating a web application then it is important that it will be directly connected to the server for the communication purposes.
  • It is open source.
  • We can provide notification in the format of alerts and comments.
  • We can provide chat in a group or something one-to-one.

How SignalR Works



In this image the client sends a request to the server and the server responds after checking whether it supports the data transportation technique or not using SignalR. Some data transportation technique is used as in the following:

  • Web sockets
  • Forever Frames
  • Server Sent Events
  • Long Polling

If the client supports any of these techniques then the server creates a connection between them and starts the conversations.

How to implement SignalR in our project

The following are the three main steps for working with SignalR:

  • Installing Visual Studio10
  • NuGet package manager
  • Download SignalR

You will need NuGet setup within Visual Studio 10 to download SignalR. If you are using Visual Studio 2012 then NuGet comes preinstalled by default. First we have a need of Visual Studio 2012 because in this version NuGet is provided with this version for using SignalR but don't worry if you have Visual Studio 2010, just install NuGet and then use it. Now to get started, we have a need to first create an empty ASP.Net
website and here we go.

Step 1

Open Visual Studio 2012 like this and choose New Project.



Now choose ASP.Net Empty Web Application as shown below.



Now the web site is created. Go to the Solution Explorer and right-click on the project and choose "Manage Nuget Package".



After opening it search for the SignalR package. Now install the ASP.Net SignalR package and when the package is installed then it is good congress this time you are ready to go. After installing it make your application easily.



Add your classes and HTML pages as you like for implementation.



Your page looks as in that after creating a class.



And after choosing a HTML page your page should look like this:



Now you are ready to create your website with the use of SignalR. You have two classes for use and one HTML page use your on code like me. This is my first code in Visual Studio 2012 with SignalR. It shows a real-time example of after clicking on "click here" your page will be opened in a new window. Use this code and make a real-time website. My source code is below and then their outputs of open new window after clicking click here.

  1. <! DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.    <Head>  
  4.       <Title>Demo</title>  
  5.    </head>  
  6.    <Body><style=backgroundcolor:"pink">
  7.       <div id="example">  
  8.    <div id="grid" style="margin-bottom:10px"></div>  
  9.    <span id="alert"></span>  
  10.    <Script src="./scripts/jquery.signalR-2.2.0.min"></script>  
  11.    <Script>  
  12. $(function ()
     {  
  13.    var myurl = "";  
  14.    var connection = $.hubConnection(myurl, { useDefaultPath:  
  15.    false });  
  16.    var myhub = connection.createHubProxy("productHub");  
  17.    var myhubStart = connection.start({ jsonp: true });  
  18.    $("#alert").myAlert ({  
  19.    width: "100%",  
  20.    position: {  
  21.    top: 1,  
  22.    left: 1  
  23. }  
  24. });  
  25. $("#grid").myGrid(
    {  
  26.    height: 650,  
  27.    editable: false,  
  28.    sortable: false,  
  29.    columns: [  
  30.    { field: "DateOfBirth" },  
  31.    { field: "Password" },  
  32.    { command: "destroy", width: 200 }  
  33. ],  
  34.    toolbar: ["create"],  
  35.    dataSource: {  
  36.    type: "signalr",  
  37.    autoSync: true,  
  38.    // work for handling push notification when event  
  39.    occur  
  40.    push: function (a) {  
  41.    var alert = $("#alert").data("myAlert");  
  42.    alert.success(e.type);  
  43. },  
  44. access:
     {  
  45.    versaion: {  
  46.    id: "ID",  
  47.    fields: {  
  48.    "ID": { editable: false, nullable:  
  49.    true },  
  50.    "DateOfBirth": { type: "date" },  
  51.    "Password": { type: "number" }  
  52.  }  
  53. }  
  54. },  
  55. sort: [{ field: "DateOfBirth", dir: "desc" }],  
  56. implement:
  57.  {  
  58.    signalr: {  
  59.    fact: myhubStart,  
  60.    hub: myhub,  
  61.    server: {  
  62.    fatch: "read",  
  63.    update: "update",  
  64.    destroy: "destroy",  
  65.    create: "create"  
  66. },  
  67. client:
  68.  {  
  69.    fatch: "read",  
  70.    update: "update",  
  71.    destroy: "destroy",  
  72.    create: "create"  
  73. }  
  74. }  
  75. }  
  76. }  
  77. });  
  78. });  
  79. </script> 
  80. <div class="box" style="margin-left: 120px">  
  81.   
  82.    <h1><b>          &nbsp;   My Frist demo page for best define a real time  
  83.       example using signalR</b></h1>  
  84.       <p>       My example is the  
  85.       demo of real-time push notification <a href="http://www.c-  
  86.       sharpcorner.com/tags/1/signalR-example">More About SignalR</a>.If you  
  87.       are interesting to see the real time updates then:</p>  
  88.    <ul>  
  89.    <li>      for Open this page in  
  90.       another browser window by clicking <a href="./signalr"  
  91.       target="_new">here</a>         
  92. </li>  
  93.    <li>       Create,  
  94.       update or destroy grid items.</li>  
  95. </ul>  
  96.    <p><strong>     Remark:</strong> I hope  
  97.       this demo provides you a better understanding. Please wait for my  
  98.       next artical.</p>  
  99. </div>  
  100. </div>  
  101. </body>  
  102. </html> 

The output when you click on click here the next window will open.




Summary

In this article we have learned about SignalR, how it works and how to implement it in our websites for adding real-time functionality.


Similar Articles