Chat using PubSub - React Native

For communication or any kind of messaging between participants, VideoSDK provides the usePubSub hook, which utilizes the Publish-Subscribe mechanism. It can be employed to develop a wide variety of functionalities. For example, participants could use it to send chat messages to each other, share files or other media, or even trigger actions like muting or unmuting audio or video.

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

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-native-sdk
import { usePubSub } from "@videosdk.live/react-native-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.

import { SafeAreaView, TouchableOpacity, TextInput, Text } from "react-native";

function ChatView() {
  // destructure publish method from usePubSub hook
  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 (
    <SafeAreaView>
      <TextInput
        style={{
          height: 40,
          margin: 12,
          borderWidth: 1,
          padding: 10,
        }}
        onChangeText={setMessage}
        value={message}
      />

      <TouchableOpacity
        onPress={() => {
          handleSendMessage();
        }}
      >
        <Text>Send Message</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

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.

import { SafeAreaView, TouchableOpacity, TextInput, Text } from "react-native";

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

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

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

  return (
    <SafeAreaView>
      {messages.map((message) => {
        return (
          <Text style={{ fontSize: 12 }}>
            {message.senderName} says {message.message}
          </Text>
        );
      })}
      <TextInput
        style={{
          height: 40,
          margin: 12,
          borderWidth: 1,
          padding: 10,
        }}
        onChangeText={setMessage}
        value={message}
      />
      <TouchableOpacity
        onPress={() => {
          handleSendMessage();
        }}
      >
        <Text>Send Message</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

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.

import { SafeAreaView, TouchableOpacity, TextInput, Text } from "react-native";

function ChatView() {
  // destructure publish method from usePubSub hook
  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
    // Pass the participantId of the participant to whom you want to send the message.
    // hightlight-next-line
    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() {
  // destructure publish method from usePubSub hook
  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()