SignalR New Technology by Microsoft

SignalR New Technology by Microsoft

SignalR is the new technology by Microsoft. We can also say that it is a new library for asp.net developers that makes it possible to add “real time” web functionality. ”Real Time” web functionality means the ability to have server code to push contents to connected clients.

In earlier asp.net applications, users had to refresh the web page to view new data i.e the page used retrieve new data only when it was refreshed. When new data used to come to the server, it will not be directly transmitted to all clients or specific clients, for that the user has to refresh the page, and the page will be updated.

SignalR supports “server push” or “broadcasting” functionality. It handles connection automatically. In classic HTTP connections for client-server communication connection is re-established for each request, but SignalR provides persistent connection between the client and the server. In SignalR the server code calls out to a client code in the browser using Remote Procedure Calls (RPC), rather than request-response model today. SignalR is an open-source API, and is accessible throughGitHub.

SignalR can be used to add any sort of “real time” web functionality to asp.net applications.

This technology can be used in

i)                     Chat room application,

ii)                   Real Time monitoring application,

iii)                  Job progress updates, real time form

Diagram of Chat Room Application is below

Capture

Steps To Create Chat Application

      1. Open Visual Studio.
      2. Create a new project, select Empty Web Application.
      3. Go to Tools menu and open Package Manager Console.
      4. If you don’t have a Nuget package manager console then download it.
      5. Run command ‘Install-Package Microsoft.AspNet.SignalR’.
      6. In the Solution Explorer right click on your project and add class “ChatHub”.
      7. Derive theChatHub class from ‘Hub’ and write method send in ChateHub class.

      Public class ChatHub : Hub

      {

      Public void Send(string name, string message)

      {

                  Clients.All.sendMessage(name,message);

      }

      }

       8.  Add Global.asax file in application and map hub in application_start event as shown below

      Protected void Applicaion_Start(object sender,EventArgs)

      {

      RouteTabl.Routes.Mapubs();

      }

      9. Add web page(.aspx) and copy given below code

      <script src=”http://code.jquery.com/jquery-1.8.2.min.js” type=”text/javascript”></script>

      <script src=”Scripts/jquery.signalR-1.0.1.min.js” type=”text/javascript”></script>

      <script src=”signalr/hubs” type=”text/javascript”></script>

      <script type=”text/javascript”>

                              $(function () {

                              // Proxy created on the fly         

                              var chat = $.connection.chatHub;

                              // Get the user name and store it to prepend to messages.

                              $(‘#displayname’).val(prompt(‘Enter your name:’, ”));

                              // Declare a function on the chat hub so the server can invoke it         

                              chat.client.sendMessage = function (name, message)

      {

                                          varencodedName = $(‘<div />’).text(name).html();

                                          varencodedMsg = $(‘<div />’).text(message).html();

                                          $(‘#messages’).append(‘<li>’ + encodedName +

                                          ‘:  ‘ + encodedMsg + ‘</li>’);

      };

      //Start the connection

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

      {

      $(“#send”).click(function()

      {

      //Call the chate method on the server

      chat.server.send($(‘#displayname’).val(),$(‘#msg’).val());

      });

      });

      });

      </script>

      10. Also copy the following code into the<body>part:

      <div>

      <input type=”text” id=”msg” />

      <input type=”button” id=”send” value=”Send” />

      <input type=”hidden” id=”displayname” />

      <ul id=”messages”>

      </ul>

      </div>

11. Build and Run the application.
12. Open the browser and copy the URL and send message and view.
SignalR also enables completely new types of web applications that require high frequency updates from the server.

Tags:
  • SignalR,
  • SignalR Microsoft Technology,
  • SignalR Technology,
  • Leave a Reply