Connecting

This article will guide you through the process of connecting to a Fishjam room.

Getting URL and token

In order to connect, you need to obtain a Peer Token (the token that will authenticate the peer in your Room).

Sandbox App

Once you create your account on Fishjam, you will have access to the Sandbox environment as part of the Mini Jar plan. While using the Sandbox environment, you can use the Sandbox API to generate peer tokens for testing or development purposes. This is basically a service that will create a Room, add your app as the Room's Peer, and return the token required to use that Room.

// The `useSandbox` hook will work ONLY with the FISHJAM_ID of the Sandbox environment
const { getSandboxPeerToken } = useSandbox({ fishjamId: SANDBOX_FISHJAM_ID });
const peerToken = await getSandboxPeerToken(roomName, peerName);

Production App

For the production app, you need to implement your own backend service that will provide the user with a Peer Token. To do that, follow our server setup instructions.

Connecting

In order to connect, call joinRoom method with the peerToken and the fishjam ID:

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

// Check https://fishjam.io/app/ for your Fishjam ID
const FISHJAM_ID = "...";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();
  const { getSandboxPeerToken } = useSandbox({ fishjamId: FISHJAM_ID });

  const onPressJoin = useCallback(async () => {
    // in production environment, get the peerToken from your backend
    const peerToken = await getSandboxPeerToken("Room", "User");

    await joinRoom({ fishjamId: FISHJAM_ID, peerToken });
  }, [joinRoom]);

  return <Button onPress={onPressJoin} title="Join Room" />;
}

Disconnecting

In order to close the connection, you have to call leaveRoom method.

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

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

  const onPressLeave = useCallback(async () => {
    await leaveRoom();
  }, [leaveRoom]);

  return <Button onPress={onPressLeave} title="Leave Room" />;
}