Angular 5 - обнаружение изменений при использовании веб-сокетов - PullRequest
Новая
       38

Angular 5 - обнаружение изменений при использовании веб-сокетов

0 голосов
/ 01 мая 2018

У меня проблема с работой веб-сокетов и отображением изменений в режиме реального времени. У меня есть массив заказов . Этот массив поступает от внутреннего сервера NodeJS от вызова ngOnInit() метода my orderService.getOrders(), который извлекает заказы из внутреннего интерфейса с помощью вызова REST. После этого заказы оформляются в шаблон с правильной информацией.

Я также использую веб-сокеты для обработки событий двух типов: placeOrder (когда новый заказ отправляется на резервную копию через POST) и updateOrder (при изменении существующего заказа).

Вот соответствующая часть этого кода: 

  webSocket.onmessage = function (event) {
      const message = JSON.parse(event.data);
      if (message === 'PlaceOrderEvent') {
        self.handlePlaceOrderEvent(message);
      } else if (message === 'UpdateOrderStatusEvent') {
        self.handleUpdateOrderEvent(message);
      }
    };

Это работает правильно, и я могу видеть измененные данные внутри этих двух методов, если я console.log(), но проблема в том, что изменения не отражаются в шаблоне только после обновления страницы.

Я уже пытался использовать ChangeDetectorRef и вызывать detectChanges() и конец handle() методов, но безуспешно.

Как этого добиться и отобразить новый заказ в реальном времени в моем шаблоне или отобразить изменения в существующем без обновления страницы?

РЕДАКТИРОВАТЬ: более соответствующие части кода 

export class HomeComponent implements OnInit, OnDestroy {
  orders: Order[];

  constructor(private orderService: OrderService) { }

  ngOnInit() {
    this.getOrders();
    this.openWebSocket();
  }

    self.orderService.getOrders().subscribe(
      data => {
        if (data.error) {
          console.error(data.error);
        } else {
          if (Array.isArray(data)) {
            self.orders = data.map(function (o) {
            ...
            //parsing the data from the backend
    }

    openWebSocket() {
    ...
    //onmessage
      webSocket.onmessage = function (event) {
          const message = JSON.parse(event.data);
          if (message === 'PlaceOrderEvent') {
            self.handlePlaceOrderEvent(message);
          } else if (message === 'UpdateOrderStatusEvent') {
            self.handleUpdateOrderEvent(message);
          }
        };
    }

    handlePlaceOrderEvent(order) {
    const self = this;
    self.orders.unshift({
      ...
      //parsing the new order coming from websocket message
      status: self.statuses[0],
      placed: Date.now()
    });
   //<===== here I tried putting changeDetectorRef.detectChanges()
  }
...