SignalR started off as an OSS side project by Damien Edwards and David Fowler at Microsoft but soon it snowballed into a popular abstraction for persistent connections in .NET. With the release of Visual Studio Web Update 2012.2, SignalR was formally rolled into a part of ASP.NET and is now an open source component that is fully supported by Microsoft.

In the past, we have explored interesting ways to use SignalR here on DotNetCurry. Our first SignalR post demonstrated how to use SignalR with the excellent Diff-Patch-Match library by Neil Fraser and build a collaborative ‘Review’ functionality where two people or more people can review the same post and view changes made by each other, in real time.

With the release of Windows 8 and Office 2013 came One Note that had similar real-time ‘review’ functionality.

Today we will use SignalR, ASP.NET MVC’s Hot Towel application template and the JavaScript Diff-Patch-Match library to build a single page application that will broadcast changes to a ‘Note’ to all who are watching it.

The Concept

SignalR as we know helps us maintain persistent connections between a server and a client. The Server is typically an IIS hosted ASP.NET application, but it could very well be a Katana hosted or Mono Hosted non-IIS server. There is a wide array of clients supported, some official, some community built. The JavaScript client is official. Today we are going to use it with the JavaScript client.

Our application will be a Note taking application where users can share the URL of their note with others who can then watch changes being made in real time.

Hot Towel and Single Page Apps

The Hot Towel application template was created by noted .NET Community member John Papa. If you are a subscriber to the DNC Magazine you would have got a chance to read through Fanie Reynders excellent introduction to the Hot Towel SPA article. If not, we strongly suggest you go through it. We’ll cover only data access here today. We leave navigation and routing for another day.

The Hot Towel Template

This Visual Studio template was created by John Papa to provide all the moving pieces required to build a complete Single Page application in one template. To understand ‘All Pieces’ let’s look at this diagram that I snagged from John Papa’s hour long tutorial at the DotNetConf. You can see the full video on YouTube here.

As you can see, John has highlighted the features of each SPA template currently available. His idea behind Hot Towel was to have something that you can get up and running with quickly without having to ‘delete’ anything in the template. In that respect, all the templates in blue have Sample implementation showing a simple ToDo app. So if you want to use any of those templates, you have to take the code for the ToDo app out first. However the templates in Orange are empty templates with all the ingredients in and ready to start as in you don’t have to delete anything to get started.

So Hot Towel template essentially uses Knockout for Data binding, provides Rich Data support via BreezeJS, has Navigation and History built in and is based off DurandalJS SPA framework by Rob Eisenberg.

The SignalR Application Setup

To keep things simple today, we’ll add a single Note to the Database via SQL query; the Note will store three pieces of information

- Name

- Note Content

- Date Updated

For brevity, we’ll ignore Authentication and Authorization for now. The data will be stored in SQL Server LocalDB and we’ll use Entity Framework for persisting data.

Getting Started

We start off with an ASP.NET MVC 4 Web Application using .NET Framework 4.5 and select the “Hot Towel Single Page Application” project template.

Once the project is setup, let’s spend a few minutes understanding the project layout.

The Project Layout

As seen in the image below, the most apparent ‘new’ folder is the App folder that is not usually associated with a normal MVC Project.

The App Folder

The App folder for an SPA application is basically where your client side logic lies. It’s like a project inside a project. It contains the ViewModel (JavaScript), the Views (html) as well as Services like logging, DataContext and initialization. Note that almost all the ViewModel JS files have a corresponding view. Nav and Footer are two sub-views who use the view model of their parent that is shell.js.

The Durandal subfolder contains its dependencies, composition code, plugins and other bootstrap code that we can use as-is for the moment.

The App_Start Folder

The App_Start folder has the additional BreezeWebApiConfig.cs that uses the MVC WebActivator hooks to initialize a BreezeApi route. The HotTowelConfig.cs Registers all the Bundles whereas the HotTowelRouteConfig registers the HotTowel Route as the default by inserting it before the MVC Route. (The WebActivator kicks in before the Application_Start is invoked).

The First Run

With this rudimentary idea of what the various project components are, let’s change the App\Views\nav.html’s header from HotTowel SPA to CollaboratR. Run the Application. You should see a view similar to the following:

Including SignalR

Now that we have our SPA going, let’s include SignalR in the mix and test it out.

Installing SignalR

1. In the Package Manager Console type in the following to install SignalR.

PM> install-package Microsoft.Aspnet.SignalR

2. Once all the dependencies and the SignalR library is installed, add the highlighted code to the beginning of the RegisterHotTowelPreStart method in the App_Start\HotTowelRouteConfig.cs Application_Start in the Global.asax to call

The Test Run

Now run the application and open it in two browsers. Click on the Send Message… button and see the same message being updated on both clients

