Check Who's In The Office In Realtime With AngularJS

In this tutorial, we will build an application using AngularJS to check who’s in the office in realtime.

Let’s say you’re working remote, but – alas – alone and out of ethe loop, you want to see who’s in the office right now. Maybe a storm has hit your project, or maybe you just want to see the kind faces of friends who now seem very, very far away. “Who’s in the office?”, you say to yourself, pacing your living room. Who indeed?

What Is It?

‘Who’s In?’ is a very simple app that tracks live who comes and goes from work. It’s built from a local script that runs from the office and a free Heroku application. The script and the Heroku app chat to each other every couple of minutes to keep track of who’s in the office.

And the best part about it? It takes less than five minutes to set up.

Wow! How Do I Set It Up Using AngularJS?

For ease of use, we’ve created a very easy command-line interface that helps your office set up its own ‘Who’s In?’. Type this into your terminal:

bash
1$ gem install pusher-whos-in
2  $ pusher-whos-in init
Copy

The first command installs a gem that both initializes deployment and sets up a binary executable that scans your local network. The second command, when entered, should take you to the deployment page on Heroku.

All you have to do is: name your app, choose the ‘United States’ region option, then click the shiny ‘Deploy For Free’ button.

This will set up your very own Heroku application, provisioned with a free Mongo database and a free Pusher add-on.

Now view your app and add some users. Simply enter their name and MAC and email addresses. ‘Who’s In’ will use the MAC addresses to identify whether your colleague is knocking about on your local network, and use their email address to fetch their gravatar.

And here’s the final step:

bash
1$ pusher-whos-in run _your_app_name_
Copy

If your Heroku URL is mcdiddys-peeps.herokuapp.com, then type pusher-whos-in run mcdiddys-peeps. As this script requires root privileges, enter your password. (This will be explained further below).

The moment of truth! Go back to your app and you should see the page populated with some much-missed faces – opaque if they’re in, transparent if not.

So that Pusher’s Sandbox limits are not encroached upon, this page updates only every two minutes.

Furthermore, if you don’t wish to use the gem, or if you only want to run the app locally, you use the simple steps documented here.

How Does It Work, Then?

The pusher-whos-in run command runs a script every two minutes. This script uses NMap, which normally is used as a security scanner to discover hosts on a local network (thus requiring root privileges), to scan for MAC addresses.

bash
1macs=( $(sudo nmap -sn 192.168.1.0/24 | grep -Eio "([0-9A-F]{2}:){5}[0-9A-F]{2}") )
Copy

The script then process the $macs array into JSON, and posts it to the Sinatra server running on Heroku. To do so, it uses your Heroku Pusher keys for Basic Authentication, having got them from your Heroku instance with the Pusher add-on.

bash
1curl -X POST -d "$json" $WHOSIN_URL -u admin:$AUTH_KEY >/dev/null 2>&1
2  # N.B. Outside the purposes of this demo, one should never post from a privileged script(!)
Copy

The server then goes through the users in MongoDB, and sets present to true or false depending on whether their known MAC address was present in the posted list.

Then it triggers a simple Pusher event to the client, carrying all the people JSON objects stored in the database:

ruby
1Pusher['people_channel'].trigger('people_event', people)
Copy

On the front-end, as it’s my framework of choice, I used AngularJS with the new Pusher-Angular library to take the people and assign them to scope:

javascript
1angular.module('WhosIn', ['pusher-angular']).controller('AppCtrl', function($scope, $pusher, $http){
2
3    var client = new Pusher(pusherKey);
4    var pusher = $pusher(client);
5    var peopleChannel = pusher.subscribe('people_channel');
6
7    peopleChannel.bind('people_event', function(data){
8      $scope.people = data;
9    });
10
11  });
Copy

Then using HTML, CSS and Angular {{expressions}} we can render everyone on the page, along with their gravatars and when they were last seen.

Can I Make It Better?

Absolutely, and we encourage you to!

We acknowledge that this is merely one of many ways you can show who’s in the office. If you can think of a better way, feel more than free to fork our Github repo and send us a pull request.

Here are some other ways you might improve on our app:

• Integrate it with HipChat and Slack. Perhaps you could create a bot to reply with the list of people present in the office?
• Tighten security. You could perhaps do this by easily introducing private channels to your Pusher connections, or by creating a workaround that skips the need to HTTP post from a privileged script.
• Play with the UI.
• Create logs and visualisations of who comes and goes.

No doubt you have plenty ideas of your own – so, now we’ll leave it to you!

For more about building realtime applications, check out our