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.
Technology Architecture
The Client
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.
The Server
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.)
Additionally, with the dynamic tag and the magic of Json.NET, JavaScript is treated like a first class citizen by the .NET framework. In fact, it is often easier to consume Web API and SignalR technologies in JavaScript than even through native .NET clients, because they were built with JavaScript in mind.
The Meat and Potatoes
Get Setup
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:
root
app (Angular application specific JavaScript)
Content (CSS etc.)
Scripts (Referenced JavaScript etc.)
...
index.html
Main Dependencies
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)
In our Scripts
folder we will need:
jquery-2.1.1.min.js
angular.min.js
bootstrap.min.js
jquery.signalR.min.js
d3.min.js
epoch.min.js
pie-chart.min.js
In our Content
folder:
bootstrap.min.css
epoch.min.css
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 Manage Nuget Packages
and search for and download jQuery, AngularJS, Bootstrap, D3 and the SignalR JavaScript Client.
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.
Continue reading this article on SitePoint