Effortless Notifications in NestJS Using Server-Side Events for Bulk Operations

Sending Notifications in Bulk with Server-Side Events (SSE) in NestJS

This solution demonstrates a backend approach to using NestJS with Prisma and Server-Side Events (SSE) for bulk operations. It includes an event-driven architecture and queuing system.

// Backend: AllocateVoucherController
import { Controller, Post, Body, Sse, OnEvent } from '@nestjs/common';
import { AllocateVoucherService } from './allocate-voucher.service';
import { EventEmitter2 } from '@nestjs/event-emitter';
import { Observable } from 'rxjs';
import { map, fromEvent } from 'rxjs';
@Controller('allocate-voucher')
export class AllocateVoucherController {
  constructor(
    private readonly allocateVoucherService: AllocateVoucherService,
    private readonly eventEmitter: EventEmitter2
  ) {}
  @Post()
  async create(@Body() createDto: any) {
    const result = await this.allocateVoucherService.create(createDto);
    return result;
  }
  @Sse('vouchered-employee')
  updatedEmployeeEvent(): Observable<MessageEvent> {
    return fromEvent(this.eventEmitter, 'after-added-voucher').pipe(
      map((data) => new MessageEvent('after-added-voucher', { data })),
    );
  }
}

Real-Time Updates for Bulk Inserts Using NestJS and React

This frontend example uses React to listen to Server-Side Events and update the UI dynamically as data is received. It ensures employees get notified in real-time after bulk insertions.

// Frontend: React Component for SSE
import React, { useEffect, useState } from 'react';
const EmployeeUpdates = () => {
  const [employees, setEmployees] = useState([]);
  useEffect(() => {
    const eventSource = new EventSource('http://localhost:3000/allocate-voucher/vouchered-employee');
    eventSource.onmessage = (event) => {
      const newEmployee = JSON.parse(event.data);
      setEmployees((prev) => [...prev, newEmployee]);
    };
    return () => eventSource.close();
  }, []);
  return (
    <table>
      <thead>
        <tr><th>Name</th><th>Voucher</th></tr>
      </thead>
      <tbody>
        {employees.map((emp) => (
          <tr key={emp.id}><td>{emp.name}</td><td>{emp.voucher}</td></tr>
        ))}
      </tbody>
    </table>
  );
};
export default EmployeeUpdates;

Unit Testing Notifications for Bulk Insert Operations

This Jest test ensures the event emission and notification mechanism works correctly in the backend for Server-Side Events in NestJS.

// Jest Test: AllocateVoucherService
import { Test, TestingModule } from '@nestjs/testing';
import { AllocateVoucherService } from './allocate-voucher.service';
import { EventEmitter2 } from '@nestjs/event-emitter';
describe('AllocateVoucherService', () => {
  let service: AllocateVoucherService;
  let eventEmitter: EventEmitter2;
  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [AllocateVoucherService, EventEmitter2],
    }).compile();
    service = module.get(AllocateVoucherService);
    eventEmitter = module.get(EventEmitter2);
  });
  it('should emit after-allocate-voucher event', async () => {
    jest.spyOn(eventEmitter, 'emit');
    const result = await service.create({ someData: 'test' });
    expect(eventEmitter.emit).toHaveBeenCalledWith('after-allocate-voucher', result);
  });
});

Frequently Asked Questions About SSE in NestJS

1. What are the benefits of using Server-Side Events over WebSockets?
2. SSE is simpler to implement and uses HTTP, making it firewall-friendly. Unlike WebSockets, it requires only a single unidirectional connection, which is efficient for real-time updates.
3. Can I use @Sse with multiple endpoints in a controller?
4. Yes, you can define multiple @Sse endpoints in the same controller to serve different data streams to clients based on specific needs.
5. How do I handle errors during queue processing?
6. With BullMQ, you can define retry options and use event listeners like @OnWorkerEvent('failed') to log errors and reprocess jobs if necessary.
7. Does Prisma's createMany method support transaction rollbacks?
8. Yes, Prisma's createMany can be wrapped in a transaction. If any operation in the transaction fails, all operations are rolled back for consistency.
9. What happens if the client disconnects during an SSE stream?
10. The server stops sending updates once it detects the disconnection. You can implement reconnect logic on the client using the EventSource API.
11. Can SSE be used for two-way communication?
12. No, SSE is unidirectional (server-to-client). For bidirectional communication, use WebSockets or HTTP2 streams.
13. How do I secure SSE endpoints in NestJS?
14. Use guards or middlewares, like @UseGuards, to enforce authentication and authorization for your SSE endpoints.
15. Can SSE work with non-browser clients?
16. Yes, any client that supports HTTP and event streaming (e.g., Node.js, cURL) can consume SSE streams.
17. What is the maximum number of clients that can connect to an SSE endpoint?
18. This depends on your server's configuration and resource limits. Load balancing and clustering can help scale to support more clients.
19. Is it possible to send JSON data over SSE?
20. Yes, you can serialize objects to JSON strings and send them using new MessageEvent in NestJS.

Effective Real-Time Notifications in NestJS

Implementing real-time systems using SSE in NestJS simplifies communication between the server and clients. This method reduces server load compared to constant polling and enables precise targeting for notifications. For example, an HR tool can notify 200 employees in Sales about new vouchers without disrupting others. 🎯

With tools like BullMQ and Prisma, this setup ensures asynchronous task processing and efficient database operations. The flexibility of event-based architecture makes it a scalable solution for various real-time requirements, enhancing user engagement and system reliability.