Я буду очень благодарен, если кто-нибудь поможет мне с моей задачей. На данный момент имею приложение на 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).
Всем заранее большое спасибо за любую помощь.
sockjs | stompjs
, используйтеsocket.io-client
+socket.io
, он очень просто в установке и использовании для новичков