Post
Ask Question

Leveraging Server-Sent Events (SSE) with Angular and Node.js

Introduction

Server-Sent Events (SSE) is a powerful technology that enables servers to push real-time updates to web clients over HTTP. When combined with Angular on the client side and Node.js on the server side, SSE offers a seamless and efficient way to build dynamic, data-driven web applications. In this article, we'll explore how to implement SSE in an Angular application with a Node.js backend.

Understanding Server-Sent Events (SSE)

Server-Sent Events (SSE) is a standard mechanism for sending real-time updates from a server to a web client over HTTP. Unlike traditional HTTP requests, SSE establishes a persistent connection between the client and the server, allowing the server to send data to the client as events occur without the need for the client to repeatedly poll the server for updates.

Now, let's explore how to implement Server-Sent Events (SSE) using Angular + Node.js in a step-by-step manner.

Step 1. Setup Node.js Server

  • Install Node.js: If you haven't already. You can download it from the Node.js official website.
  • Create a new directory for your project and navigate into it using your terminal or command prompt.
  • Initialize a new Node.js project by running the following command: 
    npm init -y
  • Install Express.js: a web application framework for Node.js, by running: 
    npm install express
  • Create a new file named `server.js` in your project directory. This file will contain the code for your Node.js server. Project directory

Step 2. Write the server-side code for SSE

  • Imports 
    import express from "express";
import http from "http";
import cors from "cors";

    Here, we import the necessary modules: express for creating the server, http for creating an HTTP server instance, and cors for enabling Cross-Origin Resource Sharing.

  • Server Setup

    const app = express();
const server = http.createServer(app);
app.use(cors());

    `express()` creates an Express application instance.
    `http.createServer(app)` creates an HTTP server instance using the Express application.
    `app.use(cors())` enables CORS to allow cross-origin requests.

  • Route Definition

    app.get("/curr-count", (req, res) => {})
  • Setting Headers 
     res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    `'Content-Type': 'text/event-stream'` specifies that the response will be an event stream.
    `'Cache-Control'`: 'no-cache' disables caching.
    `'Connection'`: 'keep-alive' keeps the connection open for further events.

  • Data Streaming

     let value = 0;
    setInterval(() => {
        res.write(`data: ${JSON.stringify({count: value++})}\n\n`);
    },2000)

    `value` is initialized to 0.
    `setInterval()` is used to send events every 2 seconds.
    `res.write()` writes data to the response stream. The data is formatted as an SSE event with a JSON payload containing the current count incremented each time.

    Note. Make sure that the server is sending events in the correct format. Each SSE event should start with data followed by the payload and end with.

  • Server Start

    server.listen(3000, () => {
    console.log("server started at port 3000");
})
  • Final Output 
    import express from "express";
import http from "http";
import cors from "cors";

const app = express();
const server = http.createServer(app);
app.use(cors());

app.get("/curr-count", (req, res) => {

    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    let value = 0;

    setInterval(() => {
        res.write(`data: ${JSON.stringify({count: value++})}\n\n`);
    },2000)
})

server.listen(3000, () => {
    console.log("server started at port 3000");
})

Step 3. Setup Angular

  • Install Angular CLI: if you haven't already. You can install it globally using npm with the following command: 
    npm install -g @angular/cli
  • Create a new Angular project by running 
    ng new <your project name>
  • Navigate into your Angular project directory 
    cd <your project name>
  • Create a new Angular service: to handle SSE communication. You can create a service named `event.ts` using the code provided in the "Implementing SSE in Angular" section. 
     ng g s service/event

Step 4. Write code for Angular

         Inside the `events.ts` service file

  • Property for EventSource Instance 
    sse: EventSource
  • getEventData Method 
    getEventData(){
  return new Observable(obs=>{
    this.sse = new EventSource('http://localhost:3000/curr-count');

    this.sse.onerror = (error) => {
      console.log(error);
    }

    this.sse.onmessage = (message) => {
      obs.next(JSON.parse(message.data).count);
    }
  })
}

    1. This method `getEventData()`returns an observable that will emit data received from the server.
    2. Inside the observable constructor, we establish a connection to the server using EventSource. The URL 'http://localhost:3000/curr-count' is where the server is expected to send Server-Sent Events.
    3. We handle errors that may occur during the connection using the `onerror` event listener.
    4. When a message is received from the server (onmessage event), we parse the message data (assuming it's JSON) and extract the count value. Then, we emit this count value  obs.next() to notify subscribers of the observable.

  •  Final Output  
    import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventService {

  sse: EventSource

  getEventData(){
    return new Observable(obs=>{
      this.sse = new EventSource('http://localhost:3000/curr-count');

      this.sse.onerror = (error) => {
        console.log(error);
      }
  
      this.sse.onmessage = (message) => {
            obs.next(JSON.parse(message.data).count);
      }
    })
  }
}

     

Step 5. Main component

  • Import Dependency Injection 
    sse = inject(EventService);
cdf = inject(ChangeDetectorRef);
  • Create Property 
    value = 0;
  • Start Event Method 
    start_event() {
  this.sse.getEventData().subscribe({
    next: (data: any) => {
      this.value = data;
      this.cdf.detectChanges();
    }
  });
}

    1. This method start_event() is called to start receiving Server-Sent Events.
    2. Inside the method, we call `getEventData()` from `EventService` to establish a connection to the server and subscribe to SSE events.
    3. When a new event is received (next), we update the value property with the received data and manually trigger change detection using this.cdf.detectChanges() to ensure. Angular updates the view with the new value.

  • Final Output

    import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { EventService } from './service/event.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent{

  sse = inject(EventService);
  cdf = inject(ChangeDetectorRef)
  value = 0;

  start_event() {
    this.sse.getEventData().subscribe({
      next: (data: any) => {
        console.log(data)
        this.value = data;
        this.cdf.detectChanges();
      }
    });

  }
  
}

Step 6. Display the value in HTML

<h1>counting From Server-sent events {{value}}</h1>

<button (click)="start_event()">start</button>

Click the 'Start Event' button to increase the value using SSE.

Step 7. Final Browser Output- Visualizing the Result

Final Browser Output: Visualizing the Result

Conclusion

In this article, we've implemented a real-time counter using Server-Sent Events (SSE) in a Node.js server. SSE provides a simple and efficient way to push real-time updates from the server to the client without the need for continuous polling. This example can serve as a foundation for building more sophisticated real-time features in your web applications.


Similar Articles