FCE-2708 Adds docs for data channels (#219)

## Description

This PR adds docs related to data channels in web sdk.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Qizot

api/fishjam-server

@@ -0,0 +1,51 @@
+---
+type: explanation
+sidebar_position: 7
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Data Channels
+
+Data channels allow you to send and receive arbitrary binary data between peers in a room. This is useful for implementing features like text chat, file sharing, game state synchronization, or real-time cursor positions.
+
+## Prerequisites
+
+Before using data channels, you must be [connected to a room](../how-to/client/connecting). Data channels only work after you have successfully joined a room.
+
+## Channel Types
+
+The SDK provides two types of data channels, each optimized for different use cases:
+
+### Reliable Channel
+
+- **Ordered delivery**: Messages arrive in the order they were sent
+- **Guaranteed delivery**: All messages will be delivered, with automatic retransmission if needed
+- **Use cases**: Chat messages, file transfers, commands, or any data that must not be lost
+
+### Lossy Channel
+
+- **Unordered delivery**: Messages may arrive out of order
+- **No retransmission**: Messages may be dropped if the network is congested
+- **Lower latency**: Faster delivery since there's no waiting for retransmissions
+- **Use cases**: Real-time cursor positions, game state updates, live sensor data, or any data where the latest value matters more than every value
+
+## Broadcast Communication
+
+Data channels work in a **broadcast fashion** - when you publish data, it is sent to all other peers in the room. Additionally:
+
+- Messages sent on the **reliable channel** are only received by peers subscribed to the **reliable channel**
+- Messages sent on the **lossy channel** are only received by peers subscribed to the **lossy channel**
+
+This separation allows you to use both channels simultaneously for different purposes without interference.
+
+## Using Data Channels
+
+Use the [`useDataChannel`](../api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
+
+1. Initialize the data channel after connecting to a room
+2. Subscribe to incoming messages
+3. Publish messages to other peers
+
+For a complete step-by-step guide on implementing text chat, see [Text Chat](../how-to/features/text-chat).

api/protos

@@ -168,5 +168,6 @@ Now that you're connected to a room, you can explore additional features:
 
 - [Start Streaming](./start-streaming) - Enable your camera and microphone
 - [List Other Peers](./list-other-peers) - Display video from other participants
+- [Data Channels](../../explanation/data-channels) - Send and receive arbitrary data between peers (e.g., text chat)
 - [Picture in Picture](./picture-in-picture) - Allow users to watch video in a floating window (Mobile)
 - [Background Streaming](./background-streaming) - Keep calls active when the app is backgrounded (Mobile)

docs/explanation/data-channels.mdx

@@ -0,0 +1,212 @@
+---
+type: how-to
+title: Text Chat
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Text Chat
+
+This guide shows how to implement text chat in your application using data channels. Data channels allow you to send and receive arbitrary binary data between peers in a room.
+
+## Prerequisites
+
+Before implementing text chat, you must be [connected to a room](../client/connecting). Data channels only work after you have successfully joined a room.
+
+:::tip
+For a deeper understanding of how data channels work, including channel types and broadcast behavior, see [Data Channels](../explanation/data-channels).
+:::
+
+---
+
+## Step 1 — Set up the chat hook
+
+Use the [`useDataChannel`](/api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
+
+1. Initialize the data channel after connecting to a room
+2. Subscribe to incoming messages
+3. Publish messages to other peers
+
+<Tabs groupId="platform">
+  <TabItem value="web" label="React (Web)">
+
+```tsx
+import { useConnection, useDataChannel } from "@fishjam-cloud/react-client";
+import { useCallback, useEffect, useState } from "react";
+
+export function useChat() {
+  const { peerStatus } = useConnection();
+  const {
+    initializeDataChannel,
+    publishData,
+    subscribeData,
+    dataChannelReady,
+  } = useDataChannel();
+
+  const [messages, setMessages] = useState<string[]>([]);
+
+  // Step 1: Initialize data channel when connected
+  useEffect(() => {
+    if (peerStatus === "connected") {
+      initializeDataChannel();
+    }
+  }, [peerStatus, initializeDataChannel]);
+
+  // Step 2: Subscribe to incoming messages
+  useEffect(() => {
+    if (!dataChannelReady) return;
+
+    const unsubscribe = subscribeData(
+      (data: Uint8Array) => {
+        const message = new TextDecoder().decode(data);
+        setMessages((prev) => [...prev, message]);
+      },
+      { reliable: true },
+    );
+
+    return unsubscribe;
+  }, [subscribeData, dataChannelReady]);
+
+  // Step 3: Publish messages
+  const sendMessage = useCallback(
+    (text: string) => {
+      if (!dataChannelReady) return;
+
+      const encoded = new TextEncoder().encode(text);
+      publishData(encoded, { reliable: true });
+    },
+    [publishData, dataChannelReady],
+  );
+
+  return { messages, sendMessage, ready: dataChannelReady };
+}
+```
+
+  </TabItem>
+  <TabItem value="mobile" label="React Native (Mobile)" disabled>
+
+Mobile SDK support for data channels will be available in a future release.
+
+  </TabItem>
+</Tabs>
+
+---
+
+## Step 2 — Use the chat hook in your component
+
+Once you have the hook, you can use it in any component to send and display messages:
+
+<Tabs groupId="platform">
+  <TabItem value="web" label="React (Web)">
+
+```tsx
+import React from "react";
+import { useConnection, useDataChannel } from "@fishjam-cloud/react-client";
+import { useCallback, useEffect, useState } from "react";
+
+function useChat() {
+  const { peerStatus } = useConnection();
+  const {
+    initializeDataChannel,
+    publishData,
+    subscribeData,
+    dataChannelReady,
+  } = useDataChannel();
+
+  const [messages, setMessages] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (peerStatus === "connected") {
+      initializeDataChannel();
+    }
+  }, [peerStatus, initializeDataChannel]);
+
+  useEffect(() => {
+    if (!dataChannelReady) return;
+
+    const unsubscribe = subscribeData(
+      (data: Uint8Array) => {
+        const message = new TextDecoder().decode(data);
+        setMessages((prev) => [...prev, message]);
+      },
+      { reliable: true },
+    );
+
+    return unsubscribe;
+  }, [subscribeData, dataChannelReady]);
+
+  const sendMessage = useCallback(
+    (text: string) => {
+      if (!dataChannelReady) return;
+
+      const encoded = new TextEncoder().encode(text);
+      publishData(encoded, { reliable: true });
+    },
+    [publishData, dataChannelReady],
+  );
+
+  return { messages, sendMessage, ready: dataChannelReady };
+}
+
+// ---cut---
+
+function ChatPanel() {
+  const { messages, sendMessage, ready } = useChat();
+  const [input, setInput] = useState("");
+
+  const handleSend = () => {
+    if (input.trim()) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  if (!ready) {
+    return <div>Connecting to chat...</div>;
+  }
+
+  return (
+    <div>
+      <div>
+        {messages.map((msg: string, i: number) => (
+          <div key={i}>{msg}</div>
+        ))}
+      </div>
+      <input
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && handleSend()}
+      />
+      <button onClick={handleSend}>Send</button>
+    </div>
+  );
+}
+```
+
+  </TabItem>
+  <TabItem value="mobile" label="React Native (Mobile)" disabled>
+
+Mobile SDK support for data channels will be available in a future release.
+
+  </TabItem>
+</Tabs>
+
+---
+
+## Why use the reliable channel?
+
+For chat messages, we use `{ reliable: true }` because:
+
+- **Ordered delivery**: Messages arrive in the order they were sent
+- **Guaranteed delivery**: All messages will be delivered, with automatic retransmission if needed
+
+This ensures no chat messages are lost or arrive out of order.
+
+---
+
+## See also
+
+- [Data Channels](../../explanation/data-channels) — detailed explanation of channel types and broadcast behavior
+- [Connecting to a room](../../how-to/client/connecting) — prerequisite for using data channels
+- [`useDataChannel` API reference](../../api/web/functions/useDataChannel)