How to Display Online Users in Real-Time
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.
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.
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.