I haven’t messed around much with SignalR yet – but it’s going to become an important part of my toolbox whenever it comes to asynchronous surfacing of data. This isn’t a fit for every application – often near-time is fine – but for instant, up to date numbers – think a stock screen or a chat application – it’s TERRIFIC. Let’s do a simple demo and see how it works:

First open up Visual Studio 2013 and create a web application:

And make sure it’s an MVC app:

At the Package Manager Console, enter “install Microsoft.aspnet.signalr” – yes this could be done in NuGet as well:

NuGet Route:

Search for SignalR and install Microsoft ASP.NET SignalR (installing this will install Core Components, Javascript, and System.web pieces).

You’ll see a readme file (after it downloads its dependent assemblies) like the following. Love that explicit messaging!

Add those lines above to a class called Startup.cs in the root folder – if you installed this it should already be pre-created –so it has a Configuration method that looks like this:

public
void Configuration(IAppBuilder app)

{

app.MapSignalR();

//ConfigureAuth(app);

}

 

I’ve chosen to comment out configuration for the authentication, since we’re not going to do that for this demo. Then, create a new folder called “Hubs” and add a new SignalR Hub Class:

 

Replace the “Hello” method with the following for this simple chat application:

        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
            //ConfigureAuth(app);
        }

Above, the Clients.All is dynamically created – so it’s very customizable. We could put the Clients into groups, or exclude a set (Admins, for example).

Try building your project, and point to SignalR/hubs. Notice the following when I navigate to {localhost}/SignalR/hubs:

 

Notice in the footer area your shiny new method with a Send. If you had built this earlier, you’d be seeing a Hello function visible to clients:

 

Let’s use Knockout for the fancy-dancy data binding. Use NuGet to pull down the latest version of KnockoutJS. Then, create a javascript class under Scripts and fill it with the following code:

 

(function () {

 


var chatHub = $.connection.chatHub;

$.connection.hub.logging = true;

$.connection.hub.start();

 

chatHub.client.newMessage = function (message) {

model.addMessage(message);

};

 

 


var Model = function () {


var self = this;

self.message = ko.observable(“”),

self.messages = ko.observableArray()

self.counters = ko.observableArray()

};

 

Model.prototype = {

 

sendMessage: function () {


var self = this;

chatHub.server.send(self.message());

self.message(“”);

},

 

addMessage: function (message) {


var self = this;

self.messages.push(message);

}

 

};

 


var model = new Model();

 

$(function () {

ko.applyBindings(model);

});

 

}());

Now to add a client to allow the creation of messages. You could add the following to an empty view using MVC, or embed this in a user control – or use Bootstrap’s modal to have it as a popup.

 

 

<script
src=”../Scripts/jquery.signalR-2.0.3.js”></script>

<script
src=”../SignalR/hubs”></script>

<script
src=”../Scripts/knockout-3.1.0.js”></script>

<script
src=”../Scripts/chatSurf.js”></script>

<div
class=”row”>

 

<div
class=”col-md-4″>

Comments:

<input
type=”text”
placeholder=”Message”
data-bind=”value: message“
/>

<button
class=”btn btn-primary”
data-bind=”click: sendMessage“>Send</button>

</div>

<div
class=”col-md-8″>

<div
data-bind=”foreach: messages“>

<div
data-bind=”text: $data“></div>

</div>

</div>

</div>

 

That’s enough for our demo purposes. I dragged the user control onto another form and build the project – let’s see what we get:

You’ll notice, there’s no identity for the current user – that’s something I need to add to my application (since currently users are not authenticated). That’s for a future iteration. Also, next up – I want to make that a scrollable DIV showing the most recent 5 posts, have Knockout save its records to a database, and allow the flagging of particular messages as Critical (with specific coloring).

However, it was an instructive walkthrough for me of what SignalR can do. For real-time streaming of information – such as facility alerts that you want broadcast to a set of subscriber clients – it’s REALLY hard to beat.

Some Footnotes

• Note that Scott Hanselman did a neater example using just a handful of lines of code in this post. Some of the coding is a little dated but it does show a chat app in <12 lines of code:

 

• There’s been at least one cool rudimentary game developed using SignalR: http://shootr.signalr.net
• Microsoft has an excellent set of tutorials on the subject: http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20 (and also here for more examples)
• And I’d be remiss if I didn’t mention Scott Allen’s excellent set of tutorials on Pluralsight. He even did one using MongoDB. The guy’s AMAZING.