SignalR: Real-time Application Development — Save 50%
Utilize real-time functionality in your .NET applications with ease with this book and ebook
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
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
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:
First, start off by deleting the ChatConnection class from your Web project.
Now we want to add a Hub implementation instead. Right-click on the SignalRChat project and select Add | New Item.
In the dialog, chose Class and give it a name Chat.cs.
This is the class that will represent our Hub. Make it inherit from Hub:
Public class Chat : Hub
Add the necessary import statement at the top of the file:
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)
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.
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.
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.
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.
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:
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:
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:
You should now have something that looks as follows:
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:
Now we need, as with PersistentConnection, to start the connection and wait until it's connected:
Resources for Article :
- Working with Microsoft Dynamics AX and .NET: Part 1 [Article]
- Working with Microsoft Dynamics AX and .NET: Part 2 [Article]
- Deploying .NET-based Applications on to Microsoft Windows CE Enabled Smart Devices [Article]
eBook Price: $14.99
Book Price: $34.99
About the Author :
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 (http://github.com/dolittle). 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.