Using SignalR with Umbraco to broadcast messages (or chat) [15 minutes]

My goal with this is to have a way to send messages from running tasks to me (and other admins) using a broadcast method … aswell as have some fun playing with SignalR which looks really cool :).

Just by adding the SignalR dll and js files and some minimal code you’ll get started with SignalR within an Umbraco application in 15 minutes.

Installation
1. Either download and install my little uSignalR experimental package (SignalR files from 2011-11-21) or run the SignalR Nuget to get fresh files from the source, and add the myconnection.cs and the two templates as shown below.

2. I could not find out how to add a reserved url to the web.config using package actions, so you will need to add ~/echo manually in your web.config:

...
<appSettings>
...
<add key="umbracoReservedUrls" value="~/config/splashes/booting.aspx,~/install/default.aspx,~/config/splashes/noNodes.aspx,~/echo"/>
...

Then just open the /mysite/recieve page in two (or more) browsers and start “chatting”. And to try the server send functionality – open the /mysite/send page . You can see the code here below. To read more and explore the possibilities : look at the SignalR wiki

Brief explanation of the parts that makes it happen

In /App_Code/MyConnection.cs we hook up the connection which listens to messages and broadcasts them to the listeners.

using System;
using System.Threading.Tasks;
using SignalR;

public class MyConnection : PersistentConnection
{
    protected override Task OnReceivedAsync(string clientId, string data)
    {
        return Connection.Broadcast(data);
    }
}

public class MySignalRRoute : umbraco.BusinessLogic.ApplicationBase
{
    public MySignalRRoute()
    {
        SignalR.Routing.RouteExtensions.MapConnection<MyConnection>(System.Web.Routing.RouteTable.Routes, "echo", "echo/{*operation}");
    }
}

In the “Send” Template we just send messages to all listeners.

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<umbraco:macro runat="server" language="cshtml">
@{
    SignalR.Connection.GetConnection<MyConnection>().Broadcast("This is a message from the server");   
}
</umbraco:macro>
</asp:Content>

The “Recieve” Template is only html + javascript which lets the users send and listen to messages.

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        var connection = $.connection('echo');
        connection.received(function (data) {
            $('#messages').append('<li>' + data + '</li>');
        });

        connection.start();

        $("#broadcast").click(function () {
            connection.send($('#msg').val());
        });
    });
</script>

<input type="text" id="msg" />
<input type="button" id="broadcast" value="broadcast" />

<ul id="messages">
</ul>
</asp:Content>

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.