Select your Platform:
backend SDKs
client SDKs
Web & Mobile
Confused about "Web & Mobile"?
Let us know how we can improve our documentation:
Many of our users build native iOS and Android apps, web apps, or mobile apps with React Native. Stream can be used directly inside a browser or mobile application. The only difference is how you initialize the API client. Because browsers and mobile apps are not trusted environments, you must create a user token server-side and pass it to your app. This way, each user gets a unique token that allows performing actions only to their feeds and activities.
1
2
const userId = 'test-user-1';
const userToken = client.createUserToken(userId);
1
2
user_id = 'test-user-1'
client.create_user_session_token(user_id)
1
2
$user_id = 'test-user-1';
$client->createUserSessionToken($user_id);
1
2
String userID = "test-user-1";
Token token = client. frontendToken(userID);
React Components
Copied!Confused about "React Components"?
Let us know how we can improve our documentation:
If you are using React for your application, you can take advantage of Stream's react-activity-feed component library.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
import { StreamApp, StatusUpdateForm, FlatFeed } from 'react-activity-feed';
import 'react-activity-feed/dist/index.es.css';
export default class App extends Component {
render() {
return (
<div style={{ width: '600px', margin: '0 auto' }}>
<StreamApp
apiKey="pw5nu994f85j"
appId="YOUR_65217"
token={userToken}
>
<StatusUpdateForm />
<FlatFeed feedGroup="user" notify />
</StreamApp>
</div>
);
}
}
React Native Components
Copied!Confused about "React Native Components"?
Let us know how we can improve our documentation:
If you are using React Native for your application, you can take advantage of Stream's react-native-activity-feed component library.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import {
StreamApp,
FlatFeed,
Activity,
LikeButton,
StatusUpdateForm,
} from 'expo-activity-feed';
const CustomActivity = (props) => {
return (
<Activity
{...props}
Footer={
<LikeButton {...props} />
}
/>
);
};
const App = () => {
return (
<SafeAreaView style={{flex: 1}} forceInset={{ top: 'always' }}>
<StreamApp
apiKey={'YOUR_API_KEY'}
appId={'APP_ID'}
token={'FEED_USER_TOKEN'}
>
<FlatFeed Activity={CustomActivity} />
<StatusUpdateForm feedGroup="timeline" />
</StreamApp>
</SafeAreaView>
);
};
export default App;
iOS Components
Copied!Confused about "iOS Components"?
Let us know how we can improve our documentation:
If you are building an app with Stream on iOS, you can take advantage of Stream's iOS/Swift components library.
You can find more information about the iOS Activity Feed library here.
Subscribing to changes
Copied!Confused about "Subscribing to changes"?
Let us know how we can improve our documentation:
Stream allows you to listen to feed changes in real-time directly on your mobile or web application. You can use the API client to subscribe for changes to one or many feeds; each time a new activity is added or removed, an update will be received directly.
Subscribing to changes in real-time is done via JavaScript using the stream-js client. If you are not using it already, you can obtain it here.
Once you have included the JavaScript client in your pages you can subscribe to real-time notifications this way:
Subscribe to Realtime Updates Via API Client
Copied!Confused about "Subscribe to Realtime Updates Via API Client"?
Let us know how we can improve our documentation:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const notificationFeed = client.feed('notification', '1');
const callback = data => {
console.log(data);
};
const successCallback = () => {
console.log('now listening to changes in realtime');
};
const failCallback = data => {
alert('something went wrong, check the console logs');
console.log(data);
};
notificationFeed.subscribe(callback).then(successCallback, failCallback);
Subscribe to Realtime Updates Using UMD Script
Copied!Confused about "Subscribe to Realtime Updates Using UMD Script"?
Let us know how we can improve our documentation:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/getstream/dist/js_min/getstream.js">
</script>
<script type="text/javascript">
const client = stream.connect('api_key', 'api_secret', 'app_id');
const notificationFeed = client.feed('notification', '1');
const callback = data => {
console.log(data);
};
const successCallback = () => {
console.log('now listening to changes in realtime');
};
const failCallback = data => {
alert('something went wrong, check the console logs');
console.log(data);
};
notificationFeed.subscribe(callback).then(successCallback, failCallback);
</script>
Stream returns the following data via the realtime endpoint:
1
2
3
4
5
6
7
8
9
10
11
// Realtime notification data format
{
"data": {
"deleted": "array activities",
"new": "array activities",
"feed": "the feed id",
"app_id": "the app id",
"published_at":"time in iso format",
},
"channel":"",
}
Besides the realtime endpoint, you can also connect to Stream's Firehose via SQS or webhooks. This is helpful if you want to send push notifications or emails based on feed activity.