Build a Real-time SignalR Dashboard with AngularJS

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
1 Like

Hello,

Can I just confirm in your “Main Dependencies” section, you’re n3-pie link was supposed to go https://github.com/n3-charts/pie-chart instead it goe’s to https://github.com/n3-charts/line-chart

Thanks,

Jamie

Hi,

I believe that https://github.com/n3-charts/pie-chart was the intended link

“Who doesn’t love lines!” would have a bit of a different connotation.

Anyway, I corrected the link in the article.
Thank you for taking the time to point this out.

Hi,
Thanks for detailed explanation for signalR using angularjs and web api. We have same requirement in our project. Your article very useful to me.
Thanks once again.

Glad it was helpful, it’s pretty basic but you can at least see how to get further from there.

Hi,
This is really good stuff to create the POC for my project. One quick question on the Server Side Solution. There is SignalrBackendService project with SignalWebService project. The SignalrBackendService seems like AzureService related project. I’m familiar with Azure server and can I just host SignalWebService without SignalrBackendService to feed the real time data to the client, the performance dashboard?

Any comment?

Thanks,

Hi,

Great article! Very usefull as a starting point.

Could you also explain how to publish the SignalrBackendService to Azure? I can’t get it to work when I publish it to my own azure account. Do you need to configure a service bus or something?

Thanks

You don’t need to configure anything special on Azure.

The only issue is the “Real” performance metrics through the performance monitor won’t work on Azure because an Azure Website doesn’t run on its own Machine etc, it’s a shared environment. So turn that part off in the performance engine and add your own numbers there, like some random number generation or something else you can capture like logs or users registering or whatever your use case that changes dynamically is.

Locally since you’re running it on a full blown machine all the performance monitors work.

Azure has other performance monitors for websites that I belive you can tap into but I haven’t really played around with those so I can’t advise too much there.

This is meant to be a proof of concept on how one could push data from the server to the client leveraging .NET, SignalR, and angular and the performance metrics seemed like a great use case but unless you have a full server you won’t have access to the performance monitors.

1 Like

Hi Louie,

Thank you very much for your fast response!

This solved my question :wink:

Thanks again.

I have the need to pass several parameters, but when using this method only the first parameter in the list is passed through in result. Any idea why this is?

Great article really appreciate it!

I was wondering if you could do a follow up on securing the connection in a token based oauth fashion or something like that? Thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.