angular rxjs change async observable from websocket

Question

Hi I am using angular 7 with rxjs async

in my component I am using ngFor with an async observer

<item-comp [item]="item" *ngFor="let item of groupsService.selectedItems$ | async; ">

</item-comp>

In my service I have an BehaviorSubject that gets emited when a group is selected by the user

  public groupSelected$: BehaviorSubject<any> = new BehaviorSubject(null);

and this is the selectedItems$ Observable :

public selectedItems$ = this.groupSelected$.pipe(
    switchMap((group: any) => {
        if (!group)
          return new EmptyObservable();

        return this.http.get('/api/'+ group)
          .pipe(
            map((res: any) => {
                return res.items;
              }
            )
          )
      }
    )
  )

this works , but now I need to be able to change specific items in response to websocket messages. I have a websocket connection that handles messages where items get updated. is there a way to do this using a reactive approach with rxjs ?

Answer 1

You can create an higher order functions for websocket updates then chain it up with your http request

const onUpdate=(items)=>updateFromWebSocket.pipe(
   map(itemUpdates=>{........ return updatedItems}
   startWith(items)
)

selectedItems$.pipe(switchMap(items=>onUpdate(items)).subscribe()