Harnessing Real-Time Data with Server-Sent Events (SSE) in Angular

In today's world of modern web applications, real-time data is no longer just a "nice-to-have" feature – it's often a necessity. Whether it’s live sports scores, stock market updates, or the latest social media notifications, keeping your users updated in real-time can make a huge difference. One of the best ways to achieve this is by using Server-Sent Events (SSE).

If you're working with Angular and want to add real-time data streaming to your app, SSE is a simple, yet powerful solution. Let’s dive into how you can leverage SSE in Angular to bring real-time updates to your users.

What Are Server-Sent Events (SSE)?

Server-Sent Events (SSE) is a web standard that allows a server to push real-time updates to the client via HTTP. Unlike traditional polling or WebSockets, SSE only allows data to flow from the server to the client. The beauty of SSE lies in its simplicity: it works over the standard HTTP protocol, which is already supported by most web servers.

Here are some of the key advantages of using SSE:

• Automatic Reconnection: If the connection drops, the browser automatically reconnects.
• Low Overhead: Because SSE uses HTTP, it’s more firewall-friendly and requires less overhead than WebSockets.
• Scalability: Since it runs on HTTP, it scales well with existing infrastructure that already supports HTTP traffic.

Setting Up SSE in Angular

Before we get into the Angular side of things, let’s quickly set up a simple server that streams data. We’ll use Node.js with Express for this example.

1. Server-Side Setup

Here’s a basic server in Node.js that streams events to the client every second:

const express = require('express');
const app = express();
app.get('/events', (req, res) => {
 res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
let count = 0;
const interval = setInterval(() => {
res.write(`data: ${JSON.stringify({ message: 'New data', count })}\n\n`);
count++;
}, 1000);
  req.on('close', () => {
  clearInterval(interval);
   res.end();
 });
});
app.listen(3000, () => {
  console.log('Server running on https://localhost:3000');
});        

This server sends a new message every second to any client that connects to the /events endpoint.

2. Angular Client-Side Setup

Now, let’s jump into the Angular side of things. In Angular, we can use the native EventSource API to listen to the stream of events coming from the server.

First, let’s create a service to handle the SSE communication.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class RealTimeDataService {
  private eventSource: EventSource;
  private dataSubject: Subject<any> = new Subject<any>();
  constructor() {}
  public connectToSSE() {
    this.eventSource = new EventSource('https://localhost:3000/events');
    this.eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.dataSubject.next(data);
    };
    this.eventSource.onerror = (error) => {
   console.error('EventSource failed:', error);
  this.eventSource.close();
    };
  }

  public getData() {
    return this.dataSubject.asObservable();
  }
}
        

In this service:

• We set up an EventSource connection to the server's /events endpoint.
• Each time a new message is received, we emit it through a Subject.
• The getData method exposes an observable, which components can subscribe to in order to get real-time updates.

3. Using SSE in an Angular Component

Now, let’s create a simple component that listens for the real-time updates.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { RealTimeDataService } from './real-time-data.service';

@Component({
  selector: 'app-realtime-data',
  template: `
    <div *ngIf="data">
      <h3>Real-Time Updates</h3>
      <p>{{ data.message }}</p>
      <p>Count: {{ data.count }}</p>
    </div>
  `,
  styles: [],
})
export class RealTimeDataComponent implements OnInit, OnDestroy {
  data: any;
  constructor(private realTimeDataService: RealTimeDataService) {}
  ngOnInit(): void {
    this.realTimeDataService.connectToSSE();
    this.realTimeDataService.getData().subscribe((newData) => {
      this.data = newData;
    });
  }

  ngOnDestroy(): void {
    if (this.realTimeDataService) {
      this.realTimeDataService.eventSource.close();
    }
  }
}
        

In this component:

• We subscribe to the real-time data observable.
• As new data arrives, it’s displayed in the template.
• We also make sure to clean up the connection when the component is destroyed by closing the EventSource connection.

Conclusion

By using Server-Sent Events with Angular, you can easily implement real-time data updates in your application without the complexity of WebSockets. SSE provides a simple and scalable way to keep users informed with the latest data, making it perfect for use cases like live notifications, live feeds, and any application where fresh data is essential.

If you're looking to add real-time features to your Angular app, SSE is a fantastic option worth exploring!

RAMADAN MUBARAK