Pass a variable to a observable

Question

I'm currently using an observable in the following way:

this._socket.onMessage.subscribe(
    (message) => {

    }
);

which works fine! However, Would it be possible to pass a variable to the observable that would allow for some logic?

For example by passing a variable "name" to onMessage, I could subscribe only to events whos name is something specific? Like this:

this._socket.onMessage(name-variable).subscribe(
    (message) => {
        // only get events that is related to the name-variable
    }
);

Reactgular · Accepted Answer · 2017-07-03 14:41:31Z

9

You have to create helper functions that yield the desired effect.

public getMessagesForName(name: string): Observable<any> {
    return this._socket.onMessage.filter((message) => {
        return message.name === name;
    });
}

The more advanced approach would be to create your own class that extends one of the Subject classes. Like EventEmitter or Subject and add the helper functions there. You would then just apply the filter to the this reference.

Here's an example:

 class MessageEvent extends EventEmitter<MessageData> {
       public forName(name: string): Observable<MessageData> {
          return this.filter((message) => {
               return message.name === name;
          });
       }
 }

It all depends on how much re-use you need.

edited Jul 3, 2017 at 14:41

answered Jul 3, 2017 at 14:35

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zander17 Over a year ago

Exactly what I need. Will work this in and reward accordingly. Cheers!

SaxyPandaBear · Accepted Answer · 2017-07-03 14:36:04Z

3

Edit: See the answer by ThnkingMedia

I'm not so sure if you can do it with the syntax you're looking for, but you could probably do something along the lines of

let flag: boolean = someProperty;
this._socket.onMessage.subscribe(
    (message) => {
        if (flag) { // do something
        }
    }
);

Also, I'm pretty sure on your Observable you can use a filter() call. So the Observable could probably change

myObservable.filter(...).map(...).subscribe(....)
//where myObservable is the Observable object you're working with

answered Jul 3, 2017 at 14:36

SaxyPandaBear

3771 silver badge6 bronze badges

Comments

HendrikThurauEnterprises · Accepted Answer · 2021-04-22 22:15:04Z

3

For anybody needing this, this is how you can pass variables to observables and use the observer at the same time:

function onMessage(message): Observable<any>{
   return new Observable(observer => {
      socket.message(message).subscribe(result => {
         observer.next(result); 
      });
   });
}

This way you can use it like this:

onMessage('Hello World').subscribe(msg => {
   alert(msg);
});

edited Apr 22, 2021 at 22:15

answered Apr 21, 2021 at 15:39

HendrikThurauEnterprises

1043 bronze badges

Comments

user4676340 · Accepted Answer · 2017-07-03 14:32:17Z

1

I didn't quite understand what you meant here, but yes you can pass a value to an Observable. The code is quite simple

returnCustomObservable() {
    return Observable.of('Your value here');
}

However, if I got you correctly, this means you have to rewrite the onMessage function to give it the value you want.

answered Jul 3, 2017 at 14:32

user4676340

1 Comment

Zander17 Over a year ago

Sorry I wasn't clear. I believe that is the answer I'm looking for, quite straight forward. I appreciate your response.

silicakes · Accepted Answer · 2017-07-03 14:43:39Z

1

You can do something like that with a small design shift:

function handleFoo(data) {}

function handleBar(data) {}

const messageGroups = {
  foo: handleFoo
  bar: handleBar
}

this._socket.onMessage.subscribe(
    (message) => messageGroups[message.type](message)
);

this will allow more generic handling of specific message groups, which imo, is a cleaner way to achieve MDNs suggestion: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications#Receiving_messages_from_the_server

edited Jul 3, 2017 at 14:43

answered Jul 3, 2017 at 14:35

silicakes

6,9323 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

Pass a variable to a observable

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related