Data Channel - React Native

The data channel sends messages straight to the other participants in the room. It suits small, frequent messages, such as cursor positions, game moves or the state of a shared control.

The data channel has no topics and keeps no history, so a participant who joins later does not receive earlier messages. To send messages on a topic, or to keep them for participants who join later, use PubSub instead.

note

This page uses the following asynchronous method. Refer to its API reference for the errors its Promise may reject with, and handle these rejections appropriately based on your use case.

• send()

Sending a message

Send a message with the send() method of the useRoom hook. Every other participant in the room receives it.

• The message can be a string, an ArrayBuffer or a typed array such as Uint8Array. A Blob is not supported.
• A message can be up to 15 KiB.
• Only a participant in SEND_AND_RECV mode can send.
• The second argument, reliable, is a boolean that sets how the message is sent:
  • true (the default) resends the message until it is delivered and keeps the order of messages.
  • false sends the message once. Use it for messages that a newer message replaces, such as positions.
• The Promise resolves once the message is on the data channel, and rejects when it did not go out. It does not confirm that the other participants received it.

import { TouchableOpacity, Text } from "react-native";
import { useRoom } from "@videosdk.live/react-native-sdk";

const SendButton = () => {
  const { send } = useRoom();

  const sendGreeting = async () => {
    try {
      await send("Hello everyone!", true);
    } catch (err) {
      console.error("send failed:", err.code, err.message);
    }
  };

  const sendPosition = async (x, y) => {
    try {
      // Two bytes: the x and y position, from 0 to 255
      await send(new Uint8Array([x, y]), false);
    } catch (err) {
      console.error("send failed:", err.code, err.message);
    }
  };

  return (
    <>
      <TouchableOpacity onPress={sendGreeting}>
        <Text>Say hello</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => sendPosition(120, 45)}>
        <Text>Send position</Text>
      </TouchableOpacity>
    </>
  );
};

Receiving messages

Receive messages with the onDataReceived callback of the useRoom hook. It is called for every message another participant sends. You do not receive your own messages.

It receives one object with these properties:

• senderId: the participant ID of the sender.
• text: the text of a text message, or null for a binary one.
• data: the bytes of a binary message as a Uint8Array, or null for a text one.
• isBinary: true for a binary message.
• reliable: whether the sender sent it reliably.
• timestamp: when the message arrived on this device, in milliseconds since the epoch.

import { useRoom } from "@videosdk.live/react-native-sdk";

const RoomView = () => {
  function onDataReceived(message) {
    const { senderId, text, data, isBinary, timestamp } = message;

    if (isBinary) {
      console.log(`${data.length} bytes from ${senderId}`);
    } else {
      console.log(`Text from ${senderId} at ${timestamp}:`, text);
    }
  }

  const { roomId } = useRoom({ onDataReceived });

  return null;
};

Errors

send() rejects with an error that has a code:

Code	When it occurs
3035 ERROR_ACTION_PERFORMED_BEFORE_ROOM_JOINED	The room has not joined yet.
3065 ERROR_ROOM_RECONNECTING	The room is reconnecting.
3066 ERROR_ACTION_NOT_SUPPORTED_IN_MODE	The participant is not in SEND_AND_RECV mode.
3072 ERROR_PAYLOAD_TOO_LARGE	The message is larger than 15 KiB.
3073 ERROR_INVALID_PARAMETER	reliable is not a boolean.
3048 ERROR_MEDIA_NOT_READY	The connection that carries the data channel is not usable.
3079 ERROR_OPERATION_TIMED_OUT	The data channel did not open in time.
3070 ERROR_SEND_FAILED	The data channel failed to send the message.

3035, 3079 and 3070 are also reported on the onError callback of useRoom. See Room Error Codes for every code.

API Reference

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

• send()
• onDataReceived