Начало работы getStream (stream.io) в угловом приложении - PullRequest
Новая
       15

Начало работы getStream (stream.io) в угловом приложении

0 голосов
/ 15 мая 2018

Я пытаюсь использовать эту библиотеку getStream

теперь у них есть быстрый старт angular-cli здесь

но я не могу на всю жизнь понять, как заставить это работать ..

Нет реальной документации о том, как заставить его работать в угловом приложении, когда вы загружаете проект, вы попадаете на эту страницу

enter image description here

структура файла примерно такая ... 

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

Теперь в stream.service.ts у вас есть .. 

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']);
  }
}

и в 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;
      });
  }

}

, а затем 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() {
  }

}

теперь согласно руководству по быстрому запуску для 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.
  }
);

теперь я не уверен, где я могу поместить этот код, чтобы заставить это работать ... Я пытался сделать это в компоненте активности канала 

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

но это, похоже, ничего не делает ??

Мне интересно, имел ли кто-нибудь успех во внедрении stream.io в там угловые приложения ??

любая помощь будет оценена!

1 Ответ

0 голосов
/ 15 мая 2018

Для добавления действий требуется токен чтения / записи. Этот демонстрационный проект предназначен только для «чтения» канала и поэтому не содержит такого токена (см. environments.ts).

Это объясняет, почему после добавления вашей исправленной функции ngOnInit в feed-activity.component через обработчик отклонений Promise выводится следующая ошибка:

FeedError {message: «Отсутствует токен, в режиме на стороне клиента укажите секретный канал», ...}

Маркер чтения / записи должен создаваться в защищенной области (например, внутреннем приложении), где целесообразно хранить и использовать ключ API и API Secret.

...