Build

Track and Display Currently Online Users in Real time

2 min readAdam Bavosa on Mar 21, 2018
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Display how many users are currently viewing a webpage in real time. Learn how to build a web UI widget in under 5 minutes, backed by PubNub Presence.

PubNub is optimal for broadcasting updates to any number of concurrent subscribers. Using our APIs like Real-time Messaging and Presence, you can maintain state for a massive, interactive audience.

In this quick tutorial, we’ll use Presence, an API for online/offline detection of subscribers, to build an occupancy counter displaying how many users are online that updates in real time as users join and leave. And we’ll do it in 15 lines of JavaScript.

reddit

Reddit has a widget in their UI that show how many users are currently browsing a particular subreddit.

Real-time Occupancy Counter

widget

You’ll first have to sign up for a PubNub account and create a project in the Admin Dashboard.

As we said, this widget utilizes the Presence API, which acts as an event emitter for the join, leave, timeout (and more) events of users that are connected to PubNub using your pub/sub keys. Enable the presence feature for your key and set the interval for the number of seconds between Presence updates. Make sure you click the save button at the bottom of the page once you have completed your configuration.

presence-portal

Next, let’s knock out the front-end to complete our fully-functioning widget. The current CSS forces the widget to sit fixed in the bottom left corner of the screen, even when the user scrolls down the page.

<!DOCTYPE html>
<html>
<head>
  <title>Currently Active Demo</title>
  <style type="text/css">
    .currently-active {
      position: fixed;
      margin: 10px;
      padding: 5px;
      bottom: 0;
      left: 0;
      border: solid 1px #AFAFAF;
      border-radius: 6px;
      font-family: "Arial";
    }
  </style>
</head>
<body>
  <div class="currently-active">
    <span>Currently Active: </span><span id="active"></span>
  </div>
</body>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.2.js"></script>
<script type="text/javascript">
var active = document.getElementById('active');
function setCurrentlyActiveUsers(numberOfUsers) {
  active.innerText = numberOfUsers.toString();
}
setCurrentlyActiveUsers(1);
var pubnub = new PubNub({
    publishKey : '__YOUR_PUB_KEY__',
    subscribeKey : '__YOUR_SUB_KEY__',
    heartbeatInterval: 30
});
pubnub.addListener({
  presence: function(presenceEvent) {
    setCurrentlyActiveUsers(presenceEvent.occupancy);
  }
});
pubnub.subscribe({ 
  channels: ['myWebPage1'],
  withPresence: true
});
</script>
</html>

This is configurable to your needs. If your website is using a reactive framework like Angular, React, or Vue, I recommend using data binding to keep the number of users in sync with the data store.

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff