SSE Core for Angular

SSE Core is an Angular service designed to simplify working with Server-Sent Events (SSE) in Angular applications. This package provides an easy-to-use interface for managing SSE connections and handling real-time data streaming.

Installation

To install the package, use:

npm install sse-core

Usage

Import the SSE Service

In your Angular service or component, import SSEService and inject it:

import { Injectable } from '@angular/core';
import { SSEService } from 'sse-core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChatBotService {
  private messageSubject = new BehaviorSubject<any>(null);
  messages$ = this.messageSubject.asObservable();

  constructor(private sseService: SSEService) {}

  startSSEConnection(url: string) {
    this.sseService.connect(url).subscribe({
      next: event => {

        //this is example code from response api, and generate to json
        const keys = ['conversation_id', 'message_id', 'task_id', 'submit_date', 'answer', 'feedback', 'request_id', 'status'];

        const regex = new RegExp(`\\b(${keys.join('|')}):`, 'g');

        const jsonString = '{' + event.data
          .replace(regex, '"$1":')  
          .replace(/"\s+/g, '", ')
          + '}';
        //this is example code from response api, and generate to json

        const data = JSON.parse(jsonString);
        this.messageSubject.next(data);
      },
      error: error => {
        console.error('SSE Error:', error);
      }
    });
  }

  stopSSE() {
    this.sseService.disconnect();
  }
}

Using in a Component

import { Component, OnInit } from '@angular/core';
import { ChatBotService } from './chatbot.service';

@Component({
  selector: 'app-chatbot',
  templateUrl: './chatbot.component.html'
})
export class ChatbotComponent implements OnInit {
  messages: any[] = [];

  constructor(private chatbotService: ChatBotService) {}

  ngOnInit() {
    this.chatbotService.messages$.subscribe(message => {
      if (message) {
        this.messages.push(message);
      }
    });
  }

  startChat() {
    this.chatbotService.startSSEConnection('https://your-api.com/sse');
  }

  stopChat() {
    this.chatbotService.stopSSE();
  }
}

Template Example

<button (click)="startChat()">Start Chat</button>
<button (click)="stopChat()">Stop Chat</button>
<ul>
  <li *ngFor="let message of messages">{{ message.answer }}</li>
</ul>

API

connect(url: string): Observable<MessageEvent>

Establishes an SSE connection and returns an observable to subscribe to events.

disconnect(): void

Closes the SSE connection.

License

MIT