ASP.NET

Getting Started With SignalR in ASP.NET

In this article, you will learn how to begin work with SignalR and how to exchange messages among multiples users.

What SignalR is: SignalR is an ASP.Net server library for adding real-time functionality to a web application. This includes client libraries for JavaScript and other clients.

Getting Started

The get started with SignalR:

  • Start Visual Studio
  • Create a new website
  • Provide the name and location of website
  • Click "Next"

Now add a new SignalR Hub class and give a name of class and click "Add".

Note: You will probably get this error message when you add the class:

"This template attempted to load component assembly 'NuGet.VisualStudio.Interop, Version=*, Culture=neutral, PublicKeyToken=*"

Follow this blog to remove this problem:

http://www.c-sharpcorner.com/Blogs/11651/%E2%80%98this-template-attempted-to-load-component-assembly-nuget-v.aspx

Or you can also add SignalR to a project by opening the "Tools" | "Library Package Manager" | "Package Manager Console" and running the command: "install-package Microsoft.AspNet.SignalR". Now again add the SignalR class.

img1.jpg

Image 1.

As you can see, many SignalR assemblies have been added in the Bin folder, so you are good to go.

img2.jpg

Image 2.

Now it is time to work on HubClass.

First of all add this namespace:

  1. using Microsoft.AspNet.SignalR;
And now add this method:
  1. public class ChatHub : Hub  
  2. {  
  3.     public void Send(string name, string message)  
  4.     {         
  5.         Clients.All.broadcastMessage(name,message);  
  6.     }         
  7. }  

Now add these namespaces in the global.asax file:

  1. <%@ Import Namespace="System.Web.Routing" %>  
  2. <%@ Import Namespace="Microsoft.AspNet.SignalR" %>  

Add this code in the "application_start" event:

  1. RouteTable.Routes.MapHubs();
Now add a new HTML page and give a name and click "Ok".

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>SignalR Simple Message Broadcast Sample</title>  
  5. </head>  
  6. <body>  
  7.       <div style="background-color: #C0C0C0">  
  8.         <input type="text" id="messagetext" />  
  9.         <input type="button" id="btnsendmessage" value="Broadcast message" />  
  10.         <input type="hidden" id="displayname" />  
  11.         <ul id="loadmessages">  
  12.         </ul>  
  13.     </div>  
  14.     <!--Script references. -->  
  15.     <!--Reference the jQuery library. -->  
  16.     <script src="/Scripts/jquery-1.8.2.min.js" ></script>  
  17.     <!--Reference the SignalR library. -->  
  18.     <script src="/Scripts/jquery.signalR-1.0.0.js"></script>  
  19.     <!--Reference the autogenerated SignalR hub script. -->  
  20.     <script src="/signalr/hubs"></script>  
  21.     <!--Add script to update the page and send messages.-->  
  22.     <script type="text/javascript">  
  23.         $(function () {  
  24.             // Declare a proxy to reference the hub.  
  25.             var chat = $.connection.chatHub;  
  26.             // Create a function that the hub can call to broadcast messages.  
  27.             chat.client.broadcastMessage = function (name, message) {  
  28.                 // Html encode display name and message.  
  29.                 var encodedName = $('<div />').text(name).html();  
  30.                 var encodedMsg = $('<div />').text(message).html();  
  31.                 // Add the message to the page.  
  32.                 $('#loadmessages').append('<li><strong>' + encodedName  
  33.                     + '</strong>:  ' + encodedMsg + '</li>');  
  34.             };  
  35.             // Get the user name and store it to prepend to messages.  
  36.             $('#displayname').val(prompt('Enter your name:', ''));  
  37.             // Set initial focus to message input box.   
  38.             $('#messagetext').focus();  
  39.             // Start the connection.  
  40.             $.connection.hub.start().done(function () {  
  41.                 $('#btnsendmessage').click(function () {  
  42.                     // Call the Send method on the hub.  
  43.                     chat.server.send($('#displayname').val(), $('#messagetext').val());  
  44.                     // Clear text box and reset focus for next comment.  
  45.                     $('#messagetext').val('').focus();  
  46.                 });  
  47.             });  
  48.         });  
  49.     </script>  
  50. </body>  
  51. </html> 

Time to run the application; press F5. I would suggest selecting Internet Explorer with debug.

img3.jpg

Image 3.

As you can see, two windows open; one for HTML content and the second asks for a name. Copy the browser URL and paste in another browser window then provide a name and click "OK".

Now copy that URL into another window.

img4.jpg

Image 4.

Now provide another name to that TextBox and click "OK".

So don't get confused; provide a different name to windows like this.

img5.jpg

Image 5.

Now type a message from the first window and respond from another window.

img6.jpg

Image 6.

As you will see, both windows are loading messages without delaying on their name that we provided.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found