How to add a Who-Is-Online feature on your application with JavaScript

Pachi 🥑 - Sep 19 - - Dev Community

Hello everyone!

Today I will share a tutorial, that will guide you through integrating a "Who-Is-Online" feature into your JavaScript application using SuperViz. This feature allows users to see who else is currently online in a shared session, which is especially useful for collaborative tools, virtual events, and social platforms.

We'll demonstrate how to set up a simple React application that uses SuperViz to display the list of online participants. By the end of this tutorial, you'll have a fully functional "Who-Is-Online" feature that you can extend and customize to meet your specific needs.

Let's get started!

Prerequisites

To follow this tutorial, you will need a SuperViz account and a developer token. If you already have an account and a developer token, you can move on to the next step.

Create an account

To create an account, go to https://dashboard.superviz.com/register and create an account using either Google or an email/password. It's important to note that when using an email/password, you will receive a confirmation link that you'll need to click to verify your account.

Retrieving a Developer Token

To use the SDK, you’ll need to provide a developer token, as this token is essential for associating SDK requests with your account. You can retrieve both development and production SuperViz tokens from the dashboard..

Copy and save the developer token, as you will need it in the next steps of this tutorial.

Step 1: Set Up Your React Application

To begin, you'll need to set up a new React project where we will integrate SuperViz for the "Who-Is-Online" feature.

1. Create a New React Project

First, create a new React application using Vite with TypeScript.

npm create vite@latest who-is-online -- --template react-ts
cd who-is-online
Enter fullscreen mode Exit fullscreen mode

Vite is a modern build tool that provides a faster and more efficient development experience compared to Create React App. It also supports TypeScript out of the box.

2. Install Required Libraries

Next, install the necessary libraries for our project:

npm install @superviz/sdk uuid
Enter fullscreen mode Exit fullscreen mode

  • @superviz/sdk: For integrating real-time collaboration features.

  • uuid: A library for generating unique identifiers, useful for creating unique participant IDs.

3. Configure tailwind

In this tutorial, we'll use the Tailwind css framework. First, install the tailwind package.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

We then need to configure the template path.
Open tailwind.config.js in the root of the project and insert the following code.

/** @type {import('tailwindcss').Config} */ 
export default { 
content: [ 
"./index.html", 
"./src/**/*.{js,ts,jsx,tsx}", 
], 
theme: { 
extend: {}, }, 
plugins: [], 
}
Enter fullscreen mode Exit fullscreen mode

Then we need to add the tailwind directives to the global CSS file. (src/index.css)

@tailwind base; 
@tailwind components; 
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

4. Set Up Environment Variables

Create a .env file in your project root and add your SuperViz developer key. This key will be used to authenticate your application with SuperViz services.


VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY
Enter fullscreen mode Exit fullscreen mode

Step 2: Implement the Main Application

In this step, we'll implement the main application logic to initialize SuperViz and display the "Who-Is-Online" feature.

1. Implement the App Component

Open src/App.tsx and set up the main application component using SuperViz to manage the online participants list.

import { useCallback, useEffect, useRef, useState } from "react";
import SuperVizRoom, { LauncherFacade, WhoIsOnline } from '@superviz/sdk';
import { v4 as generateId } from 'uuid';
Enter fullscreen mode Exit fullscreen mode

Explanation:

- Imports: Import necessary components from React, SuperViz, and UUID for managing state, initializing SuperViz, and displaying the online participants.

2. Define Constants

Define constants for the API key, room ID, and participant ID.

const apiKey = import.meta.env.VITE_SUPERVIZ_API_KEY as string;
const ROOM_ID = 'who-is-online';
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • apiKey: Retrieves the SuperViz API key from environment variables.

  • ROOM_ID: Defines the room ID for the SuperViz session.

3. Create the App Component

Set up the main App component and initialize the "Who-Is-Online" feature.


