Web & Mobile

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

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.

© Getstream.io, Inc. All Rights Reserved.