0

Я недавно работаю с Angular и еще не уверенно себя чувствую с библотекой RxJs, по этому - прошу вашей помощи. Перепробовал кучу вариантов, но ничего не получается. Лучшее, что получилось - приведу ниже в примере.

Задача: Необходимо в веб-приложении Angular обновлять данные каждые 5 секунд. Для вывода данных использую AsyncPipe. Не могу понять каким образом можно настроить такую возможность. Если в ngOnInit единоразово получаю Observable объект и отдаю его в async pipe - все данные успешно выводятся, но при изменении данных на сервере - данные на клиенте не обновляются (что и логично. Нужно дергать сервер). Если я использую таймер - на клиенте видно, что постоянно происходит рефреш. У меня такое чувство, что мне вместо того, что бы присваивать новый Observable объект переменной tablesOrders$ - необходимо вместо вот такого таймера использовать какой-то оператор RxJs, что бы я не менял ссылку на объект, а обновлял текущий объект новыми данными (что-то вроде interval, но у меня не получилось его применить).

TS:

    export class TablesComponent implements OnInit, OnDestroy {

          @Input() myLocation$: Observable<Location>;
          @Input() myTables$: Observable<Table[]>;


    locationId: string;
    tablesOrders$: Observable<TableOrders[]> = new Observable<TableOrders[]>();
    private _onDestroy = new Subject<void>();
      loading: boolean = true;

      constructor(private element: ElementRef, public dialog: MatDialog, 
         private operations: TableOperationsService, private router: Router, 
         private snackBar: MatSnackBar) { }

      ngOnInit() {    

        this.myLocation$.pipe(takeUntil(this._onDestroy)).subscribe(result => {

          if (isNullOrUndefined(result.locationId)) { return };

          this.locationId = result.locationId.toString();

          this.updateOrdersTask();

            });

          }
          updateOrdersTask() {
            timer(0,5000).subscribe(_=>{
                let orders$ = this.operations.getOrders(this.locationId)
                   .pipe(takeUntil(this._onDestroy));
//вот здесь мы каждый раз присваимваем переменной новый объект
                this.tablesOrders$ = forkJoin([orders$, this.myTables$])
                    .pipe(timeout(5000), map(result => {
                  let tableOrders: TableOrders[] = [];
                  result[1].forEach(table => {
                let tb = new TableOrders(table,
                result[0].orders.data.filter(o => o.table.id == table.deviceID), result[0].waiter);
                    tableOrders.push(tb);

              });
              this.loading = false;
              return tableOrders;
            }),
              catchError(e => {
                this.loading = false;
                return of(null);
              }));
            return this.tablesOrders$;
          })
      }

HTML:

<mat-progress-bar mode="query" *ngIf="loading"></mat-progress-bar>

<div cdkDropList class="tables-list" (cdkDropListDropped)="drop($event)" *ngIf="!isNullOrUndefined(tablesOrders$ | async); else noTables">
  <div class="table-drag-box"
    *ngFor="let tableOrders of tablesOrders$ | async"
    cdkDragLockAxis="x" cdkDrag cdkDropListData="tableOrders"
    (cdkDragStarted)="swipeStarted($event)" (cdkDragMoved)="swipeMoved($event)"
    (cdkDragReleased)="swipeEnded($event, tableOrders)" (click)="showOrderDetails(tableOrders)">

<!-- здесь в различных элементах я использую переменную tableOrders которую получил из пайпа-->

</div>
</div>
2
  • создай пожалуйста пример на codesandbox, у тебя ужасно все очень запутанно, подписка внутри подписки и тд, не разберешься без реального примера. Еще и Observable через байндинг передается, и каждый раз рээсайнишь переменную для async pipe, букет :))))
    – arturovt
    30 сен 2019 в 20:08
  • @overthesanity да, есть такое)) Ок, сегодня вечером попробую, но обещать не могу так как сейчас я временно прыгнул на другую задачу. Контора дала возможность разобраться с Angular и по ходу дела сделать внутренний ресурс. В связи с этим - я не могу расшарить его "как есть", но могу попробовать сообразить что-то похожее. Хотя собственно - мне и не нужно непосредственно готовое решение, а скорее подсказка - как это правильно сделать (как это делают нормальные люди), а то гугл тольком не дает нормального ответа (возможно не знаю, как это правильно нагуглить).
    – Dmytro
    2 окт 2019 в 9:34

2 ответа 2

2

Хорошо, давай попытаемся разобраться в твоей проблеме. Это сделать нелегко, потому что у тебя спагетти-код (без обид 🤗). Давай попробуем из этих спагетти приготовить карбонару :)


Попрошу тебя в следующие разы вставлять отформатированный код, код, который ты вставил - неправильный, если я его копирую и вставляю в prettier, то prettier выдает ошибку.


И так, будем идти поэтапно по твоему коду, у тебя есть подписка на myLocation$, который передается через входной параметр. Внутри ты передаешь слушатель на событие next, делаешь проверку и вызываешь метод updateOrdersTask. Внутри метода ты подписываешься на timer, внутри слушателя события next ты создаешь поток, который передается параметром в конвеер async.


На будущее тебе говорю, что старайся вовсе избегать подписок в компонентах. Как не отписываться? Не подписывать вовсе. Подписки в компоненте в основном нужны в таких случаях, как отслеживание событий роутера через Router.prototype.events и так далее, где нет взаимодействия с шаблоном. Где есть взаимодействие с шаблоном, то достаточно просто создать поток и использовать async конвеер.


