Chat using PubSub - React

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. Destructure the publish method and the messages array from the usePubSub hook.

// importing usePubSub hook from react-sdk
import { usePubSub } from "@videosdk.live/react-sdk";

function ChatView() {
  // destructure publish method and messages array from usePubSub hook
  const { publish, messages } = usePubSub("CHAT");

  return <>...</>;
}

2. Next, create a message input and a send button to publish messages.

function ChatView() {
  const { publish, messages } = usePubSub("CHAT");

  // State to store the user typed message
  const [message, setMessage] = useState("");

  const handleSendMessage = async () => {
    // Sending the Message using the publish method
    try {
      await publish(message, { persist: true });
    } catch (e) {
      console.log("Error while sending message through pubsub", e);
    }
    // Clearing the message input
    setMessage("");
  };

  return (
    <>
      <input
        value={message}
        onChange={(e) => {
          setMessage(e.target.value);
        }}
      />
      <button onClick={handleSendMessage}>Send Message</button>
    </>
  );
}

3. The final step is to display the messages. Iterate over the messages array returned from the hook — it contains both persisted history and realtime messages.

function ChatView() {
  const { publish, messages } = usePubSub("CHAT");

  const [message, setMessage] = useState("");

  const handleSendMessage = async () => {
    ...
  };

  return (
    <>
      <div>
        <p>Messages: </p>
        {messages.map((message) => {
          return (
            <p key={message.id}>
              {message.senderName} says {message.message}
            </p>
          );
        })}
      </div>
      <input
        value={message}
        onChange={(e) => {
          setMessage(e.target.value);
        }}
      />
      <button onClick={handleSendMessage}>Send Message</button>
    </>
  );
}

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.

function ChatView() {
  const { publish, messages } = usePubSub("CHAT");

  // State to store the user typed message
  const [message, setMessage] = useState("");

  const handleSendMessage = async () => {
    // Pass the participantId of the participant to whom you want to send the message.
    try {
      await publish(message, { persist: true, sendOnly: ["XYZ"] });
    } catch (e) {
      console.log("Error while sending message through pubsub", e);
    }
    // Clearing the message input
    setMessage("");
  };

  //...
}

Display Latest Message Notification

To show a notification to the user when a new message arrives, use the onMessageReceived callback on the hook.

function ChatView() {
  const { publish, messages } = usePubSub("CHAT", {
    onMessageReceived: (message) => {
      window.alert(message.senderName + " says " + message.message);
    },
  });
  const [message, setMessage] = useState("");
  const handleSendMessage = async () => {
    ...
  };
  return <>...</>;
}

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.

• usePubSub()