Introduction To ASP.Net SignalR Self Hosting

Introduction

 
This article explains the self-hosting of ASP.NET SignalR. Generally, an ASP.NET SignalR application is hosted in the IIS, but you can also self-host your application using the self-host library. OWIN is the base of the SignalR library. You also know that OWIN is used to do a decoupled architecture between the web server and web application, from this great feature OWIN is the ideal feature to self-host a SignalR application.
 
The following are reasons to not host in IIS:
  • The availability of IIS. You can also use an existing server.
  • The IIS performance.
  • The functionality of SignalR is to be added to an existing application that runs on a Windows Service or any other process.
Let's proceed with the following sections:
  • Self Hosting Application
  • Accessing Hosting Application

Self Hosting Application

 
In this section, we will create a console application for self-hosting. Use the following procedure.
 
Step 1: Open Visual Studio and create a console application.
 
ConsoleApp-in-RC2013.jpg
 
Step 2: Open the Package Manager Console from the Tools/Library Package Manager.
 
Pmc.jpg
 
Step 3: Write the following command:
 
install-package Microsoft.AspNet.SignalR.SelfHost -pre
 
pmc2.jpg
 
Step 4: Now paste the following code into the Program.cs file:
  1. using System;  
  2. using Microsoft.AspNet.SignalR;  
  3. using Microsoft.Owin.Hosting;  
  4. using Owin;  
  5.    
  6. namespace SignalRHostApp  
  7. {  
  8.     class Program  
  9.     {  
  10.         static void Main(string[] args)  
  11.         {  
  12.             string url = "http://localhost:6118";  
  13.             using (WebApp.Start<Startup>(url))  
  14.             {  
  15.                 Console.WriteLine("The Server URL is: {0}", url);  
  16.                 Console.ReadLine();  
  17.             }  
  18.         }  
  19.     }  
  20.    
  21.     class Startup  
  22.     {  
  23.         public void Configuration(IAppBuilder MyApp)  
  24.         {  
  25.             MyApp.MapSignalR();  
  26.         }  
  27.     }  
  28.    
  29.     public class ChatHub : Hub  
  30.     {  
  31.         public void LetsChat(string Cl_Name, string Cl_Message)  
  32.         {  
  33.             Clients.All.NewMessage(Cl_Name, Cl_Message);  
  34.         }  
  35.     }  

Step 5: Run your application.
 
Console.jpg
 
Step 6: If you get an exception named System.Reflection.TargetInvocationException that was unhandled then it might be possible that you did not open Visual Studio as an Administrator.
 
Step 7: Stop the execution.
 

Accessing Hosting Application

 
In this section, I am developing an ASP.NET SignalR application as I described in my previous article, but the only difference is that the URL is provided explicitly. Proceed with the following procedure.
 
Step 1: Add a new project by right-clicking on your solution.
 
NewProject.jpg
 
ClientApp.jpg
 
Step 2: Select an Empty project template.
 
EmptyTemplate-in-rc2013.jpg
 
Step 3: Set the Client App project as a Startup project. Open the Package Manager Console and write the following command:
 
Install-Package Microsoft.AspNet.SignalR -pre
 
Step 4: Add an HTML page to your project.
 
htmlpage.jpg
 
Step 5: Copy the following code into your HTML file:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4.      <head>  
  5.           <title>ASP.NET SignalR Chat</title>  
  6.           <style type="text/css">  
  7.           .wrapper {  
  8.                background-color: #99CCFF;  
  9.                border: thick solid #808080;  
  10.                padding: 20px;  
  11.                margin: 20px;  
  12.           }  
  13.           </style>  
  14.      </head>  
  15.   
  16.      <body>  
  17.           <div class="container">  
  18.                <input type="text" id="TxtMessage" />  
  19.                <input type="button" id="BtnSend" value="Send" />  
  20.                <input type="hidden" id="UserName" />  
  21.                <ul id="Chats"></ul>  
  22.           </div>  
  23.           <script src="Scripts/jquery-1.6.4.min.js"></script>  
  24.           <script src="Scripts/jquery.signalR-2.0.0-rc1.min.js"></script>  
  25.           <script src="http://localhost:6118/signalr/hubs"></script>  
  26.           <script type="text/javascript">  
  27.           $(function() {  
  28.   
  29.                $.connection.hub.url = "http://localhost:6118/signalr";  
  30.   
  31.                var chat = $.connection.chatHub;  
  32.                chat.client.NewMessage = function(Cl_Name, Cl_Message) {  
  33.   
  34.                     var User = $('<div />').text(Cl_Name).html();  
  35.                     var UserChat = $('<div />').text(Cl_Message).html();  
  36.   
  37.                     $('#Chats').append('<li><strong>' + User +  
  38.                          '</strong>: ' + UserChat + '</li>');  
  39.                };  
  40.                $('#UserName').val(prompt('Please Enter Your Name:', ''));  
  41.                $('#TxtMessage').focus();  
  42.                $.connection.hub.start().done(function() {  
  43.                     $('#BtnSend').click(function() {  
  44.                          chat.server.LetsChat($('#UserName').val(), $('#TxtMessage').val());  
  45.                          $('#TxtMessage').val('').focus();  
  46.                     });  
  47.                });  
  48.           });  
  49.           </script>  
  50.      </body>  
  51.   
  52. </html> 
Step 6: In your Solution Explorer, select your solution and choose "Set Startup Projects" by right-clicking.
 
StartupProject.jpg
 
Step 7: Do as directed below:
 
MultipleProject-in-RC2013.jpg
 
Step 8: Set HtmlPage as a Start Page and run your application. It will run as described in my previous article.
 

Summary

 
This article will help you to self-host your application and use a SignalR application with OWIN. You will create a server and a client using a console and web application. Thanks for reading.