Basic Broadcast Hub Using SignalR

Download Source

In this short blog post we will see how to create SignalR broadcast hub. To keep things short and simple we will not be going in much of the details of what SignalR is and how it provides almost real time communications to the web applications.In order to understand the basics of SignalR, you can hit this link, understanding SignalR.

Setting up the Project

Let's start by creating a basic shell application where we will be hosting our SignalR HUB. I have created a basic Asp .Net MVC 4 application using Visual Studio 2012.

Create MVC 4 Project

Next, let's go ahead and add the SignalR hub.

Add SignalR HUB

Once you add the SignalR Hub it will actually enable the NuGet Package Manager package in your application. As part of the package installation, bunch of JavaScript files will be added to your project as well.

jquery SignalR scripts

Writing HUB Methods

Now, let's define a new Hub method that HUB clients will be invoking. Open the Hub class and define a method similar to what I have in the following screen shot.

HUB broadcast

Next thing we need to do is register our SignalR hub as soon as our application starts. And sounds like Global.asax is the best place to do that. Let's add a new Global Application Class (Global.asax).

Add Global.asax

In the Application_Start event use the RouteTable's method to register our HUB with it's default name and configuration. Out of the box HUB that gets registered will have the default URL of "~/signalr/hubs". That means when the client needs to establish a connection with this HUB, it will have to use this URL.

Register HUB

Creating Clients

With this much setup, we have a simple SignalR Hub running. The next thing we need to do is build a client. And this is where SignalR really shines. It generates JavaScript that automatically has a SignalR JavaScript client. In order to verify this, go ahead and run the application and navigate to the following URL.

SignalR Client

Once that is working, let's go ahead and add the HTML page that will act as a SignalR client. Add two elements to this page. One input box where user can type the message and a button, clicking on which will invoke the HUB's broadcast method.

Add HTML Page

Adding HTML Elements

Next, let's add following JavaScript functions to our page.

JS Client

Let's quickly discuss what we are doing in the code. First of all we are adding the reference to "~/signalr/hubs", which contains the JavaScript client for the HUB.

Conventions Used By SignalR

Next we can see that we are creating the client variable which maps to the broadcastHub. How did I know that this is going to be the variable name of the proxy SignalR HUB ?

SignalR Proxy

This is the convention that SignalR uses. Properties of the SignalR hub will be converted to camelCasing type variables.

  • The actual Hub C# class name was "BroadcastHub" which is converted to "broadcastHub".

  • Similarly, the method on our Hub class was named "Broadcast" which will be converted to "broadcast"

With that explanation, understanding the code displayed in above screen shot should be easy enough.

Let's go ahead and run our application's test page. Open couple of instances on different browsers/tabs and try sending the messages. You should see all the clients receiving the message without client needing to refresh the page.

That's it for now. Have fun with SignalR.