Over a million developers have joined DZone.

Real-Time Signalr and Angular 2 Dashboard

DZone's Guide to

Real-Time Signalr and Angular 2 Dashboard

Check out the author's new SignalRDashboard GitHub repo and what he has to say about real-time Signalr.

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

For a while now, I've had that burning curiosity to do more than just the bit of hacking around with SignalR that I'd previously done. I wanted to actually start building something with it. If you're not familiar with it, SignalR is a:

...library for ASP.NET developers that makes developing real-time web functionality easy.

It provides a simple way to have two-way communication between the client and server; the server can push updates/data to any connected client. There are a number of great starting examples out there, but to give a very quick overview, a typical basic example is web-based chat functionality. When a user navigates to the chat page using their browser-of-choice, a connection is made to a SignalR "hub" on the server, using Javascript. This connection provides the channel for bi-directional client-server communication. When a user enters some text in the UI and presses send, a message is sent across this channel to the server, invoking a method on the hub. In the case of a basic chat example, this then broadcasts the message out to all the clients who are connected to that hub, which results in a Javascript method on the client being called to then render that message out to each user's screen.

No need to make AJAX requests to send requests to the server. No need to make AJAX requests to make polling-style requests to the server for updates. SignalR handles the approach used to maintain the communication channel between the client browser and the server, depending on the functionality supported by the browser. It also handles the nuts and bolts of how to broadcast out to any connected clients.

Enter the Dashboard

In the dev room I work in, we've had a large screen showing a dashboard of metrics for years - evolving over time as we realize the value of new metrics. I decided that a great learning project to work on in my spare time would be to create a real-time web-based replacement (the original one was a WPF app). I'm a big fan of giving visibility of relevant and timely, high-level application metrics to the business. Current CI build broken? Show it. Recent system error rates? Show it. How many stories do the test team have left to accept? Show it. That ability to take a quick glance, and get a quick feel for the current state of play across a wide area of the business, is invaluable. It's also handy to have things flash and/or play a sound, when there's something of particular importance to flag up.

From a technical perspective, I set myself a number of goals I wanted to achieve:

  • a centralised dashboard accessible across all areas of the business (it's an ASP.NET MVC 5 web app...job done!)
  • no matter how many clients are connected to the dashboard, I don't want to increase the load on the systems/services that the dashboard is drawing data from
  • try out a new (to me) Javascript framework to aid the creation of slick, dynamic views
  • create an dashboard framework that's easy to extend, with some demo dashboard components so hopefully others interested in the technology can find it useful, and better still, put it to use in their own environments

Moar learning!

AngularJS has also been on my radar for a while, and with Angular 2 coming along as the successor to Angular 1, it seemed like a chance to have a play around with that too. When I first started hacking about with it, an early beta version was available which I started off using. More recently, the Final Release has become available — so I have since upgraded to that, patching up where there were breaking changes.

GitHub Repo

The result is a cunningly named (does-what-it-says-on-the-tin) SignalRDashboard project GitHub repo. There are a few demo components as examples, and I plan to add to those as and when I have time. It is still very much work in progress and evolving!

Here's a quick screenshot with some of the demo components currently written (all randomly generated data, refreshing every 15 seconds):

As always, all feedback is welcome - if you do find it useful/end up using it, drop me a message as it would be great to know!

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

angular 2 ,web dev ,signalr ,asp.net

Published at DZone with permission of Adrian Hills, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}