Skip to content

Commit 534a25b

Browse files
MiloszFilimowskiMiloszFilimowski
authored
FCE-2777: Update documentation about data channels on mobile (#223)
## Description - Update documentation about data channels on mobile - Fix installation docs - Add missing Android permissions
1 parent 7f6f300 commit 534a25b

11 files changed

Lines changed: 403 additions & 27 deletions

File tree

‎docs/explanation/data-channels.mdx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,22 @@ This separation allows you to use both channels simultaneously for different pur
4242

4343
## Using Data Channels
4444

45-
Use the [`useDataChannel`](../api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
45+
Use the `useDataChannel` hook to work with data channels. The hook is available in both the web and mobile SDKs with the same API:
46+
47+
<Tabs groupId="platform">
48+
<TabItem value="web" label="React (Web)">
49+
50+
Use [`useDataChannel`](../api/web/functions/useDataChannel) from `@fishjam-cloud/react-client`.
51+
52+
</TabItem>
53+
<TabItem value="mobile" label="React Native (Mobile)">
54+
55+
Use [`useDataChannel`](../api/mobile/functions/useDataChannel) from `@fishjam-cloud/react-native-client`.
56+
57+
</TabItem>
58+
</Tabs>
59+
60+
The typical flow is:
4661

4762
1. Initialize the data channel after connecting to a room
4863
2. Subscribe to incoming messages

‎docs/how-to/client/installation.mdx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,23 +77,45 @@ You can also follow more detailed [Expo instructions](https://docs.expo.dev/get-
7777

7878
## Step 1: Install the Package
7979

80-
Install `@fishjam-cloud/react-native-client` with your preferred package manager.
80+
<Tabs groupId="app-type">
81+
82+
<TabItem value="expo" label="Expo (SDK 54+)">
83+
84+
Install `@fishjam-cloud/react-native-client` and `react-native-get-random-values` with your preferred package manager.
85+
86+
```bash npm2yarn
87+
npm install @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
88+
```
89+
90+
Expo SDK 54+ resolves native dependencies recursively, so `@fishjam-cloud/react-native-webrtc` (a transitive dependency) is autolinked automatically.
91+
92+
</TabItem>
93+
<TabItem value="rn" label="Bare React Native / Expo SDK < 54">
94+
95+
Install `@fishjam-cloud/react-native-client`, `@fishjam-cloud/react-native-webrtc`, and `react-native-get-random-values`:
8196

8297
```bash npm2yarn
83-
npm install @fishjam-cloud/react-native-client
98+
npm install @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
8499
```
85100

101+
Bare React Native and Expo SDK versions below 54 only autolink direct dependencies.
102+
`@fishjam-cloud/react-native-webrtc` must be in your app's `package.json` for its native code to be linked.
103+
104+
</TabItem>
105+
</Tabs>
106+
86107
## Step 2: Configure App Permissions
87108

88109
Your app needs to have permissions configured in order to use the microphone and camera.
89110

90111
### Android
91112

92-
These permissions are required to stream audio and video with Fishjam on Android:
113+
The following Android permissions are required by Fishjam:
93114

94115
- `android.permission.CAMERA`
95116
- `android.permission.RECORD_AUDIO`
96117
- `android.permission.MODIFY_AUDIO_SETTINGS`
118+
- `android.permission.ACCESS_NETWORK_STATE`
97119

98120
<Tabs groupId="app-type">
99121

@@ -110,7 +132,8 @@ Add required permissions to the `app.json` file.
110132
"permissions": [
111133
"android.permission.CAMERA",
112134
"android.permission.RECORD_AUDIO",
113-
"android.permission.MODIFY_AUDIO_SETTINGS"
135+
"android.permission.MODIFY_AUDIO_SETTINGS",
136+
"android.permission.ACCESS_NETWORK_STATE"
114137
]
115138
}
116139
}
@@ -128,6 +151,7 @@ Add required permissions to the `AndroidManifest.xml` file.
128151
<uses-permission android:name="android.permission.CAMERA"/>
129152
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
130153
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
154+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
131155
...
132156
</manifest>
133157
```

‎docs/how-to/client/migration-guide.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ Add the following WebRTC permissions to your Android configuration in `app.json`
2424
"permissions": [
2525
"android.permission.CAMERA",
2626
"android.permission.RECORD_AUDIO",
27-
"android.permission.MODIFY_AUDIO_SETTINGS"
27+
"android.permission.MODIFY_AUDIO_SETTINGS",
28+
"android.permission.ACCESS_NETWORK_STATE"
2829
]
2930
}
3031
}

‎docs/how-to/features/text-chat.mdx‎

Lines changed: 153 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ For a deeper understanding of how data channels work, including channel types an
2222

2323
## Step 1 — Set up the chat hook
2424

25-
Use the [`useDataChannel`](/api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
25+
Use the [`useDataChannel`](/api/web/functions/useDataChannel) (web) or [`useDataChannel`](/api/mobile/functions/useDataChannel) (mobile) hook to work with data channels. The typical flow is:
2626

2727
1. Initialize the data channel after connecting to a room
2828
2. Subscribe to incoming messages
@@ -84,9 +84,67 @@ export function useChat() {
8484
```
8585

8686
</TabItem>
87-
<TabItem value="mobile" label="React Native (Mobile)" disabled>
87+
<TabItem value="mobile" label="React Native (Mobile)">
8888

89-
Mobile SDK support for data channels will be available in a future release.
89+
```tsx
90+
import {
91+
useConnection,
92+
useDataChannel,
93+
} from "@fishjam-cloud/react-native-client";
94+
import { useCallback, useEffect, useState } from "react";
95+
96+
export function useChat() {
97+
const { peerStatus } = useConnection();
98+
const {
99+
initializeDataChannel,
100+
publishData,
101+
subscribeData,
102+
dataChannelReady,
103+
dataChannelLoading,
104+
dataChannelError,
105+
} = useDataChannel();
106+
107+
const [messages, setMessages] = useState<string[]>([]);
108+
109+
useEffect(() => {
110+
if (peerStatus === "connected") {
111+
initializeDataChannel();
112+
}
113+
}, [peerStatus, initializeDataChannel]);
114+
115+
useEffect(() => {
116+
if (dataChannelLoading || !dataChannelReady) return;
117+
118+
const unsubscribe = subscribeData(
119+
(data: Uint8Array) => {
120+
const message = new TextDecoder().decode(data);
121+
setMessages((prev) => [...prev, message]);
122+
},
123+
{ reliable: true },
124+
);
125+
126+
return unsubscribe;
127+
}, [dataChannelReady, dataChannelLoading, subscribeData]);
128+
129+
const sendMessage = useCallback(
130+
(text: string) => {
131+
if (!dataChannelReady) return;
132+
133+
const encoded = new TextEncoder().encode(text);
134+
publishData(encoded, { reliable: true });
135+
},
136+
[publishData, dataChannelReady],
137+
);
138+
139+
return {
140+
messages,
141+
sendMessage,
142+
ready: dataChannelReady,
143+
loading: dataChannelLoading,
144+
error: dataChannelError,
145+
};
146+
}
147+
```
90148

91149
</TabItem>
92150
</Tabs>
@@ -185,9 +243,97 @@ function ChatPanel() {
185243
```
186244

187245
</TabItem>
188-
<TabItem value="mobile" label="React Native (Mobile)" disabled>
246+
<TabItem value="mobile" label="React Native (Mobile)">
247+
248+
```tsx
249+
import React, { useState, useEffect, useCallback } from "react";
250+
import { View, Text, TextInput, FlatList, Pressable } from "react-native";
251+
import {
252+
useConnection,
253+
useDataChannel,
254+
} from "@fishjam-cloud/react-native-client";
255+
256+
function useChat() {
257+
const { peerStatus } = useConnection();
258+
const {
259+
initializeDataChannel,
260+
publishData,
261+
subscribeData,
262+
dataChannelReady,
263+
} = useDataChannel();
264+
265+
const [messages, setMessages] = useState<string[]>([]);
266+
267+
useEffect(() => {
268+
if (peerStatus === "connected") {
269+
initializeDataChannel();
270+
}
271+
}, [peerStatus, initializeDataChannel]);
189272

190-
Mobile SDK support for data channels will be available in a future release.
273+
useEffect(() => {
274+
if (!dataChannelReady) return;
275+
276+
const unsubscribe = subscribeData(
277+
(data: Uint8Array) => {
278+
const message = new TextDecoder().decode(data);
279+
setMessages((prev) => [...prev, message]);
280+
},
281+
{ reliable: true },
282+
);
283+
284+
return unsubscribe;
285+
}, [subscribeData, dataChannelReady]);
286+
287+
const sendMessage = useCallback(
288+
(text: string) => {
289+
if (!dataChannelReady) return;
290+
291+
const encoded = new TextEncoder().encode(text);
292+
publishData(encoded, { reliable: true });
293+
},
294+
[publishData, dataChannelReady],
295+
);
296+
297+
return { messages, sendMessage, ready: dataChannelReady };
298+
}
299+
300+
// ---cut---
301+
302+
function ChatPanel() {
303+
const { messages, sendMessage, ready } = useChat();
304+
const [input, setInput] = useState("");
305+
306+
const handleSend = () => {
307+
if (input.trim()) {
308+
sendMessage(input);
309+
setInput("");
310+
}
311+
};
312+
313+
if (!ready) {
314+
return <Text>Connecting to chat...</Text>;
315+
}
316+
317+
return (
318+
<View>
319+
<FlatList
320+
data={messages}
321+
keyExtractor={(_, i) => String(i)}
322+
renderItem={({ item }) => <Text>{item}</Text>}
323+
/>
324+
<TextInput
325+
value={input}
326+
onChangeText={setInput}
327+
placeholder="Type a message..."
328+
onSubmitEditing={handleSend}
329+
/>
330+
<Pressable onPress={handleSend}>
331+
<Text>Send</Text>
332+
</Pressable>
333+
</View>
334+
);
335+
}
336+
```
191337

192338
</TabItem>
193339
</Tabs>
@@ -209,4 +355,5 @@ This ensures no chat messages are lost or arrive out of order.
209355

210356
- [Data Channels](../../explanation/data-channels) — detailed explanation of channel types and broadcast behavior
211357
- [Connecting to a room](../../how-to/client/connecting) — prerequisite for using data channels
212-
- [`useDataChannel` API reference](../../api/web/functions/useDataChannel)
358+
- [`useDataChannel` API reference (Web)](../../api/web/functions/useDataChannel)
359+
- [`useDataChannel` API reference (Mobile)](../../api/mobile/functions/useDataChannel)

‎docs/tutorials/react-native-quick-start.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ Add required permissions to the `app.json` file:
5353
"permissions": [
5454
"android.permission.CAMERA",
5555
"android.permission.RECORD_AUDIO",
56-
"android.permission.MODIFY_AUDIO_SETTINGS"
56+
"android.permission.MODIFY_AUDIO_SETTINGS",
57+
"android.permission.ACCESS_NETWORK_STATE"
5758
]
5859
}
5960
}

‎packages/web-client-sdk‎

Submodule web-client-sdk updated 28 files

‎versioned_docs/version-0.25.0/explanation/data-channels.mdx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,22 @@ This separation allows you to use both channels simultaneously for different pur
4242

4343
## Using Data Channels
4444

45-
Use the [`useDataChannel`](../api/web/functions/useDataChannel) hook to work with data channels. The typical flow is:
45+
Use the `useDataChannel` hook to work with data channels. The hook is available in both the web and mobile SDKs with the same API:
46+
47+
<Tabs groupId="platform">
48+
<TabItem value="web" label="React (Web)">
49+
50+
Use [`useDataChannel`](../api/web/functions/useDataChannel) from `@fishjam-cloud/react-client`.
51+
52+
</TabItem>
53+
<TabItem value="mobile" label="React Native (Mobile)">
54+
55+
Use [`useDataChannel`](../api/mobile/functions/useDataChannel) from `@fishjam-cloud/react-native-client`.
56+
57+
</TabItem>
58+
</Tabs>
59+
60+
The typical flow is:
4661

4762
1. Initialize the data channel after connecting to a room
4863
2. Subscribe to incoming messages

‎versioned_docs/version-0.25.0/how-to/client/installation.mdx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,23 +77,45 @@ You can also follow more detailed [Expo instructions](https://docs.expo.dev/get-
7777

7878
## Step 1: Install the Package
7979

80-
Install `@fishjam-cloud/react-native-client` with your preferred package manager.
80+
<Tabs groupId="app-type">
81+
82+
<TabItem value="expo" label="Expo (SDK 54+)">
83+
84+
Install `@fishjam-cloud/react-native-client` and `react-native-get-random-values` with your preferred package manager.
85+
86+
```bash npm2yarn
87+
npm install @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
88+
```
89+
90+
Expo SDK 54+ resolves native dependencies recursively, so `@fishjam-cloud/react-native-webrtc` (a transitive dependency) is autolinked automatically.
91+
92+
</TabItem>
93+
<TabItem value="rn" label="Bare React Native / Expo SDK < 54">
94+
95+
Install `@fishjam-cloud/react-native-client`, `@fishjam-cloud/react-native-webrtc`, and `react-native-get-random-values`:
8196

8297
```bash npm2yarn
83-
npm install @fishjam-cloud/react-native-client
98+
npm install @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
8499
```
85100

101+
Bare React Native and Expo SDK versions below 54 only autolink direct dependencies.
102+
`@fishjam-cloud/react-native-webrtc` must be in your app's `package.json` for its native code to be linked.
103+
104+
</TabItem>
105+
</Tabs>
106+
86107
## Step 2: Configure App Permissions
87108

88109
Your app needs to have permissions configured in order to use the microphone and camera.
89110

90111
### Android
91112

92-
These permissions are required to stream audio and video with Fishjam on Android:
113+
The following Android permissions are required by Fishjam:
93114

94115
- `android.permission.CAMERA`
95116
- `android.permission.RECORD_AUDIO`
96117
- `android.permission.MODIFY_AUDIO_SETTINGS`
118+
- `android.permission.ACCESS_NETWORK_STATE`
97119

98120
<Tabs groupId="app-type">
99121

@@ -110,7 +132,8 @@ Add required permissions to the `app.json` file.
110132
"permissions": [
111133
"android.permission.CAMERA",
112134
"android.permission.RECORD_AUDIO",
113-
"android.permission.MODIFY_AUDIO_SETTINGS"
135+
"android.permission.MODIFY_AUDIO_SETTINGS",
136+
"android.permission.ACCESS_NETWORK_STATE"
114137
]
115138
}
116139
}
@@ -128,6 +151,7 @@ Add required permissions to the `AndroidManifest.xml` file.
128151
<uses-permission android:name="android.permission.CAMERA"/>
129152
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
130153
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
154+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
131155
...
132156
</manifest>
133157
```

0 commit comments

Comments
 (0)