How to Observe a Custom Event using RXJS in Angular 2?

You can use fromEventPattern to create an observable from a custom event:

import { Observable } from 'rx/Observable';
import 'rxjs/add/observable/fromEventPattern';

const messages = Observable.fromEventPattern(
  handler => client.on('message', handler),
  handler => client.off('message', handler)
);
messages.subscribe(message => console.log(message));

You pass to fromEventPattern functions that add and remove the event handler using the custom API's add and remove mechanism. You've not included it in your question, but I've assumed the API you're using implements an off method.

For this use-cases you typically don't need to write a custom Observable and you can use just Observable.create(). Then it depends on whether you want to write a cold or a hot observable.

For cold Observables you create the producer of values when subscribing and close it when unsubscribing:

Observable.create(obs => {
  var client = new TigerConnect.Client({ defaultOrganizationId: 'some-org-id' });
  client.signIn('[email protected]', 's3cr3t', { udid: 'unique-device-id' }).then(function (session) {
    onSignedIn(session);
  });

  client.on('message', function (message) {
    obs.next(...);
  });

  return () => {
    client.close(); // or whatever...
  };
});

Or if you want to write a hot Observable the producer will exist independently on any subscriptions and just add/remove the listener:

var client = new TigerConnect.Client({ defaultOrganizationId: 'some-org-id' });
client.signIn('[email protected]', 's3cr3t', { udid: 'unique-device-id' }).then(function (session) {
  onSignedIn(session);
});

Observable.create(obs => {
  let listener = client.on('message', function (message) {
    obs.next(...);
  });

  () => {
    // remove the event listener somehow
    listener.remove();
  };
});

Sometimes you can see this solved by using a Subject but this is usually more complicated than using Observable.create() because then you need to handle the creation and tear down logic yourself and also Subjects have internal state (see Subject and its internal state).

Here's a very similar question as yours:

• Subscribe to a stream with RxJS and twitter-stream-api module

Articles on the topics related to your question by the lead developer of RxJS:

• https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339

• https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93

• https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87

• https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87

As I said in the comments you can use observable to subscribe the stream. I am not sure if you can change the code because you copied from their code but if you're able to change it. This is how observable works:

Generally in big applications you have a data.service.ts(you can check Angular 2 tutorial). In that:

@Injectable()

    export class MyMessageDataService{ 

        constructor(private http: Http) {}

        getMessageData(message: //whatever your component is called): Observable<any> {
           //I said any but it can be something like <Message[]>
          console.log("we got " + myendpoint//whatever endpoint you're listening from;
        }
    .
    . //implement your parameters and code here, this part is different for everyone but you will need a bodyString = JSON.stringify(body), a headers and a options variables. Look below for examples.
    .

     //Stringify payload
     let bodyString = JSON.stringify(body);

     // Contetn type to JSON
     let headers = new Headers({'Content-Type' : 'application/json'}) // if you have an access token new Headers({'Content-Type' : 'application/json', 'access-token : token})  //whatever your token's name is such as token

     //You need a request so you need to create a request option
     let options = new RequestOIptions({headers: headers});

    //a get call because I think you need to stream so a get should help you
    return this.http.get(this.commentsUrl)
                    .map((res:Response) => res.json())
                    .catch((error:any) => Observable.throw(error.json().error || 'Error message')

    }

That's how I created mine, but you need to do some other things in the component which you can check from: here

If you need further help for components or want to set an interval let me know, I can complete those parts too.