Show connected users with Socket.io and Vue.js

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.

Get Node.js on your Pi

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:

back-end

This one goes into your Node.js app.

io.sockets.on("connection", socket => {
  let clientCount = io.engine.clientsCount;

  io.sockets.emit("user count", clientCount);
  socket.on("disconnect", () => {
    io.sockets.emit("user count", clientCount);
  });
});
  • The trick above is that there's is an apparently undocumented disconnect message that is sent by default when a user leaves our site (the socket connection is broken).
  • Another major trick is that Socket.io's main dependency (engine.io) exposes another undocumented property called clientsCount which accurately enough tracks the number of socket connections.

front-end

This goes right into your front-end code. We're not using the mounted event for simplicity's sake.

let app = new Vue({
  el: "#user-count",
  data: { userCount: 0 }
});

socket.on("user count", count => {
  app.userCount = count;
});

And the following will finally render the counter:

<span id="user-count">{{ count }}</span>

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?

Thanks for reading. Take care.

How to install Node.js on your Raspberry Pi 2 or 3

Get Node.js on your Pi

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:

  1. curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
  2. sudo apt-get install -y nodejs
  3. sudo apt-get install -y build-essential

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

How to place ~/.composer/vendor/bin in your zsh PATH

homestead up

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.

  1. Fire up your shell, make sure you are at $HOME or where your .zshrc file is located.
  2. Type echo 'export PATH="$HOME/.composer/vendor/bin:$PATH' >> .zshrc.
  3. Now type in source .zshrc
  4. That's it. If you want to see how yor zsh shines even after a restart just do it.

Good for you.

How to enable the PHP module in Apache (OS X)

We need to go fast. These are 7 short steps.

  1. Launch Terminal.
  2. Type sudo nano /etc/apache2/httpd.conf.
  3. Expect a password prompt (don't be shy, enter your password).
  4. Hit the key combo ctrl+W and search the document for LoadModule php.
  5. Uncomment the line you just found by removing the # sign at the beginning of it.
  6. Hit the key combo ctrl+X then type y to quit nano while preserving the changes.
  7. You're back on Terminal now. Just type sudo apachectl restart and you'll be done.

Good for you.

How to batch convert image format in OS X

There was this very recent day I needed to convert a folder full of PNG formatted images to JPEG. I merely did it in manual, archaic way to be honest.

I regret that. Earlier today I learnt this amazing way to perform the same task and be done in seconds.

sips --setProperty key value image_file --out result_file_or_dir

Something like *.* or *.png will do the trick for image_file.

You definitely should include this snippet on your personal OS X commands toolbox. And note that on Linux (e.g. Ubuntu) you can use Mogrify.