useDataChannel

The useDataChannel hook returns the ability to send and receive messages. Pass an optional topic to narrow down which messages are returned in the messages array.

Import

import { useDataChannel } from "@livekit/components-react";

Remarks

There is only one data channel. Passing a topic does not open a new data channel. It is only used to filter out messages with no or a different topic.

Usage

Example 1

// Send messages to all participants via the 'chat' topic.
const { message: latestMessage, send } = useDataChannel("chat", (msg) =>
  console.log("message received", msg)
);

Example 2

// Receive all messages (no topic filtering)
const { message: latestMessage, send } = useDataChannel((msg) =>
  console.log("message received", msg)
);

Properties

topicTRequired

onMessage(msg: ReceivedDataMessage<T>) => voidOptional

Returns

UseDataChannelReturnType<T>;