Web & Mobile

Last Edit: Oct 06 2020

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.


const userId = 'test-user-1';
const userToken = client.createUserToken(userId);
                    

user_id = 'test-user-1'
client.create_user_session_token(user_id)
                    

$user_id = 'test-user-1';
$client->createUserSessionToken($user_id);
                    

String userID = "test-user-1";
Token token = client. frontendToken(userID);
                    

React Components

If you are using React for your application, you can take advantage of Stream's react-activity-feed component library.


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

If you are using React Native for your application, you can take advantage of Stream's react-native-activity-feed component library.


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

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

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


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


<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:


// 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":"",
 }
                    
To receive real-time notifications for a feed, you need to enable the feature via the Dashboard's feed configuration page.

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.