SignalR component for SPEAK in Sitecore 7.1

Following my blog post from earlier this week where I showed how to make SignalR work in Sitecore SPEAK, I thought of another solution to the same issue which is much more streamlined with SPEAK.

The issue which I hacked my way through was that the RequireJS implementation in SPEAK requires that a JavaScript file ends with .js if it does not then .js will be added automatically.

SignalR dynamically generates some JavaScript defining the hubs found in your solution. This script resides at <website>/signalr/hubs with no .js postfix.

To solve this my previous “fix” added a file to the solution called hubs.js which placed a script reference to /signalr/hubs in the html head section. This then lead to another issue regarding the order in which the JavaScript was loaded into the DOM requiring one to use a timeout to ensure that the signalr hubs script was loaded before calling any of the hubs.

So now instead of this messy approach I came up with something a bit more clean using RequireJS.

Fixing the missing .js in SignalR for good

First I added a processor called ResolveSignalrHubs in the resolveScript SPEAK pipeline (use patching in a separate include config file, do not write it directly as I did here).

The processor handles all requests made to the SPEAK customhandler which starts with signalr/hubs.js 

Then it makes a server request to /signalr/hubs, reads the response and encapsulate the returned script in a define which requires the needed jQuery.signalr script.

And now by accessing /-/speak/v1/signalr/hubs.js we get the dynamically generated SignalR hubs script encapsulated in a define stating that the function requires the jquery.signalr script.

This solves the issue, no need for a timeout anymore and all is good.

Now we are ready to really SPEAKify SignalR.

Encapsulating SignalR in SPEAK

Next I’ve created a SPEAK component which wraps the SignalR connection to one specific hub, several SignalR components can exist on the same SPEAK page if several hubs exists.

As a rendering parameter the component takes the name of the SignalR hub otherwise the rendering parameters simply inherits from ComponentBase.

The model has a start function which starts up the connection to the hub and then triggers an event when the connection to the server is setup telling that it is ready for use.

The reason why I do not start the connection right away is because SignalR will require you to set the client broadcast receiver handlers before starting the connection. This feels a bit like a bug/lack in SignalR which can leave you with a lot of debugging headache if you are not aware of this specific sequence in which things need to be coded since there are no warnings or anything, just code which does not work.

Example usage

First we add the SignalR component to a SPEAK page and type in the name of the hub implementation which we want to wrap in this SignalR component.

SignalR Rendering Item

Then in the PageCode we can use the component like this:

Server side we of course also need to implement a Microsoft.AspNet.SignalR.Hub etc.

SPEAK and SignalR

Compared with having all the code for hooking up SignalR in the PageCode directly as I showed in a previous post then this is much easier to read and the SignalR component can be re-used in any SPEAK/SignalR implementation. 

Using SignalR with SPEAK is extremely powerful. Anyone who have played around with SignalR will know that this technology has a huge potential and at the same time is really easy to use.

Imagine SPEAK and SignalR combined with dynamically generated TypeScript header files for getting strongly typed JavaScript. Creating a framework for this would be among, if not the most, powerful framework for creating heavy client side business applications.

Generating TypeScript headers for SignalR can be done using T4 (see for example this T4 template on gitHub). So all we really need is TypeScript for SPEAK.

I will release this SignalR component along with my configured pipelines component as nuGet packages as soon as I have the time for it.

And as with the pipelines I hope Sitecore will endorse these approaches and make it a part of the SPEAK API in future versions. They probably already have a ton of other cool features lined up for 7.2 but I hope there will be room for SignalR as well, if not for 7.2 then later.

I will post a full example on how to use this SignalR component combined with a configured client side pipeline soon.

Anders Laub

Anders Laub Christoffersen

Anders has been working with Sitecore for over a decade and has in this time been the lead developer and architect on several large scale enterprise solutions all around the world. Anders has been nominated a Sitecore Technical MVP three years in a row for 2014, 2015 and 2016. Anders is now working as a Sr. Solutions Architect at Sitecore in Copenhagen.

Leave a Reply

Your email address will not be published. Required fields are marked *