A simple SignalR Tutorial
SignalR is a great tool that provides a listener on both the client and server side allowing for live data on the page without the need for timed ajax calls. In this post I have tried to provide a clean and simple example of using SignalR in an MVC4 application. MVC4 is now available by downloading the new Visual Studio 2012 Express for Web which is what I have used to create the example.
Firstly you will need to obtain the nuget package for jQuery and SignalR by Right-clicking ‘References’ in the Solution Explorer and selecting ‘Manage NuGet Packages’:
From here search for jQuery, usually new MVC applications will already include jQuery so the result may show a green tick next to it. If not click Install, if so check if it has an Update available and install this as the default jQuery included in the new application may be slightly out of date.
Next search for SignalR and you should get the following items:
You will see the green ticks because I have this installed for my application already. Don’t worry about all the other items with a tick starting with SignalR, just install the one labelled ‘SignalR’ and the others are installed automatically, there’s no need to install each one individually (isn’t NuGet awesome!!).
For the content of the page I will simply use a textbox, a button and an un-ordered list:
<input type="text" id="message" /> <input type="button" id="broadcast" /> <ul id="messages"></ul>
To include SignalR on the page you will need to include the following lines, baring in mind the 1st line will need to reflect the version of that file in your Scripts folder. I recommended you put them at the bottom of the View after your Content (or use a section on a Layout page at the bottom and put them in there):
Now we need to setup our ‘Hub’. A Hub is what SignalR uses to communicate between the client and the server, to keep them seperate from everything else in your solution it’s good practice to create a new folder in your solution called Hubs and place them in there. To create a new Hub, right-click on the newly created Hubs folder and add a new Class, call it whatever you like an example would be MessagesHub.cs.
You will need to include SignalR.Hubs in the using statements at the top of the class. Here is code for our example Hub with explanations as to what everything is for:
What’s happening here is that we have declared a function in a Hub that can be called client side on our page, this function then calls a function back on the client side.
Now for the client side code, again I have put all the code down for you and explained what everything is for:
Hopefully that’s not too confusing and you can see how easy it actually is to use and extend upon once setup.
And before you think you can achieve the same result on the page simply by appending to the ul without calling the Hub function, just remember SignalR is being used here to represent live data. Open a second copy of the page in a new window and watch in amazement as the other is updated as soon as you enter a new message without having an ajax call to get the latest message, not to mention there’s no database being used here.