Библиотеки
SSE-клиент

SseService

Сервис SseService предназначен для управления серверными событиями (Server-Sent Events, SSE) в приложении Angular. Он устанавливает соединение с сервером, получает события и обрабатывает их.

Методы

open

open(config: SseConfig): Observable<EventSourceMessage>;

Метод возвращает Observable для запуска соединения с сервером SSE. Принимает объект с параметрами настройки:

ПараметрТипОбязателенОписаниеЗначение по умолчанию
urlСтрокаДаURL-адрес для подключения к SSE (Server-Sent Events) сервису-
methodСтрокаНетHTTP-метод запроса (обычно используется "GET" для SSE)"GET"
headersОбъектНетОбъект с дополнительными заголовками HTTP для запросаЕсли есть токен авторизации, то: { 'Authorization': 'Bearer ${token}' }. Иначе: {}
bodyОбъектНетТело запроса, если требуется (обычно не используется с SSE)null

subscribe

subscribe(): Subscription;

Метод должен быть вызван на Observable, возвращаемом из метода open, для открытия соединения SSE.

unsubscribe

unsubscribe(): void;

Метод должен быть вызван на Subscription, возвращаемой из метода subscribe для закрытия соединения SSE. Также можно использовать аналогичные методы из rxjs, позволяющие отписаться от подписки (например: take, takeUntilDestroyed и т.д.)

log

private log(message: string, data?: any, type: 'info' | 'warn' | 'error' = 'info'): void;

Приватный метод для логирования сообщений. В зависимости от типа сообщения (info, warn, error), выводит его в консоль.

Использование

Пример использования сервиса в Angular компоненте:

Предоставьте провайдер для SseService в том месте, где вы хотите использовать сервис (в компоненте, модуле или конфигурации приложения):

import { SseService } from '@diasoft/qpalette-sse-client';
 
//...
 
{
    providers: [
        SseService
    ]
}

Затем используйте сервис в компоненте:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SseService, SseConnection } from '@diasoft/qpalette-sse-client';
 
@Component({
  selector: 'app-example',
  template: `<p>{{ message }}</p>`,
})
export class ExampleComponent implements OnInit, OnDestroy {
  public message: string;
  private connection: SseConnection;
 
  constructor(private sseService: SseService) {}
 
  ngOnInit(): void {
    this.connection = this.sseService
        .open({ url: 'http://localhost:4300/events' })
        .pipe(finalize(() => console.log('Connection closed')))
        .subscribe({
          next: (message: EventSourceMessage) => this.message = message.data,
          error: (err) => console.error('Error occurred', err)
        });
  }
 
  ngOnDestroy(): void {
    this.connection.unsubscribe();
  }
}

Примечания

  • Убедитесь, что сервер корректно настроен для отправки событий SSE.
  • Обязательно обрабатывайте ошибки и закрытие соединения для обеспечения стабильной работы приложения.

Этот пример документации описывает основные методы и использование сервиса SseService. Не забудьте адаптировать и расширить его в соответствии с вашими конкретными требованиями и особенностями реализации.