Using SignalR in a Sitecore 7.1 SPEAK application

During the Sitecore Hackathon we decided to implement a chat app for Sitecore editors so it is possible to send text messages to other online editors.

To do this we wanted to use SignalR and SPEAK for the UI part. Setting up SignalR and creating the SPEAK layout was done quickly but it quickly became obvious that using the two together could be trickier than anticipated.

The issue was not with SPEAK itself or SignalR but with RequireJS and the order in which Javascript is loaded.

SignalR creates a piece of JavaScript dynamically based on your hub definitions. This JavaScript is then accessed on <website>/signalr/hubs notice that there is no .js postfixed on the path.

This is not good because the SPEAK utilization of RequireJS expects a .js filename on JavaScript files.

Well some hacking was needed, this is not pretty but it works.

First I’ve created a js file called hubs.js

This small script places a script tag in the page head section which points to /signalr/hubs

Then I’ve added a source folder in config for the speak.client.resolveScript pipeline.

In the SPEAK page code I then required the scripts needed by SignalR

That was almost it. All the scripts are now being loaded without having to create a SPEAK component for holding the reference or use the SPEAK-Script reference items (which are not working properly in the current version of SPEAK).

The last thing is a bit of a hack. To ensure that the /signalr/hubs script has been loaded into the DOM we make a check to see if the SignalR connection contains the hub we expect it to contain. If it does not then we wait 100 milliseconds and check again.

When the object is no longer undefined then we start up the hub and configure the connection.

I will write some more posts about the chat app and release it on market place soon. It needs a whole lot of polishing though, time ran out quickly at the Hackathon and this hack took some hours to come up with. Anyway, here is a small first version screenshot as a teaser.

Awesome Chat for Sitecore

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.

One thought on “Using SignalR in a Sitecore 7.1 SPEAK application

Leave a Reply

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