Originally published at: http://www.sitepoint.com/build-real-time-signalr-dashboard-angularjs/
Let’s build a real-time service dashboard!
Our service dashboard will show us real data in real time. It will show us what’s happening on our server and our micro service in near real time, asynchronous, non-blocking fashion.
Take a look at what a full client can look like here.
A demo of the server can be seen here.
We’ll build a smaller version of this dashboard using the AngularJS framework and lots of cool real time charts with lots of real time data. We’ll also build our service using the SignalR and Web API libraries from .NET 4.5.
AngularJS forces great application development practices right out of the box. Everything is injected in, which means there is low coupling of dependencies. Additionally, Angular has a great separation between views, models and controllers.
Angular compliments .NET here by allowing the server side code to remain small, manageable and testable. The server side code is leveraged solely for its strengths – which is to do the heavy lifting.
Using SignalR with Web API for .NET 4.5 is very similar to using Node.js with Socket.IO, and allows for the same type of non-blocking, asynchronous push from the server to subscribing clients. SignalR uses web sockets underneath, but because it abstracts away the communication, it will fall back to whatever technology the client browser supports when running inside Angular. (For example, it may fall back to long polling for older browsers.)
The Meat and Potatoes
All of the AngularJS code used in this tutorial can be found here.
I will go over creating this with your favorite text editor and plain folders, as well as with Visual Studio for those creating a project.
Setup with Plain Text Files
The folder and file structure will look like this:
You will need to download the following files:
- jQuery (choose the “Download the compressed, production jQuery 2.1.1” link)
- AngularJS (click on the large Download option, then click the latest version of Angular 1.3.+)
- Bootstrap (click the “Download Bootstrap” option)
- SignalR (click the “Download ZIP” button on the right)
- D3.js (click the “d3.zip” link half way down the page)
- Epoch (click the “Download v0.6.0 link)
- ng-epoch (click the “Download ZIP” button on the right)
- n3-pie (click the “Download ZIP” button on the right)
Scripts folder we will need:
Setup with Visual Studio
Setting this up through Visual Studio is extremely simple, if text files are too simplistic for you.
Simply set up an empty web application by going to
File -> New -> Project, then select Web as the template type.
Then simply right click on the project, go to
After you download and install those, you should see them all in the Scripts and the Contents folders. Additionally, under installed Nuget Packages, you will see the following:
Finally, Nuget does not contain the Epoch, ng-epoch and n3 charting libraries, so you’ll need to add them manually. Simply follow the steps detailed in the previous section to get these.