.netfreak: ASP.Net SignalR IIS hosting

Recently I created a sample SignalR simple chat application. That included a hub class and the calling client in the same application i.e. when the client application is hosted, the hub get's hosted itself. You can check that article here. But after creating that, I realized that what if we need to have the hub and the client applications separately, say the hub is hosted as one application in IIS and the client application is hosted on another server. So decided to create these two as separate applications and see what configurations are required for them.

So let's start by creating the hub class. For this, we create a new empty asp.net application. Next, in order to make it a server hub class, we add references to the SignalR package using nuget package manager. This also includes the OWIN libraries so that the OWIN Starup class can be created for this.

Next, we add a class file to create a hub on the server and name it as ServerHub.cs. This will be having the same method which we had in our previous article of chat application i.e. BroadCastMessage. We will derive it from the Hub class. So the code will look like below:

 using Microsoft.AspNet.SignalR;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;

 namespace HubClass
 {
    public class ServerHub : Hub
    {
        public void BroadCastMessage(String msgFrom, String msg)
        {
            Clients.All.receiveMessage(msgFrom, msg);
        }
    }
 }

Next, we add another class and name it as Startup.cs, which will be for OWIN startup class. We add the OwinStartup attribute and Configuration method. Here, an important point is needed to be considered. This is app.UseCors(CoreOptions.AllowAll), which is required for cross domain calls, between the hub and the client. If we hover over it, it's definition can be seen as:

Adds a CORS middleware to your web application pipeline to allow cross domain

So the code will look like thee following:

 using Microsoft.AspNet.SignalR;
 using Microsoft.Owin;
 using Microsoft.Owin.Cors;
 using Owin;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;

 [assembly: OwinStartup(typeof(HubClassStartup))]
 namespace HubClass
 {
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.UseCors(CorsOptions.AllowAll);
            app.MapSignalR();
        }
    }
 }

So our server hub is now ready to be hosted in IIS. Open your IIS and create a new virtual application under the Default Website. We will name it as ServerHub and point it to location of our code. See the image below:

Now, start the website and click on Browse application to see the hub hosted. In order to make sure that the hub is hosted properly, add the suffix '/signalr/hubs' to the url of the application. This will load the hub proxy javascript file in the browser. See the image below:

So our hub is now ready to be called from a separate application. For this, we create another empty asp.net application and add an html page. All the client calling code will remain the same, except two changes are to be made. But before we that, we need to add reference to the signalr client libraries, including the javascript files. See the image below:

So our solution will look like the following:

The first change we make is the url reference to the javascript proxy file which will help in connecting to the server hub. This will be changed to the following:

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

Note that we have added the base url where the hub is hosted, to the reference. The second change we make is, add the hub url to be of the same location, where we have the hub hosted. So it will be like the following:

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

Rest of the code remain the same and can be checked at: http://dotnetfreakblog.blogspot.com/2015/02/chat-application-using-aspnet-signal-r.html

That's it. Run the application in two different browsers and you can see the code in action.