To follow the sample code in this article, you will need Visual Studio 2012 and a copy of the Telerik ASP.net AJAX controls. The trial version of the controls will work with this sample, and is available for download.
What is SignalR?
SignalR can be used anywhere within the ASP.Net ecosystem: as a component within WebForms, MVC, or WebPage projects. In any application where a browser refresh is needed to see more data, we can potentially inject SignalR to provide a better experience. Additionally, there are client libraries available if you would like to connect an application, not just a browser, to be able to receive real-time content from your ASP.Net web service.
I Already Have RadNotifications, How Does SignalR Help Me?
The RadNotification control as delivered provides the ability to check for notifications on a periodic basis. There is an UpdateInterval property that defines the number of milliseconds between server-side checks for data. These requests are even smaller than regular AJAX postbacks as they rely on the ICallbackEventHandler interface MS gave us, so they skip the Render phase of the page lifecycle. When the notification control connects to your webserver, it triggers the OnCallbackUpdate server-side event. It is inside of this event that you would construct content to be displayed in the Notification control.
Building the Sample Project
In this sample, I am going to start a new Telerik C# RadControls Web Application and select the Black theme as the default skin. I will add the references to the SignalR libraries with the following commands in the NuGet package manager window:
Install-Package Microsoft.AspNet.SignalR.SystemWeb –pre
Install-Package Microsoft.AspNet.SignalR.Js –pre
Listing 1 - NuGet commands to add SignalR to a web project
Listing 2 - Script Includes required to connect a browser to a SignalR service
Notice the third script that is included. This references the SignalR server-side code that will communicate with our web browser. More on that later. Next, I am going to add a textbox for transmitting a notification message to all connected clients. I will also add my RadNotification with a Slide animation and a ContentTemplate that contains a span tag where I will place incoming message content:
Message to send to all connected clients:
Listing 3 - Code to present a 'Send Notification' form and the Notification Control
At this point, we have not really done anything that different from a normal implementation of a RadNotification. Here is where things start to change: I am next going to add a class file to the project and call it NotificationHub. This server-side code will replace the OnCallbackUpdate or WCF service in the standard Notification control, and provide content to the browser.
This class will descend from a SignalR Hub and contain one method to relay messages to all clients:
NotificationHub : Microsoft.AspNet.SignalR.Hub
Listing 4 - A small communication hub that will relay messages to other connected clients
notificationHub = $.connection.notificationHub;
$radNotify = $find(
server = $.connection.notificationHub.server;
To expose the Notify method that our NotificationHub will call on the client, we attach a function with a matching signature to the notificationHub.client object. Inside this method, we set the text of our notification with the set_text() method of the $radNotify object. The final task is a standard RadNotification client-side show command.
The next line is very important. In order for communications to flow back and forth between server and client, you must call start() on the $.connection.hub object. If you do not call start, the SignalR client will never initiate communications with the server. There is no need to call an end method, as the connection will simply time-out if the client goes away.
With these snippets of code in place, I can start up several different browsers and transmit a notification to all of them at the same time. Our RadNotification control will immediately display all of the messages.
Figure 1 – A notification sent from Chrome to Firefox and Internet Explorer connected browsers
We went through a very simple example to show how you can breathe new life into the RadNotification control with the new SignalR framework in ASP.Net. The source code of this sample is available for download. There are many ways that you can use SignalR to add real-time functionality to all of the ASP.Net AJAX controls. What can you do with SignalR and our AJAX controls? Download a copy of the AJAX Controls, grab a copy of the SignalR toolkit from NuGet and let me know what amazing techniques you come up with in the comments below.