RxJS：取消订阅嵌套订阅

Question

I use SockJS and StompJS and when I open my application in the browser sometimes it tries to subscribe to some topics before it even connected to the websocket. I'd like the topic subscription wait until the app is connected to websocket.

export class SocksService {
...

public subscribe<T>(destination: string, callback?: (body: T) => void, headers?: object): Observable<Subscription> {
const subscription = new Subject<Subscription>();
headers = headers || {};

this.status.pipe(
  first(status => status === ConnectionStatus.CONNECTED)
).subscribe((status: ConnectionStatus) => {
  subscription.next(this.stompClient.subscribe(destination, (message: Message) => {
    if (callback) {
      callback(JSON.parse(message.body) as T);
    }
  }, headers));
});

return subscription.asObservable();
  }

...
}

That's why I implemented this code and I call it like:

this.socksService.subscribe<User>('/topic/user', (user: User) => {
  console.log('user received', user);
}).subscribe(subscription => this.userSubscription = subscription);

So I subscribe to the topic only when the connection status is connected and it will be called only for the first time the client successfully connects.

I'd like to unsubscribe later from the topic, so I need the Subscription object returned by the inner subscribe and I also need the message from the inner subscribe.

What I implemented works good, but I think there must be a better way to do it.

(I tried rx-stomp, but it has many bugs.)

Answer 1

You said you tried rx-stomp but have you tried the Angular2+ version of rx-stomp, called ng2-stompjs ? It exposes key classes as Angular Injectable Services.

See the mention of it under rx-stomp, here: https://github.com/stomp-js/ng2-stompjs#documentation

...and it's implementation (Angular 7) via a nice step-by-step, here: https://stomp-js.github.io/guide/ng2-stompjs/ng2-stomp-with-angular7.html#receiving-messages

eg:

this.rxStompService.watch('/topic/demo').subscribe((message: Message) => {
      this.receivedMessages.push(message.body);
    });