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.
Join the DZone community and get the full member experience.Join For Free
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.
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 DashboardIn 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
- 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 RepoThe 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!
Published at DZone with permission of Adrian Hills, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.