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, букет :)))) 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, а ты решил что это "слишком дорого"? что значит "сокеты будут работать быстро" - как ты это проверил? покажи бенчмарки? дружище, если не знаешь, лучше промолчать, чем сказать нонсенс... 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 that you have read and understand our privacy policy and code of conduct.

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