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 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 in the Progran.cs file:

using System;

using Microsoft.AspNet.SignalR;

using Microsoft.Owin.Hosting;

using Owin;

 

namespace SignalRHostApp

{

    class Program

    {

        static void Main(string[] args)

        {

            string url = "http://localhost:6118";

            using (WebApp.Start<Startup>(url))

            {

                Console.WriteLine("The Server URL is: {0}", url);

                Console.ReadLine();

            }

        }

    }

 

    class Startup

    {

        public void Configuration(IAppBuilder MyApp)

        {

            MyApp.MapSignalR();

        }

    }

 

    public class ChatHub : Hub

    {

        public void LetsChat(string Cl_Name, string Cl_Message)

        {

            Clients.All.NewMessage(Cl_Name, Cl_Message);

        }

    }

}

 

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:

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>ASP.NET SignalR Chat</title>

 

    <style type="text/css">

        .wrapper {

            background-color: #99CCFF;

            border: thick solid #808080;

            padding: 20px;

            margin: 20px;

        }

    </style>

</head>

 

<body>

    <div class="container">

        <input type="text" id="TxtMessage" />

        <input type="button" id="BtnSend" value="Send" />

        <input type="hidden" id="UserName" />

        <ul id="Chats"></ul>

    </div>

 

 

    <script src="Scripts/jquery-1.6.4.min.js"></script>

    <script src="Scripts/jquery.signalR-2.0.0-rc1.min.js"></script>

    <script src="http://localhost:6118/signalr/hubs"></script>

 

    <script type="text/javascript">

 

        $(function () {

 

            $.connection.hub.url = "http://localhost:6118/signalr";

 

            var chat = $.connection.chatHub;

            chat.client.NewMessage = function (Cl_Name, Cl_Message) {

 

                var User = $('<div />').text(Cl_Name).html();

                var UserChat = $('<div />').text(Cl_Message).html();

 

                $('#Chats').append('<li><strong>' + User

                    + '</strong>: ' + UserChat + '</li>');

            };

            $('#UserName').val(prompt('Please Enter Your Name:', ''));

            $('#TxtMessage').focus();

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

                $('#BtnSend').click(function () {

                    chat.server.LetsChat($('#UserName').val(), $('#TxtMessage').val());

                    $('#TxtMessage').val('').focus();

                });

            });

        });

    </script>

 

</body>

 

</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.