Notify Attendees in Realtime - Javascript

This guide explains how PubSub can be used to implement the functionality of broadcasting a message to all the viewers at once. If you are not familiar with the PubSub mechanism and pubSub, you can follow this guide.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• publish()
• subscribe()

Notifying Attendees

1. To implement this functionality, begin by creating a "Notify Attendees" button along with a text input to capture the message. When a message is entered into the input and the button is clicked, publish a message with the topic NOTIFY_ATTENDEES.

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

const notifyAttendeesBtn = document.getElementById("notifyAttendeesBtn");
notifyAttendeesBtn.addEventListener("click", async () => {
  const message = document.getElementById("notifyAttendeesTxt").value;

  const topic = "NOTIFY_ATTENDEES";
  try {
    await meeting?.pubSub.publish(topic, message, { persist: true });
  } catch (error) {
    console.log("Error while publishing NOTIFY_ATTENDEES:", error);
  }
});

2. Next, alert all the speakers, displaying the message posted by the speaker.

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

const listeners = {
  onMessageReceived: (data) => {
    let { message, senderId, senderName, timestamp } = data;

    if (meeting.localParticipant.mode == "SIGNALLING_ONLY") {
      window.alert(message);
    }
  },
};

try {
  await meeting?.pubSub?.subscribe("RAISE_HAND", listeners);
} catch (error) {
  console.log("Error while subscribing to RAISE_HAND:", error);
}

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• pubSub