Using SignalR to build an Api (in Umbraco, WebMatrix or MVC)

I wrote a blog post the other day about using plain Razor scripts to create an easy to maintain Api on an Umbraco site. It’s a very straight forward way to make ajax-calls possible. However in reality I think many would say razor files is just not the right choice for server functionality like this, and for bigger solutions I do agree on that.

The Umbraco standard way would be to use /Base. And the new AspNet WebApi would be another obvious alternative for it.

But in this post I like to discuss using SignalR as a surprisingly nice technique for common api-functionality. Yes, SignalR is not only very nice for duplex, multiuser communications. With it’s fallback support, automatic routing and javascript proxy to serverside methods I really think it’s a stable and easy to use technique also for regular ajax scenarios.

Here are the only steps you need to go through to get a simple api up with SignalR:

1. Reserve the path /SignalR/Hubs within Umbraco web.config umbracoReservedPaths.
2. Install-Package SignalR in your site
3. Create a Hub with some methods that you like to expose to the client side

public class OrderHub : Hub
{
  public Order Get(int id)
  {
    return WebApp.Db.SingleOrDefault<Order>(id);
  }
}

4. Reference the necessary javascripts on your page

<...jquery...>
<script type="text/javascript" src="/scripts/jquery.signalR-0.5.3.js"></script>
<script type="text/javascript" src="/signalr/hubs"></script>

5. Add signalr client scripts

// start the connection (it's extended from $)
$.connection.start()

// get something from the server, we can use our OrderHub method names (automatically camel cased), 
// use a callback to do something with the retrieved order
  $.connection.orderHub.get(orderId, 
    function(order){
      alert("Yay, order " + order.name + " from " + order.date);
    });
}

There you go, basic api-functionality with a few lines of code.

You can send jsons from client to server aswell, and get them as your own types (Poco’s) on the server side.

The /signalr/hubs path is a path to an automatically generated javascript file that creates a proxy to your server methods. Open up that path in your browser to check out the code.

And when you do need chat functionality, or you like to push information from server to client, thats also easily possible, just check out the numerous SignalR samples and the docs.

Pros

* Easy to setup and use, no need for web.config editing or adding routes
* The js proxy makes your javascript short and nice + it’s possible to explore the api with a javascript console, in Chrome and Firefox you even get intellisense for you callable server side methods.
* Push and duplex communication available when you need
* Falls back to IE6 iirc
* Cool library
* Great support and still under heavy development

Cons

* New and not that well tested, changes between each new version
* Requires Javascript on client
* No Rest (if that’s a requirement)
* Limited to 6 connections at a time (user cannot have more tab’s open in his/hers browser to your application)
* Can’t use Session in a hub (but that might be a Pro)

Some futher comments and observations

Its nice to have the hubs in a separate VS project “MyProject.SignalR” or “MyProject.Core”. When doing so the nuget to install in that core project would be SignalR.Server. And the full SignalR should be installed in the Umbraco web site project.

You can get current (logged in) username in a hub with the standard call to System.Web.Security.Membership.GetUser();

Hub’s are per request

No need to collect all functions in one Hub, use several Hubs to separate stuff

I don’t think you can use Umbraco context in a hub ootb. Will check that out futher on, my use case here was to build a BL api to be used in a Umbraco site, not to expose Umbraco functionality.

Two other blog posts that talks about using SignalR for regular ajax calls:

Clean up your MVC app with SignalR by Yngve Bakken Nilsen

Why should ASP.NET developers consider SignalR for ALL projects? by Kevin Griffin

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s