Getting getStream (stream.io) working in angular application

Question

I'm trying to use this library getStream

now they have an angular-cli quick start here

but I cant for the life of me figure out how to get it working..

There is no real documentation on how to get it working in an angular application, when you load the project you come to this page

the file structure is like so..

src
│   README.md
│   angular.cli.json
|   ...  
│
└───App
    │   app.module.ts
    │   app.component.ts
    |   stream.service.ts
    |   stream-activity.model.ts
    │   ...
    |   
    └───feed-activity
    |   │   feed-activity.component.html
    |   │   feed-activity.component.ts
    |   │   ...
    |    
    └───feed-activity-list
            │   feed-activity-list.component.html
            │   feed-activity-list.component.ts
            |   ...

Now in the stream.service.ts you have..

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

import * as stream from 'getstream';
import { StreamActivity } from './stream-activity.model';

@Injectable()
export class StreamService {
  client: stream.Client;

  constructor() {
    // Instantiate a new client (client side)
    this.client = stream.connect(
      environment.STREAM_APP_KEY,
      null,
      environment.STREAM_APP_ID);
  }

  getFeed(): Promise<StreamActivity[]> {
    // Instantiate the feed via factory method
    const feed = this.client.feed(
      environment.STREAM_FEED_GROUP,
      environment.STREAM_FEED_ID,
      environment.STREAM_FEED_READ_ONLY_TOKEN);

    // Fetch the feed and pick the results property off the response object
    return feed.get().then(response => response['results']);
  }
}

and in the feed-activity-list.ts

import { Component, OnInit } from '@angular/core';

import { StreamService } from '../stream.service';
import { StreamActivity } from '../stream-activity.model';

@Component({
  selector: 'app-feed-activity-list',
  templateUrl: './feed-activity-list.component.html',
  styleUrls: ['./feed-activity-list.component.scss']
})
export class FeedActivityListComponent implements OnInit {
  activities: StreamActivity[] = [];

  constructor(
    private streamClient: StreamService
  ) { }

  ngOnInit() {
      this.streamClient.getFeed().then(activities => {
        console.log('Service promise resolved: ', activities);
        this.activities = activities;
      });
  }

}

and then the feed-activity.component.ts

import { Component, Input, OnInit } from '@angular/core';

import { StreamActivity } from '../stream-activity.model';
import { StreamService } from '../stream.service';

@Component({
  selector: 'app-feed-activity',
  templateUrl: './feed-activity.component.html',
  styleUrls: ['./feed-activity.component.scss']
})
export class FeedActivityComponent implements OnInit {
  @Input() activity: StreamActivity = new StreamActivity();

  constructor(
    private _StreamActivity: StreamActivity,
    private _streamService: StreamService
  ) { }

  ngOnInit() {
  }

}

now as per the quickstart guide for js

var chris = client.feed('user', 'chris');

// Add an Activity; message is a custom field - tip: you can add unlimited 
// custom fields!
chris.addActivity({
  actor: 'chris',
  verb: 'add',
  object: 'picture:10',
  foreign_id: 'picture:10',
  message: 'Beautiful bird!'
}).then(
  null, // nothing further to do
  function(err) {
    // Handle or raise the Error.
  }
);

now Im not sure where I can put this code to get this working... I tried to do this in the feed-activity component

ngOnInit() {
    const user = this._streamService.client.feed('user', 'user');

    user.addActivity({
      actor: 'user',
      verb: 'add',
      message: 'Beautiful bird!'
    }).then(
      null,
      function(err) {
        console.log(err);
      }
    );
  }

but that doesnt seem to do anything??

Im wondering if anyone has had any success in implementing stream.io into there angular applications??

any help would be appreciated!

Answer 1

Adding activities requires a read/write token. This demo project is only intended to 'read' a feed and therefore doesn't include a such a token (see environments.ts).

That explains why, after adding your revised ngOnInit function to the feed-activity.component, the following error is printed via the Promise rejection handler:

FeedError {message: "Missing token, in client side mode please provide a feed secret", ... }

The read/write token should be generated in a secure area (e.g. a backend application) where it's appropriate to store and use the API Key and API Secret.