Cool! SignalR is working along with the Hot Towel framework. Let’s move on to our real requirement.

The Implementation

We start off by creating our Data Entity - Note and the required plumbing to Save and Retrieve it from database. Once that is done, we’ll update the Home.html to show the notes. Here the Text field will be an editor where we’ll do the SignalR magic to show updates on multiple browsers in Real-Time.

The Data Layer

1. In the Models folder we add a new class called Note with the following properties.

The Web API Service

Now that our Data entity and DBContext is setup, time to setup the service that will retrieve all the data as well as save new Data.

The BreezeController

In the Controllers folder, we add a new class called BreezeController as follows and decorate it with an attribute [Breeze.WebApi.BreezeController]. In the class below, we see an EFContextProvider class which is essentially a wrapper for dealing with JSon inputs. Notice the super compact implementation where we have only SaveChanges method for save new or updated Notes. Other two methods are for fetching MetaData or an IQueryable for all the Notes in the system.

4. Finally we need the corresponding method in the Hub class, so we update the CollaboratoRHub.cs to get the updatedText as an input parameter. It is then sent back to all other connections except for the sender. The ‘Others’ dynamic property on which we are calling the ‘Patch’ ensures that SIgnalR doesn’t call back the client from where the change originated.

With the Diff and Patch logic in, we are ready to roll. First we insert a row of data in our database

Next we run the app.

We open a second browser with the same URL. Now as we update one Note, the other one gets updated. Proof that the diff-match-patch is actually patching, is by typing in both the screens to see changes being merged at both ends.

Awesome right? Well that’s a wrap for today.

Conclusion

Today we saw a mashup created using the Hot Towel Single Page App template for ASP.NET MVC4, along with SignalR and a nifty little Diff-Match-Patch library, to get realtime and concurrent updates to a document.

We also saw how to retrieve data from a database in the Hot Towel SPA template. Will anyone of you be interested to see how to do complete CRUD operations and upgrade the simple text editor to a Rich Text Editor. If yes, let me know in the comments section.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Excellent article !!
Will anyone of you be interested to see how to do complete CRUD operations and upgrade the simple text editor to a Rich Text Editor - Yes, Definitely !!

Comment posted by
Timbo
on Wednesday, June 26, 2013 1:29 AM

Is there any chance of updating this example's nuget references on the github repositry? I have tried and unable to make this work. If i update all references but breeze then it work's but once i update breeze i get a javascript error as seen in this stackoverflow post http://stackoverflow.com/questions/17273993/breeze-1-3-6-cannot-get-metadata

Comment posted by
Sembrador
on Friday, July 19, 2013 5:13 PM

Superb article!!!
Will anyone of you be interested to see how to do complete CRUD operations and upgrade the simple text editor to a Rich Text Editor - YES!!!

Comment posted by
Sembrador
on Saturday, July 20, 2013 10:44 AM

Superb article!!!
Will anyone of you be interested to see how to do complete CRUD operations and upgrade the simple text editor to a Rich Text Editor - YES!!!

Comment posted by
Sembrador
on Sunday, July 28, 2013 7:51 AM

Superb article!!!
Will anyone of you be interested to see how to do complete CRUD operations and upgrade the simple text editor to a Rich Text Editor - YES!!!

Comment posted by
Robert
on Saturday, August 10, 2013 1:28 AM

CRUD and rich text, yes please. One interesting note on this SignalR site - when you make changes in one browser/client, you can go to the other one and type CTRL+Z and it will undo them. So, it is re-creating the action of typing or deleting on the other clients. Really cool. I also want to do some collaboration with arranging graphics/icons on a layout. Thanks for this article!!!

Comment posted by
santosh
on Thursday, August 22, 2013 6:31 AM

Superb article!!!
yes i want to see how to do complete CRUD operations and upgrade the simple text editor to a Rich Text Editor.

Comment posted by
Tole
on Wednesday, September 4, 2013 12:01 PM

Excellent article!!

CRUD operations? definetly yes

Comment posted by
Shakti
on Wednesday, October 9, 2013 4:54 AM

Nice article!!
Yes, I would definitely want to know how tp do complete CRUD operations and upgrade the simple text editor to a Rich Text Editor

Comment posted by
Michael Kassa
on Friday, October 18, 2013 3:15 PM

Thank you very much, just what I needed!

Comment posted by
norb
on Wednesday, November 13, 2013 4:31 AM

very nice work indeed. I would also like to see a second part turning it into a full CRUD app

Comment posted by
ElmerM
on Sunday, December 29, 2013 6:40 PM

Great! There is so much power in these frameworks.
CRUD please.

Comment posted by
Steve F
on Tuesday, April 1, 2014 2:25 PM

That violates the laws of physics! (Recalling a statement from Stephen Walther regarding ajax in the book ASP.NET.) Very cool stuff Suprotim.