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 retrieve the Fishjam URL and Peer Token (the token that will authenticate the peer in your Room).

Sandbox App

Once you get your account on Fishjam, you will have access to the Sandbox App. This app comes with a pre-configured test service called Room Manager. 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.

To use that, simply call fetch:

const response = await fetch(
  `https://fishjam.io/api/v1/connect/${ROOM_MANAGER_ID}room-manager/?roomName=${roomName}&peerName=${peerName}`,
);

const { fishjamUrl, peerToken } = await response.json();

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 data from the previous step:

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

// Check https://fishjam.io/app/ for your Room Manager ID
const ROOM_MANAGER_ID = "...";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();

  const onPressJoin = useCallback(async () => {
    const { url, peerToken } = await getRoomDetails("Room", "User");

    await joinRoom({ url, peerToken });
  }, [joinRoom]);

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

async function getRoomDetails(roomName: string, peerName: string) {
  // This will work ONLY for the Sandbox App
  const response = await fetch(
    `https://fishjam.io/api/v1/connect/${ROOM_MANAGER_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}`,
  );
  const { fishjamUrl, peerToken } = await response.json();
  return { url: fishjamUrl, peerToken };
}

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" />;
}