Chat during Live Stream - JavaScript

Enhance your live stream experience by enabling real-time audience chat using VideoSDK's pubSub property. Whether you’re streaming a webinar, online event, or an interactive session, integrating a chat system lets your viewers engage, ask questions, and react instantly. This guide shows how to build a group or private chat interface for a live stream using the Publish-Subscribe (PubSub) mechanism.

This guide focuses on using PubSub to implement Chat functionality. If you are not familiar with the PubSub mechanism and usePubSub hook, you can follow this guide.

Implementing Chat

Group Chat(Public Chat for All Viewers)

To allow your entire audience to chat during the stream:

1. Choose a topic name (e.g. "CHAT") that everyone will publish and subscribe to. Retrieve the publish() method and messages array using pubSub. Next create a message input and a send button to publish the messages.

let liveStream;

// Initialize LiveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

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

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

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

  liveStream.pubSub
    .publish("CHAT", message, { persist: true })
    .then((res) => console.log(`response of publish : ${res}`))
    .catch((err) => console.log(`error of publish : ${err}`));
});

2. Finally Display incoming chat messages from all users, creating a real-time chat feed during the stream.

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

liveStream.on("meeting-joined", async () => {
  let oldMessages = await meeting.pubSub.subscribe("CHAT", (data) => {
    let { message, senderId, senderName, timestamp } = data;

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

    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);
  });

  // Getting Old messages for upcoming participant
  console.log("OLD Message", oldMessages);
});

Private Chat (1:1 between Host and Viewer)

Private messaging is ideal when a host or moderator needs to directly respond to a viewer’s question. This can be achieved using the sendOnly property.

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});
// ...
//publish chat meesage 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.
  liveStream.pubSub
    .publish("CHAT", message, { persist: true, sendOnly: ["XYZ"] })
    .then((res) => console.log(`response of publish : ${res}`))
    .catch((err) => console.log(`error of publish : ${err}`));
});

Downloading Chat Messages

All the messages from PubSub published with persist : true can be downloaded as an .csv file. This file will be accessible 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