realtime.service.ts

import { Injectable } from '@angular/core';
import * as signalR from '@aspnet/signalr';
import { PictureDto } from '@store/pictures/pictures.models';

@Injectable({
    providedIn: 'root',
})
export class RealtimeService {
    private connection: signalR.HubConnection;
    constructor() {}

    connectSignalR() {
        if (
            !this.connection ||
            this.connection.state === signalR.HubConnectionState.Disconnected
        ) {
            this.connection = new signalR.HubConnectionBuilder()
                .configureLogging(signalR.LogLevel.Information)
                .withUrl(`http://localhost:7071/api`)
                .build();

            this.connection.on('newPicture', (dto: PictureDto) => {
                console.log('New picture arrived');
            });

            this.connection
                .start()
                .then(function() {})
                .catch(function(err) {
                    return console.error(err.toString());
                });
        }
    }
    disconnectSignalR() {
        if (
            this.connection &&
            this.connection.state === signalR.HubConnectionState.Connected
        ) {
            this.connection.stop();
        }
    }
}