How to Build a Real-Time Counter of Active Users
This how-to will explain how to build a real-time active users counter that you can add to any JavaScript application. This how-to will cover why you should want to build this feature and how PubNub can simplify creating features like these. The PubNub Presence API used in this how-to can be found in all of the PubNub SDKs.
You probably use some type of analytics to monitor your application. Most analytics services, including Google Analytics, can provide a real-time insights of how many visitors are on a particular page or part of your application. This information is certainly very helpful in a dashboard for monitoring; however, have you considered that your real-time user data can enable your application to be more interactive for your users and enable you to accomplish more?
Why you should have an active users counter
Active user counters improve perceived value
How would you decide if you went out to eat dinner and had to select from two similar restaurants? What if one of the restaurants had lots of activity while the other restaurant was mostly empty to the point where you aren’t even sure it’s open?
Most customers will pick the location with more activity. Why is that?
Humans tend to seek out confirmation for their preconceived notions. Customers will tend to select options that confirm that something is of high quality and popular. This subconscious effect creates a confidence in the experience - even if it hasn’t happened yet. This means customers will gravitate towards something they see as ‘popular’.
Customers want to be associated with popular things because there tends to be a warped sense of perceived value when customers see something as high demand. In reality, the perceived value is all in your customers head. Once customers are convinced to engage - the rest of your application stands a better chance because the customer already saw it as a good option.
Active user counters are important for real-time interactions
If you are building any type of application where users will interact in real-time, such as a chat app, multiplayer game, auction site, or collaboration app, you NEED a real-time active user counter for the best results. Missing this feature will cause your users to not engage or engage less.
Consider this scenario from the perspective of a customer: You started bidding on an item on an online action site and the page said there’s a dozen other users looking at the same item. You’ll follow and interact more intensively than if there were less users because you want the win the item.
If you were not able to see how many others are participating, because there was no counter, you aren’t going to participate with the same energy. This is a missed opportunity to improve user engagement and potentially sales.
Why you don’t see real-time counters more?
Many applications are missing a real-time user counters - so why don’t more applications have them? A real-time user counter requires a backend to count the users. In order to build a feature like this you have to manage when users come online and go offline, handle disconnects, and an API for transmitting data.
Building a backend service just for this features like this is a lot to ask for when you want to focus on the core parts of your application that make it unique. Developer time is expensive and limited.
PubNub offers a Presence API that enables you to track the online and offline status of users and devices in real-time. Presence events can be used to monitor channel occupancy, when a user has joined or left a channel, typing, status indicators, current location, and even profile information.
It’s really simple to build a real-time active user counter using PubNub’s Presence API and you only need a PubNub Account and API keys.
Implementing a real-time user counter using PubNub Presence API
Before you can build with the PubNub Presence API you need to create a PubNub Account.
Once you have a PubNub Account, follow this Enable Presence how-to and enable Presence. You can also learn more about how PubNub presence works from this how-to. Save your API keys from the Enabling Presence how-to and replace them in the snippet below.
You can add the following snippet to any JavaScript application after enabling PubNub Presence. Try multiple browser tabs to see the count increase. This same code is used in our Auction Demo app and you can review the app to see how it works in a real application. You could also copy the snippets into a blank html webpage if you want to try it out.
1
In this snippet we:
Created a label to show the count of active users.
Created a random identifier unique to each client that’ll represent each user.
Created a new PubNub instance with our API keys.
Subscribed to get presence events.
Added a listener to get changes in occupancy and update the label.
When a new user comes online a Presence event is sent to PubNub and relayed to all the subscribers. Then the label updates. No need to build a backend - it’s that easy to build a real-time active users counter with PubNub.
Presence can be extended further with the HereNow() method to get a list of all of the active users. Learn more about all of the features of the Presence API in the PubNub API Reference.
See this code in action in our Auction App Demo.