export  default  function  App()  {
    const  [initialized, setInitialized]  =  useState(false);
    const superviz =  useRef<LauncherFacade |  null>(null);
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • useState & useRef: Manages the initialization state and stores the SuperViz instance.

4. Initialize SuperViz

Create a function to initialize SuperViz and set up the "Who-Is-Online" feature.

const initialize = useCallback(async () => { 
 if(initialized) return; 

    superviz.current = await SuperVizRoom(apiKey, { 
    roomId: ROOM_ID, 
    participant: { 
        id: generateId(), 
            name: 'participant-name', 
        }, 
        group: { 
            id: 'who-is-online', 
            name: 'who-is-online', 
        } 
        }); 

    const whoIsOnline = new WhoIsOnline({ 
        position: 'who-is-online', 
        disablePresenceControls: true, 
    }); 

    superviz.current.addComponent(whoIsOnline); 

    setInitialized(true); 
    }, [initialized]);
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • initialize: Initializes SuperViz, sets up the real-time component, and adds the "Who-Is-Online" feature to the application.

  • WhoIsOnline: Displays the list of participants currently online in the session, positioned within the specified HTML element.

5. Use Effect Hook for Initialization

Use the useEffect hook to trigger the initialize function on component mount and handle cleanup when the component is unmounted.


useEffect(() => {
  initialize();

  return () => {
    superviz.current?.destroy();
  }
}, []);
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • useEffect: Calls the initialize function once when the component mounts and cleans up the SuperViz instance when the component unmounts.

Step 3: Render the Who-Is-Online Interface

Finally, return the JSX structure for rendering the "Who-Is-Online" interface.


return  (
    <div className='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
        <header className='w-full p-5 bg-purple-400 flex items-center justify-between'>
            <h2 className='text-white text-2xl font-bold'>Who is Online</h2>
        </header>
        <main className='flex-1 p-20 flex w-full gap-2 items-center justify-center'>
            <div id="who-is-online"></div>
        </main>
    </div>
);
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • Viewer Container: The who-is-online div is where the online participants list will be rendered. This is where users will see who else is online in the session.

Step 4: Understanding the Project Structure

Here's a quick overview of how the project structure supports the "Who-Is-Online" feature in a JavaScript application:

- App.tsx
- Initializes SuperViz and sets up the "Who-Is-Online" feature.
- Handles real-time updates of online participants.

- Who-Is-Online Interface

  • Displays a list of participants currently online in the session.
  • Updates dynamically as participants join or leave the session.

- Real-Time Communication
- Manages real-time communication between participants using SuperViz.

Step 5: Running the Application

1. Start the React Application

To run your application, use the following command in your project directory:

npm run dev
Enter fullscreen mode Exit fullscreen mode

This command will start the development server and open your application in the default web browser. You can see who else is online in real-time as other participants join.

2. Test the Application

  • Who-Is-Online Feature: Open the application in multiple browser windows or tabs to simulate multiple participants and verify that the list of online users updates in real-time.

  • Collaborative Interaction: Test the responsiveness of the application by observing how the online participants list changes as users join and leave the session.

Summary

In this tutorial, we built a "Who-Is-Online" feature using SuperViz.

We configured a React application to handle real-time updates of online participants, enabling multiple users to see who else is in the session. This setup can be extended and customized to fit various scenarios where real-time presence information is essential.

Feel free to explore the full code and further examples in the GitHub repository for more details.

Image
How Do AI-Based Interview Chatbots Improve Recruitment Efficiency?

ai, chatbot
Image
Agen Judi Online yang Punya Layanan Peserta Terhebat
Image
Key Differences in Static vs Rotating Proxies

staticproxy, rotatingproxy
Image
MtTreeView

react, webdev, javascript, programming
Image
Boost Your Grades: Expert Assignment Help Services in Adelaide Explained
Image
10 Websites To Help You To Become A Proficient In Compensation For Asbestos
Image
Tips for Building a Successful Alibaba Scraper

alibabascraper, rotatingproxy
Image
Cómo usar varias SSH keys para diferentes repositorios de GitHub (o GitLab)

git, github, setup, tutorial
Image
Accelerating SaaS MVP Development: A Guide to Fast-Tracking Your Web App

softwaredevelopment, mvp, saas, fullstackdevelopment
Image
Bezawada Hospitals – Leading Orthopedic and Multispecialty Hospital in Vijayawada for Quality Healthcare Services

orthopedic, orthopedician
Image
Vashikaran Specialist Bangali Babaji +91-9660722449 Genuine Black Magic In Kadapa

webdev, gh
Image
<h1>Dakkapel Amersfoort</h1>
Image
Why Every Medical Practice Needs a Skilled Patient Receptionist
Image
How to Find a Free AI Video Generator

ai, api, video, ads
Image
LMCHING Launches Innovative Trade-in Program to Foster Sustainability and Customer Loyalty
Image
keringanan bermain dalam web slots online terhebat
Image
Emerging Trends in DeFi: How to Stay Ahead as an Entrepreneur

development
Image
Top Tips for Memorable Car Travels in Bhubaneswar: Best Routes, Sights & More

car, rental, bhubaneswar
Image
Chronos Quantum-Powered AI
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .