Showing an online user counter: a task that otherwise would seem so daunting to fulfill it's simplified by an enormous percentage thanks to WebSockets (while even adding little to none overhead), particularly its most popular abstraction (until now) Socket.io. Meanwhile, using Vue.js is a nice way to add a data-driven approach to our document and let our DOM change in response to new data coming in.

In the IoT domain, that I'm currently working on, to show the online user counter is a nice feature to add because it brings value to this general feeling of real-timeliness. You have new values arriving every second and this dashboard look is very precise UX wise. Other more even common case to implement such counter would be a simple web chat application. While an intermediate case might be, for example, to track information from connected users.

Got it, now what?

So, let's get down to business. The solution consists of these 3 pieces of code:

Cool stuff, dude...

Yeah, I know. Remember you should have at least a very naive understanding of Node.js, Socket.io and Vue.js. For these last two libraries you can just follow their default "getting started" example and be done in 30 minutes. Plus, you can take this as one of the easiest examples ever to get started with both Socket.io and Vue.js.

Then the really cool thing is that you can take this to very interesting and challenging levels especially in the analytics domain. Just imagine recording location.path, user-agent and geo-location data, awesome right?

I visited a dozen pages searching for a nice, clean and elegant way to install Node.js on my Pi and found nothing on my favor. Some sites pointed to specific, non-official Node.js versions 😔 Others talked about using the package manager vs. doing the manual install.

Boring and unproductive all the above. I had to double or triple check the official docs just to realize that what I was looking for was somehow buried under some misleading links on the Node.js Downloads page.

This is how we do it right

But I cracked it down so don't look any further. This is as alrighty as you can get. The following works for Raspberry Pi 2 (ARM Cortex-A7, v7) or 3 (ARM Cortex-A53, v8) while using Raspbian:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

sudo apt-get install -y nodejs

sudo apt-get install -y build-essential

Because installing Node.js on a Pi should be more straightforward. Take care.

For many days now I've been struggling with this annoying problem with my zsh terminal. I was unable to use composer or laravel as single-worded commands. I had to type the whole instructions to execute that pair of bins, meaning: ~/.composer/vendor/bin/homestead up and ~/.composer/vendor/bin/laravel new. Note that this difficulty was present despite the fact that I apparently added that directory to my zsh $PATH.

The problem is gone now. Sure, I could just made an alias out of those two executables and be done in just minutes but that's not elegant. Yesterday I finally decided to research a bit deeper and found a life-saver comment at Stack Overflow.

Tell me how to already

I took some of your time with that boring introduction. My bad. Now, let's go act.

For some reason the .zshrc file doesn't recognize the universal symbol for the $HOME directory, meaning: ~. Instead you have to manually type the whole /path/to/composer/vendor/bin or, which is better, save some bytes and use some abstraction using the $HOME variable.

Take a look at this step-by-step for a one-liner.

Fire up your shell, make sure you are at $HOME or where your .zshrc file is located.

Type echo 'export PATH="$HOME/.composer/vendor/bin:$PATH' >> .zshrc.

Now type in source .zshrc

That's it. If you want to see how yor zsh shines even after a restart just do it.