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);
  });
});

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.