tl;dr Check out my new SignalRDashboard GitHub repo
Followup post: Getting started with SignalR
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 realise 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’s 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!