Basic Broadcast Hub Using SignalR
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.
Next, let's go ahead and add the 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.
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.
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).
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.
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.
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.
Next, let's add following JavaScript functions to our page.
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 ?
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.