0

Я буду очень благодарен, если кто-нибудь поможет мне с моей задачей. На данный момент имею приложение на Angular CLI (6.2.0), которое принимает сообщения по веб-сокету. Тело сообщения мне необходимо парсить и результат выводить в компоненте (суть приложения - монитор состояний). Основной элемент компонента - Material Table, соответственно, данные мне нужно передать в MaterialDataSource в компоненте. Вопрос состоит в том, как мне правильно это сделать, к сожалению моего опыта и знаний недостаточно.

web-socket.service.ts

import {Injectable} from '@angular/core';
import {AppConfig} from '../../config/app.config';
import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';
import {LoggerService} from '../../core/shared/logger.service';
import {Device} from '../../modules/devices/shared/device.model';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  private readonly socketUrl: string;
  private stompClient;

  private devices: Device[] = [];

  constructor() {
    this.socketUrl = AppConfig.socketUrl;
  }

  connect() {
    const ws = new SockJS(this.socketUrl);
    this.stompClient = Stomp.over(ws);
    const that = this;
    this.stompClient.connect({}, function (frame) {
      LoggerService.log('Socket: ' + frame);
      that.subscribeOnDevices(that);
      that.subscribeOnErrors(that);
    });
  }

  private subscribeOnDevices(that: WebSocketService) {
    that.stompClient.subscribe('/asterisk/device', function (msgDevices) {
      if (msgDevices.body) {
        that.devices = JSON.parse(msgDevices.body);
        LoggerService.log('Get Devices message');
      } else {
        LoggerService.log('No body from Devices message');
      }
    });
    LoggerService.log('Subscribed on devices');
  }

  private subscribeOnErrors(that: WebSocketService) {
    that.stompClient.subscribe('/errors', function (msgError) {
      LoggerService.error(msgError);
    });
    LoggerService.log('Subscribed on errors');
  }

  disconnect() {
    if (this.stompClient != null) {
      this.stompClient.disconnect();
      LoggerService.log('Disconnected by socket.');
    }
  }

}

device-list.component.ts

import {Component, OnInit} from '@angular/core';
import {Device} from '../../shared/device.model';
import {DeviceService} from '../../shared/device.service';
import {MatTableDataSource} from '@angular/material';
import {Title} from '@angular/platform-browser';

@Component({
  selector: 'app-device',
  templateUrl: './device-list.component.html',
  styleUrls: ['./device-list.component.scss']
})

export class DeviceListComponent implements OnInit {
  private dataSource = new MatTableDataSource<Device>();
  displayedColumns: ReadonlyArray<string> = [
    'id',
    'device',
    'state',
    'lastUpdate'
  ];

  constructor(private title: Title,
              private deviceService: DeviceService) {
  }

  ngOnInit() {
    this.title.setTitle('Device list');
    this.getAllDevices();
  }

  getAllDevices() {
    this.deviceService.getAllDevices().then((devices: Device[]) => {
      this.dataSource.data = devices;
    });
  }

}

Сообщения генерирует бэкенд, написан на Spring Boot. Тело сообщения вполне корректно парсится в массив объектов Device[].

Изначально хотел реализовать это каким-нибудь статическим методом в компоненте, но в итоге не получилось (просто сделал dataSource статическим, а так же добавил статический метод, принимающий данные и присваивающий их для dataSource.data).

Всем заранее большое спасибо за любую помощь.

4
  • делайте пока что как умеете, пытайтесь реализовать "лишь бы работало", чуть позже все придет с опытом, к тому же не нужно использовать сложные модули типа sockjs | stompjs, используйте socket.io-client + socket.io, он очень просто в установке и использовании для новичков 5 сен 2018 в 12:10
  • Хотелось бы сразу приучиваться, следуя Best Practice, но я с Вами безусловно согласен) Изначально тоже думал про socket.io, но как-то не нашел годных туториалов (если быть точным - плохо искал). Просто отталкивался от реализации бэкенда, а там довольно легко было настроить stomp и sockjs. Да и в целом, сам обмен сообщениями идет, но как правильнее передать новые данные...
    – titaniche
    5 сен 2018 в 12:12
  • что у вас именно не получается? 5 сен 2018 в 12:45
  • Добавил ответ. Если правок не будет, то приму его тогда)
    – titaniche
    6 сен 2018 в 9:11

1 ответ 1

0

Получилось сделать следующим образом:

  1. Добавил поле компонента в сервис, а так же метод-сеттер для него.

    private deviceListComponent: DeviceListComponent;

    setDeviceListComponent(value: DeviceListComponent) { this.deviceListComponent = value; }

  2. В компоненте с помощью сеттера сервиса передаю в сам сервис компонент.

    constructor(private title: Title, private deviceService: DeviceService, private webSocketService: WebSocketService) { }

    ngOnInit() { this.title.setTitle('Device list'); this.getAllDevices(); this.webSocketService.setDeviceListComponent(this); }

  3. Добавляю в компонент метод, обновляющий dataSource.data, который вызываю в сервисе.

    updateDevices(devices: Device[]) { this.dataSource.data = devices; }

    private subscribeOnDevices(that: WebSocketService) { that.stompClient.subscribe('/asterisk/device', function (msgDevices) { if (msgDevices.body) { that.devices = JSON.parse(msgDevices.body); if (that.deviceListComponent != null) { that.deviceListComponent.updateDevices(that.devices); } LoggerService.log('Get Devices message'); } else { LoggerService.log('No body from Devices message'); } }); LoggerService.log('Subscribed on devices'); }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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