React Api Reference
    Preparing search index...

    Class usePubSub

    usePubSub provides reactive APIs to publish, subscribe, and access persisted messages for a specific topic within a meeting.

    The hook accepts three arguments:

    1. topic — the topic name to publish and subscribe to.
    2. listeners — event callbacks (onMessageReceived, onBatchReceived, onOldMessagesReceived, onMessageDrop).
    3. properties — behavior config (maxMessages, bufferMessages, oldMessageLimit, realtimeOverflow, maxQueue, newMessageLimit).
    import { usePubSub, Constants } from "@videosdk.live/react-sdk";

    function Chat() {
      const { publish, messages } = usePubSub(
        "CHAT",
        {
          onMessageReceived: (message) => {
            console.log("New message:", message);
          },
          onBatchReceived: (batch) => {
            console.log("Batch received:", batch.length);
          },
          onOldMessagesReceived: (oldMessages, { isLast }) => {
            console.log("Old messages:", oldMessages, "isLast:", isLast);
          },
          onMessageDrop: ({ droppedCount }) => {
            console.warn("Dropped messages:", droppedCount);
          },
        },
        {
          maxMessages: 100,
          bufferMessages: true,
          oldMessageLimit: 20,
          realtimeOverflow: Constants.RealtimeOverflow.QUEUE,
          maxQueue: 70,
          newMessageLimit: 50,
        }
      );

      const sendMessage = async () => {
        try {
          await publish("Hello", { persist: true }, { sentAt: Date.now() });
        } catch (e) {
          console.log("Error while sending message through pubsub", e);
        }
      };

      return (
        <div>
          <button onClick={sendMessage}>Send</button>
          <ul>
            {messages.map((m) => (
              <li key={m.id}>
                <b>{m.senderName}:</b> {m.message}
              </li>
            ))}
          </ul>
        </div>
      );
    }
    Index
    constructor
    bufferMessages? maxMessages? maxQueue? messages newMessageLimit? oldMessageLimit? realtimeOverflow? topic
    publish
    onBatchReceived onMessageDrop onMessageReceived onOldMessagesReceived
    bufferMessages?: boolean

    This represents whether incoming messages are accumulated into the messages array.

    • When true, messages are stored in messages and also delivered to onMessageReceived and onOldMessagesReceived.
    • When false, messages are delivered only via onMessageReceived, onOldMessagesReceived and the messages array is never populated. Useful for high-throughput topics (e.g. thousands of messages per second) where retaining a re-rendering array is undesirable.
    true
    maxMessages?: number

    This represents the hard cap on the number of messages retained in the messages array.

    • Once the cap is reached, the oldest messages are dropped to make room for new ones, preventing unbounded memory growth on high-frequency topics.
    • Pass null to retain every message.
    null
    maxQueue?: number

    This represents the maximum number of message batches to queue when your internet is slow or your device can't keep up with the incoming rate. Increase this value to retain more messages and catch up after recovering. Max: 200.

    70
    messages: {
        id: string;
        message: string;
        payload: object;
        senderId: string;
        senderName: string;
        timestamp: string;
        topic: string;
    }[]

    This represents all persisted messages for the topic.

    Type Declaration

    • id: string

      Unique identifier for the message.

    • message: string

      The message content.

    • payload: object

      Optional additional data sent along with the message.

    • senderId: string

      The ID of the participant who sent the message.

    • senderName: string

      The display name of the participant who sent the message.

    • timestamp: string

      Timestamp indicating when the message was published.

    • topic: string

      The topic under which the message was published.

    newMessageLimit?: number

    This represents the maximum number of realtime messages to receive per 500 ms.

    oldMessageLimit?: number

    This represents how many old messages to receive. Pass 0 to receive none. If omitted, all old messages are delivered.

    all
    realtimeOverflow?: "queue" | "drop"

    This represents the behavior when your internet is slow or your device can't keep up with the incoming rate. RealtimeOverflow.QUEUE (default) queues the remaining messages so you receive them once you catch up; RealtimeOverflow.DROP drops them instead.

    Constants.RealtimeOverflow.QUEUE
    topic: string

    This represents the topic associated with the PubSub instance.

      • This method can be used to publish a message to a specified topic within the meeting.

      Parameters

      • message: string

        The message content to be published. This value must be a string.

      • Optionaloptions: { persist?: boolean; sendOnly?: String[] }
        • Optionalpersist?: boolean

          When set to true, the message is stored for the entire session and is available to newly joined participants.

        • OptionalsendOnly?: String[]

          An array of participantId that should receive the message. If not provided, the message is broadcast to all participants.

      • Optionalpayload: object

        Additional data to be sent along with the message.

      Returns Promise<void>

      • Triggered with an array of realtime messages — the same set surfaced one-by-one through onMessageReceived, grouped for bulk handling.

      Parameters

      • messages: {
            id: string;
            message: string;
            payload: object;
            senderId: string;
            senderName: string;
            timestamp: string;
            topic: string;
        }[]

      Returns void

      • Triggered when messages are dropped because your internet is slow or your device (CPU) can't keep up with the incoming rate. Receives an info object describing how many messages were dropped.

      Parameters

      • info: { droppedCount: number }

      Returns void

      • Triggered when a new message is published to the subscribed topic.

      Parameters

      • message: {
            id: string;
            message: string;
            payload: object;
            senderId: string;
            senderName: string;
            timestamp: string;
            topic: string;
        }

      Returns void

      • Triggered with old messages when message persistence was enabled for the topic. Receives (messages, { isLast }) — isLast is true on the final batch of old messages.

      Parameters

      • messages: {
            id: string;
            message: string;
            payload: object;
            senderId: string;
            senderName: string;
            timestamp: string;
            topic: string;
        }[]
      • info: { isLast: boolean }

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Methods
    Events