Notifiche semplici in NestJS utilizzando eventi lato server per operazioni in blocco

Recapito semplificato delle notifiche per le operazioni di inserimento in blocco

Immagina di gestire un sistema in cui a centinaia di dipendenti vengono assegnati voucher in base a vari criteri come dipartimento, grado o esperienza. È un compito colossale informare ogni dipendente in modo efficiente senza causare colli di bottiglia nel sistema. 🔔 Questa sfida diventa ancora più ardua quando si mira a evitare le complessità dei socket o dei meccanismi di polling.

In tali scenari, gli eventi lato server (SSE) emergono come una soluzione potente ma semplice. Sfruttando SSE nella tua applicazione NestJS, puoi stabilire un canale di comunicazione in tempo reale per informare gruppi specifici di dipendenti in base a criteri dinamici. Ad esempio, quando i voucher vengono assegnati al reparto Vendite, solo i dipendenti dovrebbero ricevere notifiche, garantendo aggiornamenti precisi e significativi.

Attraverso questo articolo, approfondiremo un esempio pratico che dimostra come integrare SSE in un processo di inserimento in blocco utilizzando NestJS. Esamineremo l'intero ciclo di vita, dall'attivazione di eventi nel backend all'ascolto di aggiornamenti sul frontend, il tutto mantenendo prestazioni ininterrotte. 💼

Che tu stia sviluppando uno strumento per le risorse umane o un'app finanziaria, comprendere questo flusso di lavoro ti consentirà di inviare notifiche personalizzate in tempo reale. Sveliamo la semplicità di SSE e come può migliorare l'esperienza utente della tua applicazione.

Notifiche efficienti con eventi e code lato server

Gli script forniti illustrano un sistema in cui vengono inviate notifiche in tempo reale ai dipendenti dopo l'inserimento in massa dei record dei voucher nel database. Il processo inizia nel AllocateVoucherController, che espone un endpoint per la creazione di attività di allocazione voucher. Quando viene creata un'attività, emette un evento denominato voucher dopo l'assegnazione. Questo evento è essenziale per attivare i passaggi successivi, garantendo che il sistema sia basato sugli eventi e modulare. Questo design consente una chiara separazione delle preoccupazioni, rendendo il sistema più gestibile e scalabile. 🎯

Nel livello di servizio, il AllocareVoucherService gestisce la logica per l'accodamento delle attività utilizzando BullMQ. Dopo aver ricevuto il voucher dopo l'assegnazione evento, aggiunge un lavoro alla coda denominata buono-assegnazione. Questa coda consente l'elaborazione asincrona, garantendo che il sistema rimanga reattivo anche durante l'elaborazione di set di dati di grandi dimensioni. Ad esempio, se assegni voucher a 200 dipendenti del reparto Vendite, la coda garantisce che l'operazione non blocchi altre richieste. La configurazione della coda include opzioni come rimuovi al completamento per mantenere Redis pulito dopo il completamento del lavoro.

I lavori in coda vengono elaborati da AllotVoucherConsumer classe. Qui viene implementata la logica per identificare i dipendenti interessati e inserire i record dei voucher nel database. Il comando Prisma createMany viene utilizzato per inserire record in batch nel file Voucher per dipendenti tabella, ottimizzata per le prestazioni. Una volta completata l'operazione del database, viene emesso un altro evento per avvisare i sottoscrittori. Questo evento garantisce che i dipendenti ricevano una notifica solo dopo che l'inserimento in blocco è stato elaborato con successo, aggiungendo affidabilità al sistema di notifica. 🌟

Sul frontend, il componente React ascolta gli eventi inviati dal server tramite un file EventSource. Quando i dipendenti ricevono la notifica, i loro dettagli vengono aggiornati dinamicamente nell'interfaccia utente senza richiedere l'aggiornamento della pagina. Questo approccio fornisce un'esperienza utente fluida, simile agli aggiornamenti in tempo reale visti nelle moderne applicazioni web come risultati sportivi in ​​diretta o notifiche sui social media. Ad esempio, i dipendenti del reparto Risorse umane non vedranno gli aggiornamenti destinati alle vendite, poiché il backend filtra con precisione gli eventi in base ai criteri di allocazione. Questa specificità migliora sia le prestazioni che la pertinenza, creando un sistema incentrato sull'utente. 🖥️

// 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 })),
    );
  }
}

// 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;

// 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);
  });
});

Miglioramento dei sistemi in tempo reale con SSE in NestJS

Sebbene abbiamo esplorato l'implementazione di Server-Side Events (SSE) per notificare ai dipendenti l'allocazione dei voucher, esiste un caso d'uso più ampio per SSE nei sistemi in tempo reale. SSE eccelle negli scenari in cui i client devono rimanere aggiornati con i dati del server senza eseguire costantemente il polling. Ad esempio, pensa a una piattaforma di vendita al dettaglio online che monitora gli aggiornamenti dell'inventario in tempo reale durante una vendita flash. Utilizzando SSE, puoi inviare in modo efficiente gli aggiornamenti a tutti i client connessi, assicurando che visualizzino gli ultimi livelli di scorte senza carico inutile del server. Questo approccio garantisce la scalabilità mantenendo l'esperienza dell'utente senza soluzione di continuità. 🛒

Incorporando sistemi di accodamento avanzati come BullMQ, come abbiamo fatto con il buono-assegnazione coda, aggiunge robustezza alle attività di elaborazione di dati di massa. La coda garantisce che, anche in caso di riavvio del server, le attività in sospeso rimangano intatte e l'elaborazione riprenda. Inoltre, è possibile configurare meccanismi di ripetizione, garantendo che i processi non riusciti (ad esempio, a causa di tempi di inattività temporanei del database) vengano ritentati automaticamente. Ad esempio, se un'assegnazione a 300 dipendenti tra i reparti rileva un errore temporaneo, la resilienza della coda garantisce che nessun record venga lasciato non elaborato, aggiungendo affidabilità al sistema.

Oltre alle notifiche in tempo reale, SSE può anche integrare i servizi di posta elettronica per attività che richiedono riepiloghi dettagliati. Dopo che tutte le notifiche dei voucher sono state inviate tramite SSE, il backend può generare in modo asincrono un report e inviare un'e-mail consolidata ai manager. Questa comunicazione multicanale garantisce sia notifiche immediate che follow-up completi, soddisfacendo un'ampia gamma di preferenze degli utenti. Tale integrazione migliora la flessibilità del sistema, creando un'esperienza utente a tutto tondo. 📧