Chatting with SignalR


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:

void Configuration(IAppBuilder 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)

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;



chatHub.client.newMessage = function (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;





addMessage: function (message) {

var self = this;






var model = new Model();


$(function () {





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.











data-bind=”value: message

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



data-bind=”foreach: messages“>

data-bind=”text: $data“></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:









Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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