Chat using PubSub - Javascript

Implementing Chat

Group Chat

1. The initial step in setting up a group chat is picking a topic that every participant publishes to and subscribes from. In this example, CHAT is the topic. Wire a message input and a send button to publish messages using meeting.pubSub.publish().

let meeting;

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

const msgSendBtn = document.getElementById("msgSendBtn");

// publish chat message on button click
msgSendBtn.addEventListener("click", async () => {
  const message = document.getElementById("txtChat").value;

  document.getElementById("txtChat").value = "";

  try {
    await meeting.pubSub.publish("CHAT", message, { persist: true });
  } catch (error) {
    console.log("Error while sending message:", error);
  }
});

2. Next, display messages sent by other participants. Subscribe to the CHAT topic on meeting-joined and pass a listeners object. Use onOldMessagesReceived to render persisted history and onMessageReceived to render each new realtime message. A small renderMessage() helper keeps both callbacks tidy.

const chatBox = document.getElementById("chatArea");

function renderMessage(data) {
  const { message, senderId, senderName } = data;

  const chatTemplate = `
      <div style="margin-bottom: 10px; ${
        meeting.localParticipant.id == senderId && "text-align : right"
      }">
        <span style="font-size:12px;">${senderName}</span>
        <div style="margin-top:5px">
          <span style="background:${
            meeting.localParticipant.id == senderId ? "grey" : "crimson"
          };color:white;padding:5px;border-radius:8px">${message}<span>
        </div>
      </div>
      `;

  chatBox.insertAdjacentHTML("beforeend", chatTemplate);
}

// Keep a reference so we can unsubscribe later
const chatListeners = {
  onMessageReceived: (data) => {
    renderMessage(data);
  },
  onOldMessagesReceived: (messages, { isLast }) => {
    messages.forEach(renderMessage);
    if (isLast) {
      console.log("All old messages delivered");
    }
  },
};

// subscribe to the 'CHAT' topic on meeting join
meeting.on("meeting-joined", async () => {
  try {
    await meeting.pubSub.subscribe("CHAT", chatListeners);
  } catch (error) {
    console.log("Error while subscribing to CHAT:", error);
  }
});

Private Chat

In the group chat example, convert the chat into a private one between two participants by passing the target participantId(s) in sendOnly.

  // ...
  // publish chat message on button click
  msgSendBtn.addEventListener("click", async () => {
    const message = document.getElementById("txtChat").value;

    document.getElementById("txtChat").value = "";

    // Pass the participantId of the participant to whom you want to send the message.
    try {
      await meeting.pubSub.publish("CHAT", message, { persist: true, sendOnly: ["XYZ"] });
    } catch (error) {
      console.log("Error while sending message:", error);
    }
  });

Unsubscribing

Call unsubscribe() when you no longer need messages for a topic — for example, when the participant leaves the meeting or the chat view is torn down. Pass the same listeners object you provided to subscribe().

// The listeners object used during subscribe
const chatListeners = {
  onMessageReceived: (data) => {
    /* ... */
  },
  onOldMessagesReceived: (messages, { isLast }) => {
    /* ... */
  },
};

meeting.on("meeting-left", async () => {
  try {
    await meeting.pubSub.unsubscribe("CHAT", chatListeners);
  } catch (error) {
    console.log("Error while unsubscribing from CHAT:", error);
  }
});

Downloading Chat Messages

All messages published with persist : true can be downloaded as a .csv file. This file is available in the VideoSDK dashboard and through the Sessions API.

API Reference

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

• PubSub