Exclusive offer: get 50% off this eBook here
SignalR: Real-time Application Development

SignalR: Real-time Application Development — Save 50%

Utilize real-time functionality in your .NET applications with ease with this book and ebook

$14.99    $7.50
by Einar Ingebrigtsen | June 2013 | Open Source

This article by Einar Ingebrigtsen, author of SignalR Real Time Application Development, will cover how you connect a client with a server in a very different way, making it seem like you can call code directly on the client from the server and vice versa.

Topics covered in this article are as follows:

  • Setting up a Hub on the server

  • Working of the Hubs

  • Consuming a Hub from a .net client

  • Consuming a Hub from a JavaScript client

At this stage, the developer should be able to use Hubs, and our sample app will now be able to chat properly.

(For more resources related to this topic, see here.)

Moving up one level

While PersistentConnection seems very easy to work with, it is the lowest level in SignalR. It does provide the perfect abstraction for keeping a connection open between a client and a server, but that's just about all it does provide. Working with different operations is not far from how you would deal with things in a regular socket connection, where you basically have to parse whatever is coming from a client and figure out what operation is being asked to be performed based on the input. SignalR provides a higher level of abstraction that removes this need and you can write your server-side code in a more intuitive manner. In SignalR, this higher level of abstraction is called a Hub. Basically, a Hub represents an abstraction that allows you to write classes with methods that take different parameters, as you would with any API in your application, and then makes it completely transparent on the client—at least for JavaScript. This resembles a concept called Remote Procedure Call (RPC), with many incarnations of it out there.