И так, нам нужно избавиться от подписок, для этого будем пайпить myLocation$ на timer с проверкой на undefined, то есть нам нужно заменить этот кусок кода:

this.myLocation$.pipe(takeUntil(this._onDestroy)).subscribe(result => {
  if (isNullOrUndefined(result.locationId)) {
    return;
  }

  this.locationId = result.locationId.toString();

  this.updateOrdersTask();
});

На это:

this.myLocation$.pipe(
  filter(result => !isNullOrUndefined(result.locationId)),
  map(result => result.locationId.toString())
);

Далее, каждый раз как поток myLocation$ генерирует событие нам нужно подписывать на timer(0, 5000), за нас это сделает switchMap (другие операторы мапинга проекций типа mergeMap|concatMap|exhaustMap нам не подходят):

this.myLocation$.pipe(
  filter(result => !isNullOrUndefined(result.locationId)),
  map(result => result.locationId.toString()),
  switchMap(locationId => timer(0, 5000).pipe(map(() => locationId)))
);

Заметь я timer замаппил на locationId, чтоб не создавать хаос операторов.

Далее, после генераций событий от timer - нам нужно маппить проекцию на forkJoin и тот код, который внутри map у тебя:

this.tablesOrders$ = this.myLocation$.pipe(
  filter(result => !isNullOrUndefined(result.locationId)),
  map(result => result.locationId.toString()),
  switchMap(locationId => timer(0, 5000).pipe(map(() => locationId))),
  switchMap(locationId => {
    const orders$ = this.operations.getOrders(locationId);
    return forkJoin([orders$, this.myTables$]).pipe(
      timeout(5000),
      map(result => {
        const tableOrders: TableOrder[] = [];
        result[1].forEach(table => {
          const tableOrders = new TableOrders(
            table,
            result[0].orders.data.filter(o => o.table.id == table.deviceID),
            result[0].waiter
          );
          tableOrders.push(tableOrders);
          this.loading = false;
          return tableOrders;
        });
      }),
      catchError(() => {
        this.loading = false;
        return of(null);
      })
    );
  })
);

Заметь, что я все это дело присвоил свойству tablesOrders$, не лучший код конечно же, но избавиться от спагетти он все равно помогает, ибо это код без побочных эффектов, не нужно переживать за таймеры и подписки внутри подписок, а также за гонки данных (какой таймер сгенерит событие раньше и тд), операторы это более explicit подход.

Есть еще одна проблемка - я не могу протестировать этот код, так как ты не привел воспроизводимого примера :( Так что, если что отпишись в комментах.

2
  • йомайо!)) Мои молитвы услышаны и боги ангуляра на них откликнулись) Спасибо за такой крутой ответ!) Добрался до этого проекта уже в пол первого ночи и уже просто нет сил тестить или создавать семплы, но завтра обязательно все сделаю! P/s: притиер использую, но когда из студии вставляю сюда код - он получается сильно размазан в ширину. Приходится руками переносить некоторые строки, что бы убрать скролл. Я прошу прощения, если что-то не так.
    – Dmytro
    2 окт 2019 в 21:28
  • Рабочий код будет вот здесь: stackblitz.com/edit/angular-ui-autoupdate Сегодня не хватило сил пофиксить все проблемы, что бы демка работала. Завтра уже наверняка добью. Как только будет готово - дам знать.
    – Dmytro
    3 окт 2019 в 20:29
-1

Для таких случаев, когда нужна непрекращающаяся проверка, использовать async pipe слишком дорого!

Попробуйте добавить нечто вроде Socket.io. Работа с сокетами очень проста, и даже, если вы в первый раз с ними работаете, вы быстро сможете научиться.

9
  • AsyncPipe осуществляет подписку на изменения. Почему это может быть дорого?
    – Adrug
    1 окт 2019 в 21:23
  • Вот именно, что осуществляет подписку. В случае, когда это конечный набор вызовов, можно обезопасить себя через take(N) / takeUntil(...). В этом же случае - нет. Однако, сокеты гарантированно будут работать быстро и непонадобится таких костылей.
    – Deni
    1 окт 2019 в 21:36
  • @DeniKuligin весь мир использует async pipe, а ты решил что это "слишком дорого"? что значит "сокеты будут работать быстро" - как ты это проверил? покажи бенчмарки? дружище, если не знаешь, лучше промолчать, чем сказать нонсенс...
    – arturovt
    2 окт 2019 в 6:44
  • Я .NET разработчик и в принципе я думал над тем, что бы использовать SignalR. Я понимаю теорию, но на практике не использовал. Сегодня вечером почитаю об этом. Сразу хочу уточнить два вопроса: 1) в случае с SignalR клиентом (или каким-то другим) - мы получим Observable объект или реальный? Для меня в общим это не очень то принципиально - я могу и на байндинг обычных объектов переделать, но хотелось бы понимать прежде чем действовать. 2) Я понимаю, что скорее всего здесь не .NET разработчики собрались, но вдрг... - нет ли ограничений на количество SignalR клиентов со стороны сервера?
    – Dmytro
    2 окт 2019 в 9:46
  • Signalr отправит ровно то что попросите. Нет ограничений по формату.
    – Adrug
    2 окт 2019 в 11:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.