Image may be NSFW.
Clik here to view.
I participate, with a group of friends, each year in the annual KVSC Trivia weekend. It's a good time, challenging, and fun. One of the extra challenges we face is that our team, aside from being smaller than several of the other teams that compete, is not all physically located in the same place. We have a number of remote players.
A few years back I decided to take on the challenge of building a custom web app to better facilitate participation of those remote players as well as better keep track of what's going on. By that I mean, I (we) wanted a way to keep track (up to the second) what questions were currently open, any guesses for those questions that hadn't yet been called in, and maybe some nice looking stats and graphs.
In previous years this app has been built on Drupal (first Drupal 6, then last year rebuilt fresh in Drupal 7). That worked out mostly alright, though as the weekend wore on, the site would become significantly less and less performant.
So, looking at trivia coming up this year, I already had decided to rebuild the app yet again, this time leveraging something more conducive to the real-time nature of it than Drupal. Don't get me wrong, I'm still a fan of Drupal, but this is one of those instances were it's NOT a good choice. With this app we need it to run as close to real time as possible, and Drupal just brings far too much overhead to the table for that.
So, I've been rebuilding it as a single page app with a NodeJS + Express + Socket.io + MongoDB (via Mongoose) backend, and an AngularJS + Twitter Bootstrap front end. There is still much to be done, but I'm confident I'll accomplish all that remains before Trivia weekend.
This has to date been a blog exclusively focused on Drupal, so please note:
I'm not leaving Drupal behind by any means, but I have been enjoying working with Angular on the front end, and my tiny project specific node based server is insanely fast. I'm optimistic that with the move to a RESTful backend in Drupal 8, I could meld that with the knowledge I'm acquiring about Angular in this current project to build some really wicked Drupal powered apps in the future.
Anyway... Now that you have a bit of background lets get to the meat of this post.
One of the things I wanted was the ability to provide useful notifications when certain events occur within the app. Specifically 'growl' style notications when logging in, logging out and performing various administrative tasks (probably more, but for now that's enough).
Having my goal of getting notifications working with Angular, I set out to find a decent library that would provide the growl style notification behavior. After reviewing several options I decided what would work best for me (the default styles already nicely complimented Twitter Bootstrap, so bonus there too!) was Toastr, a freely available (MIT Licensed) javascript library. It requires jQuery, but I already had a dependency for jQuery, so no worries there.
After settling on the library, I had to determine a good (AngularJS) way to implement my desired notification functionality. In my search for information on how to go about doing this, I found a post on stackoverflow asking about this very problem. Well, mostly, they were asking about passing notification messages around between pages, and I wanted instant gratification with my notifications. The accepted answer for that question linked to a plunkr example detailing how to do this with a pretty simple Angular service.
After looking at that for a bit, I forked the plunkr code and made a few modifications so that the service would support adding messages to a queue where the next queue item would display on the next url change (existing functionality) and my new functionality of issuing an immediate growl style notification with the toastr library.
Here is my updated plunkr code for your amusement and educational pleasure: