Skip to content

Latest commit

 

History

History
173 lines (125 loc) · 5.15 KB

connecting.mdx

File metadata and controls

173 lines (125 loc) · 5.15 KB
sidebar_position
3

import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem";

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).

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.

import { useSandbox } from "@fishjam-cloud/react-client";
const roomName = "room";
const peerName = "user";
// ---cut---

// The `useSandbox` hook gets the fishjamId from FishjamProvider
// It will work ONLY with the FISHJAM_ID of the Sandbox environment
const { getSandboxPeerToken } = useSandbox();
const peerToken = await getSandboxPeerToken(roomName, peerName);
import { useSandbox } from "@fishjam-cloud/mobile-client";
const roomName = "room";
const peerName = "user";
// ---cut---

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

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

Use the useConnection hook to get the joinRoom function.

const PEER_TOKEN = "some-peer-token";
// ---cut-before---
import { useConnection, useSandbox } from "@fishjam-cloud/react-client";
import React, { useCallback } from "react";

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

  const onJoinRoomPress = useCallback(async () => {
    // [!code highlight:5]
    const peerToken = await getSandboxPeerToken("Room", "User");
    await joinRoom({ peerToken });
  }, [joinRoom]);

  return <button onClick={onJoinRoomPress}>Join room</button>;
}
import React, { useCallback } from "react";
import { Button } from "react-native";
import { useConnection, useSandbox } from "@fishjam-cloud/mobile-client";

export function JoinRoomButton() {
  const { joinRoom } = useConnection(); // [!code highlight]
  // fishjamId is provided through FishjamProvider
  const { getSandboxPeerToken } = useSandbox();

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

    await joinRoom({ peerToken }); // [!code highlight]
  }, [joinRoom, getSandboxPeerToken]);

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

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(); // [!code highlight]

  return <button onClick={leaveRoom}>Leave room</button>;
}
import React, { useCallback } from "react";
import { Button } from "react-native";
import { useConnection } from "@fishjam-cloud/mobile-client";

export function LeaveRoomButton() {
  const { leaveRoom } = useConnection(); // [!code highlight]

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

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

Next Steps

Now that you're connected to a room, you can explore additional features: