Connecting

Prerequisites

In order to connect, you need to obtain a Peer Token to authorize the peer in your room. You can get the token using the Sandbox API if you're using the Sandbox environment, or implement your own backend service that will provide the user with a Peer Token.

Connecting

Use the useConnection hook to get the joinRoom function.

import { useConnection, useSandbox } from "@fishjam-cloud/react-client";
import React, { useCallback } from "react";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();
  // get the peer token from sandbox or your backend
  const { getSandboxPeerToken } = useSandbox();

  const onJoinRoomPress = useCallback(async () => {
    const peerToken = await getSandboxPeerToken("Room", "User");
    await joinRoom({ peerToken });
  }, [joinRoom]);

  return <button onClick={onJoinRoomPress}>Join room</button>;
}

Disconnecting

In order to close connection, use the leaveRoom method from useConnection hook.

import { useConnection } from "@fishjam-cloud/react-client";
import React, { useCallback } from "react";

export function LeaveRoomButton() {
  const { leaveRoom } = useConnection();

  return <button onClick={leaveRoom}>Leave room</button>;
}