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>
Advertisements

3 thoughts on “Using SignalR with Umbraco to broadcast messages (or chat) [15 minutes]

  1. Hi Jonas, came across this page while trying to find a working sample of Signalr chat with Umbraco. The download link doesnt seem to work. Is there a sample that you can share?

  2. to be more specific, I have tried to run the sample where one can create Client-side chat functionality (website users with admin) indivually; the package http://our.umbraco.org/projects/website-utilities/uffchat seems to be a bit too old. There are two .CS files in it referencing the old Signalr. Tried to update them without success. Perhaps you can share few pointers on how to get it to work with up-to-date Signalr?

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