Creating and Deploying a Cloud-Hosted, Cross-Origin, Protocol Agnostic Push Server in 10 Minutes

Would you like to enable a push service? Here is a very easy way to create one. This service will allow anyone to connect from their site and enable you to send real time push notifications to them, and for them to send notifications to you, and should you choose, to other people connected to your service.

This is even easier if you don’t want to open it up for others to connect to your service and you just want to consume the service yourself, but let’s not take that easy route. We’re going to make it a little more interesting.

Just for fun, let’s also allow people to connect to your service whether they’re connected to a secure (https) site or just a regular site (http).

Step 1:
Launch Visual Studio 2013.

I know, I hadn’t mentioned the tooling we were going to use. This is going to use Visual Studio, C#, SignalR, NuGet, and Microsoft Azure. I’m sure you could accomplish the same thing with nodeJS and socket.io but I don’t know how off the top of my head, and I don’t want to cover both stacks today.

Step 2:
Start new Web Project.

Create a new Web Project

Bonus: Application Insights is right there so you’re going to get helpful telemetry data immediately, and you can access this data through the Azure management portal.

Step 3:
You want to make this an Empty project, hosted in the cloud, with no authentication. While I always recommend unit tests, none for this because we’re keeping it simple.

Project Settings

You’ll also need to complete some Azure settings to publish this in the cloud, such as where your service is going to be hosted.

Complete Azure settings

Step 4:
Right click your project and select Add SignalR Hub Class (v2).

You’re going to need to enter a hub name. For this demo, let’s call it PushNotificationHub.

This is going to generate a SignalR hub, which will handle the server aspects of the communication. We’re keeping this with the auto-generated stuff for this demo, but you will want to place methods here that do more interesting things for your clients to consume.

Step 5:
Right click your project and select Add OWIN Startup Class.

Startup makes sense for a name, so let’s use that.

This will generate a class that ties in with OWIN middleware and will automatically startup your hub when this code is running in the cloud.

Step 6:

Add the Microsoft.Owin.CORS NuGet package.

Adding CORS support.

This will enable adding CORS support to the service.

Step 7: Add this to the Configuration method of the Startup class:

app.Map("/signalr", map =>
{
  map.UseCors(CorsOptions.AllowAll);
  var hubConfiguration = new HubConfiguration();
  map.RunSignalR(hubConfiguration);
});

This maps incoming requests made to the signalr path on your site to the SignalR hub — very important. It also tells the application that CORS is enabled for all domains. This can be limited or removed based on your needs.

Step 8:
Add the Microsoft.AspNet.SignalR.Utils NuGet package.

Adding SignalR utils

This does nothing for your code, but does provide you with a tool in your packages file to manually generate the JavaScript proxy file that will be used by the clients. This is going to be needed to add protocol agnostic support.

Step 9:
Create signalr.exe.config for binding redirect for json.net since there is a reliance on json.NET 4.5.

Sadly, this tool is currently dependent on json.NET 4.5. That’s a great library, but because the official release is now at a higher version, we’ll need to add a binding redirect so that dependencies on the old version are automatically sent looking for the new version.

Create a signalr.exe.config file next to the signalr.exe file in the packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools folder.

The contents of the file should be as follows:

<?xml version="1.0"?>
<configuration>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <!-- Redirect SignalR JSON -->
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
        <bindingRedirect oldVersion="4.5.0.0-6.0.0.0" newVersion="6.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <startup>
    <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>
  </startup>
</configuration>

Step 10:
To create a proxy file, perform the following steps:

  1. Install the Microsoft.AspNet.SignalR.Utils NuGet package.
  2. Open a command prompt and browse to the tools folder that contains the SignalR.exe file. The tools folder is at the following location:
    [your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools
  3. Enter the following command:
    signalr ghp /path:[path to the .dll that contains your Hub class]
    Tip: The path to your .dll is typically the bin folder in your project folder.
    This command creates a file named server.js in the same folder as signalr.exe.
  4. Put the server.js file in an appropriate folder in your project, rename it as appropriate for your application, and add a reference to it in place of the “signalr/hubs” reference.

Step 11:
Place server.js in a relevant folder and add it to your solution.

I prefer to have it in my scripts folder.

Added server.js to scripts

Step 12:
Update the server.js file.

Update the hub connection address with the protocol relative url of the site where the server is going to be hosted. This enables simultaneous support for HTTP and HTTPS.

Updating the hub connection address

Step 13:
Right click the solution, hit Publish and publish to Azure.

Publish to Azure

Now your service is hosted in the cloud. Was creating the service as bad as it sounded when we started?

Step 14:
Add the necessary script references to the client pages.

<script src="//superpushers.azurewebsites.net/Scripts/jquery-1.10.2.min.js"></script>
<script src="//superpushers.azurewebsites.net/Scripts/jquery.signalR-2.0.2.min.js"></script>
<script src="//superpushers.azurewebsites.net/Scripts/server.js"></script>

That’s it! The whole thing is done. The clients can now use JavaScript to consume the methods that are on your hub. Now go out there and create something!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s