For our chat application at this stage, we basically just want to be able to send a message from a client to the server and have it send the message to all of the other clients connected. To do this, we will now move away from the PersistentConnection and introduce a new class called Hub using the following steps:

  1. First, start off by deleting the ChatConnection class from your Web project.

  2. Now we want to add a Hub implementation instead. Right-click on the SignalRChat project and select Add | New Item.

  3. In the dialog, chose Class and give it a name Chat.cs.

  4. This is the class that will represent our Hub. Make it inherit from Hub:

    Public class Chat : Hub

  5. Add the necessary import statement at the top of the file:

    using Microsoft.AspNet.SignalR.Hubs;

  6. In the class we will add a simple method that the clients will call to send a message. We call the method Send and take one parameter into it; a string which contains the message being sent by the client:

    Public void Send(string message)

  7. From the base class of Hub, we get a few things that we can use. For now we'll be using the Clients property to broadcast to all other clients connected to the Hub. On the Clients property, you'll find an All property which is dynamic; on this we can call anything and the client will just have to subscribe to the method we call, if the client is interested.

    It is possible to change the name of the Hub to not be the same as the class name. An attribute called HubName() can be placed in front of the class to give it a new name. The attribute takes one parameter; the name you want for your Hub. Similarly, for methods inside your Hub, you can use an attribute called HubMethodName() to give the method a different name.

  8. The next thing we need to do is to go into the Global.asax.cs file, and make some changes. Firstly, we remove the .MapConnection(…) line and replace it with a .MapHubs() line. This will make all Hubs in your application automatically accessible from a default URL. All Hubs in the application will be mapped to /signalr/<name of hub>; so more concretely the path will be: http:// <your-site>:port/signalr/<name of hub>. We're going with the defaults for now. It should cover the needs on the server-side code.

  9. Moving into the JavaScript/HTML part of things, SignalR comes with a JavaScript proxy generator that can generate JavaScript proxies from your Hubs mapped using .MapHubs(). This is also subject to the same default URL but will follow the configuration given to .MapHubs().We will need to include a script reference in the HTML code right after the line that references the SignalR JavaScript file. We add the following:

    <script src = "/signalr/hubs" type="text/javascript"></script>

    This will include the generated proxies for our JavaScript client. What this means is that we get whatever is exposed on a Hub generated for us and we can start using it straight away.

  10. Before we get started with the concrete implementation for our web client, we can move all of the custom code revitalizing the Rich Client, for PersistentConnection altogether.

  11. We then want to get to our proxy, and work with it. It sits on the connection object that SignalR adds to jQuery. So, for us, that means an object called chat will be there.

  12. On the the chat object, sit two important properties, one representing the client functions that get invoked when the server "calls" something on the client. And the second one is the property representing the server and all of the functionalities that we can call from the client. Let's start by hooking up the client and its methods. Earlier we implemented in the Hub sitting on the server a call to addMessage() with the message. This can be added to the client property inside the chat Hub instance:

  13. Basically, whenever the server calls that method, our client counterpart will be called. Now what we need to do is to start the Hub and print out when we are connected to the chat window:

    $.connection.hub.start().done(function() {

  14. Then we need to hook up the click event on the button and call the server to send messages. Again, we use the server property sitting on the chat hub instance in the client, which corresponds to a method on the Hub:

    $("#sendButton").click(function() {

  15. You should now have something that looks as follows:

    You may have noticed that the send function on the client is in camelCase and the server-side C# code has it in PascalCase. SignalR automatically translates between the two case types. In general, camelCase is the preferred and the most broadly used casing style in JavaScript—while Pascal being the most used in C#.

  16. You should now be having a full sample in HTML/JavaScript that looks like the following screenshot:

  17. Running it should produce the same result as before, with the exception of the .NET terminal client, which also needs alterations. In fact, let's just get rid of the code inside Program.cs and start over. The client API is a bit rougher in C#; this comes from the more statically typed nature of C#. Sure, it is possible—technically—to get pretty close to what has been done in JavaScript, but it hasn't been a focal point for the SignalR team.

  18. Basically, we need a different connection than the PersistentConnection class. We'll be needing a HubConnection class. From the HubConnection class we can create a proxy for the chat Hub:

  19. As with JavaScript, we can hook up client-side methods that get invoked when the server calls any client. Although as mentioned, not as elegantly as in JavaScript. On the chat Hub instance, we get a method called On(), which can be used to specify a client-side method corresponding to the client call from the server. So we set addMessage to point to a method which, in our case, is for now just an inline lambda expression.

  20. Now we need, as with PersistentConnection, to start the connection and wait until it's connected:


  21. Now we can get user input and send it off to the server. Again, as with client methods called from the server, we have a slightly different approach than with JavaScript; we call the Invoke method giving it the name of the method to call on the server and any arguments. The Invoke() method does take a parameter, so you can specify any number of arguments which will then be sent to the server:

  22. The finished result should look something like the following screenshot, and now work in full correspondence with the JavaScript chat:


Exposing our functionality through Hubs makes it easier to consume on the client, at least on JavaScript based clients, due to the proxy generation. It basically brings it to the client as if it was on the client. With the Hub you also get the ability to call the client from the server in a more natural manner. One of the things often important for applications is the ability to ?lter out messages so you only get messages relevant for your context.

Resources for Article :

Further resources on this subject:

SignalR: Real-time Application Development Utilize real-time functionality in your .NET applications with ease with this book and ebook
Published: June 2013
eBook Price: $14.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :

Einar Ingebrigtsen

Einar Ingebrigtsen has been working professionally with software since 1994—ranging from games development on platforms such as Playstation, Xbox, and the PC, to enterprise line of business application development, which he has been working on since 2002. He has always kept the focus on creating great products with great user experiences, putting the user first. Einar is a Microsoft MVP awardee five years in a row, awarded for his work in the Silverlight space with projects such as Balder, a 3D engine for Silverlight. Today Einar runs a company called Dolittle with partners, doing consultancy and building their own products with their own open source projects at the heart of what they do ( Among the clients that Dolittle has been involved with for the last couple of years, include NRK (largest TV broadcaster in Norway), Statoil (Norwegian oil company), Komplett (largest e-commerce in Norway), and Holte (leading Norwegian developer for construction software).

Additionally, Einar loves doing talks at the user groups and conferences, and has been a frequent speaker at Microsoft venues talking about different topics, the last couple of years talking mostly about architecture, code quality, and cloud computing.

Books From Packt

Microsoft SQL Azure Enterprise Application Development
Microsoft SQL Azure Enterprise Application Development

ASP.NET Site Performance Secrets
ASP.NET Site Performance Secrets

ASP.NET 3.5 Application Architecture and Design
ASP.NET 3.5 Application Architecture and Design

.NET 4.0 Generics Beginner’s Guide
.NET 4.0 Generics Beginner’s Guide

Instant Lucene.NET How-to [Instant]
Instant Lucene.NET How-to [Instant]

Microsoft .NET Framework 4.5 Quickstart Cookbook
Microsoft .NET Framework 4.5 Quickstart Cookbook

.NET Compact Framework 3.5 Data Driven Applications
.NET Compact Framework 3.5 Data Driven Applications

Amazon Web Services: Migrating your .NET Enterprise Application
Amazon Web Services: Migrating your .NET Enterprise Application

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software