SSE در Angular

سلام
در این مقاله قصد دارم درباره SSE در انگولار صحبت کنم ، اما قبل از همه می خوام درباره منطق SSE بگم، پس امیدوارم تا آخر مقاله همراه من باشید.

رویداد های طرف سرویس دهنده که به Server Side Events ترجمه و با SSE هم مخفف میشه کارش اینه که توابعی که در قسمت سرویس دهنده اجرا میشه نتیجش به صورت همزمان یا اصطلاحاً Real time برای سرویس گیرنده (Client) بر گردونه! یعنی به صورت کلی بدون نیاز به ارسال درخواست HTTP چه به صورت Ajax و یا معمولی ، اطلاعات رو از سرویس دهنده (Server) دریافت میکنه ، در SSE مسیر یک طرفه از سرویس دهنده به کاربر هست و نیازی به ایجاد سرور نیست ! این جمله دقیقا تفاوت SSE با وب سوکت می رسونه یعنی ایجاد سرور و ارتباط دو طرفه بودن که در وب سوکت هست کمی زمان بر هستش و بعضی وقتا ما فقط نیاز این رو داریم که اطلاعات فقط از طرف سرویس دهنده به کاربر به صورت Real Time نشون بدیم، مثل نمایش لحظه ای قیمت سکه و ارز یا نمایش نتیجه لحظه ای یه بازی فوتبال و ...

حالا با این تفاسیر ما متوجه شدیم SSE چیه! از اینجا به بعد بریم به صورت مرحله ای اونو توی انگولار پیاده کنیم :))

مرحله اول ساخت سرویس
اول از همه یه سرویس درست می کنیم و این کد ها توی سرویس خودمون میاریم.

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class SseService {
  private eventSource: EventSource;
  constructor() { }
  connect(): void {
    this.eventSource = new EventSource('http://example.com/sse');
    this.eventSource.addEventListener('message', (event: MessageEvent) => {
      console.log('Received SSE event:', event.data); //اینجا داده ها مدیریت میشن
    });
    this.eventSource.addEventListener('error', (event: Event) => {
      if (event.eventPhase === EventSource.CLOSED) {
        console.log('SSE connection closed'); // در صورت اتمام و بسته شدن از اینجا اعلام میشه
      } else {
        console.log('SSE connection error'); // وقتی خطایی رخ بده
      }
    });
  }

  disconnect(): void {
    this.eventSource.close();
  }
}

مرحله دوم
در این مرحله کافی سرویس خودتون توی Component مورد نظرتون که می خواین از SSE دریافت اطلاعات کنید صدا بزنید.

import { Component, OnInit } from '@angular/core';
import { SseService } from '../sse.service';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})

export class MyComponent implements OnInit {
  constructor(private sseService: SseService) { }
  ngOnInit(): void {
    this.sseService.connect();
  }
  ngOnDestroy(): void {
    this.sseService.disconnect();
  }
}

به همین سادگی :))

در اینجا به انتهای این پست آموزشی رسیدیم امیدوارم که از این پست نهایت استفاده ببرید.
ممنون از توجه شما

:))