Notifications sans effort dans NestJS utilisant des événements côté serveur pour les opérations en masse

Envoi rationalisé des notifications pour les opérations d'insertion en masse

Imaginez que vous gérez un système dans lequel des centaines d'employés se voient attribuer des bons en fonction de divers critères tels que le département, le grade ou l'expérience. C’est une tâche colossale que d’informer efficacement chaque employé sans provoquer de goulots d’étranglement dans le système. 🔔 Ce défi devient encore plus intimidant lorsque vous souhaitez éviter les complexités des sockets ou des mécanismes d'interrogation.

Dans de tels scénarios, les événements côté serveur (SSE) apparaissent comme une solution puissante mais simple. En tirant parti de SSE dans votre application NestJS, vous pouvez établir un canal de communication en temps réel pour informer des groupes spécifiques d'employés en fonction de critères dynamiques. Par exemple, lorsque des bons sont attribués au service commercial, seuls ces employés doivent recevoir des notifications, garantissant ainsi des mises à jour précises et significatives.

À travers cet article, nous allons plonger dans un exemple pratique qui montre comment intégrer SSE dans un processus d'insertion groupée à l'aide de NestJS. Nous parcourrons le cycle de vie, du déclenchement d'événements dans le backend à l'écoute des mises à jour sur le frontend, tout en maintenant des performances transparentes. 💼

Que vous développiez un outil RH ou une application financière, comprendre ce flux de travail vous permettra d'envoyer des notifications personnalisées en temps réel. Découvrons la simplicité de SSE et comment il peut améliorer l'expérience utilisateur de votre application.

Notifications efficaces avec les événements et les files d'attente côté serveur

Les scripts fournis illustrent un système dans lequel des notifications en temps réel sont envoyées aux employés après l'insertion massive d'enregistrements de pièces justificatives dans la base de données. Le processus commence dans le AllocateVoucherController, qui expose un point de terminaison pour créer des tâches d'allocation de bons. Lorsqu'une tâche est créée, elle émet un événement nommé bon après allocation. Cet événement est essentiel pour déclencher les étapes suivantes, garantissant que le système est événementiel et modulaire. Cette conception permet une séparation claire des préoccupations, rendant le système plus maintenable et évolutif. 🎯

Dans la couche service, le AllouerVoucherService gère la logique de mise en file d'attente des tâches à l'aide de BullMQ. Après avoir reçu le bon après allocation événement, il ajoute un travail à la file d'attente nommé bon d'attribution. Cette file d'attente permet un traitement asynchrone, garantissant que le système reste réactif même lors du traitement de grands ensembles de données. Par exemple, si vous attribuez des bons à 200 collaborateurs du service Commercial, la file d'attente garantit que l'opération ne bloque pas d'autres demandes. La configuration de la file d'attente comprend des options telles que supprimerOnComplete pour garder Redis propre une fois le travail terminé.

Les travaux en file d'attente sont traités par le AllotVoucherConsommateur classe. Ici, la logique d'identification des employés concernés et d'insertion des enregistrements de pièces justificatives dans la base de données est mise en œuvre. La commande Prisma créerBeaucoup est utilisé pour insérer par lots des enregistrements dans le Chèque employé table, optimisée pour les performances. Une fois l'opération de base de données terminée, un autre événement est émis pour avertir les abonnés. Cet événement garantit que les employés ne sont informés qu'une fois que l'insertion groupée a été traitée avec succès, ajoutant ainsi de la fiabilité au système de notification. 🌟

Sur le frontend, le composant React écoute les événements envoyés par le serveur via un Source d'événement. Au fur et à mesure que les employés sont informés, leurs coordonnées sont mises à jour dynamiquement dans l'interface utilisateur sans nécessiter d'actualisation de la page. Cette approche offre une expérience utilisateur transparente, semblable aux mises à jour en temps réel vues dans les applications Web modernes telles que les résultats sportifs en direct ou les notifications sur les réseaux sociaux. Par exemple, les employés du service RH ne verront pas les mises à jour destinées aux ventes, car le backend filtre précisément les événements en fonction de critères d'attribution. Cette spécificité améliore à la fois les performances et la pertinence, créant un système axé sur l'utilisateur. 🖥️

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

Améliorer les systèmes en temps réel avec SSE dans NestJS

Bien que nous ayons exploré la mise en œuvre d'événements côté serveur (SSE) pour informer les employés de l'attribution de bons, il existe un cas d'utilisation plus large du SSE dans les systèmes en temps réel. SSE brille dans les scénarios où les clients doivent rester informés des données du serveur sans interrogation constante. Par exemple, pensez à une plateforme de vente au détail en ligne qui suit les mises à jour des stocks en direct lors d'une vente flash. Grâce à SSE, vous pouvez envoyer efficacement des mises à jour à tous les clients connectés, en vous assurant qu'ils visualisent les derniers niveaux de stock sans charge inutile du serveur. Cette approche garantit l’évolutivité tout en gardant l’expérience utilisateur transparente. 🛒

Intégrer des systèmes de file d'attente avancés comme BullMQ, comme nous l'avons fait avec le bon d'attribution file d'attente, ajoute de la robustesse aux tâches de traitement de données en masse. La file d'attente garantit que même en cas de redémarrage du serveur, les tâches en attente restent intactes et le traitement reprend. De plus, des mécanismes de nouvelle tentative peuvent être configurés, garantissant que les tâches ayant échoué (par exemple, en raison d'un temps d'arrêt temporaire de la base de données) soient automatiquement réessayées. Par exemple, si une allocation à 300 employés dans tous les départements rencontre une erreur temporaire, la résilience de la file d'attente garantit qu'aucun enregistrement n'est laissé sans traitement, ajoutant ainsi de la fiabilité à votre système.

Au-delà des notifications en temps réel, SSE peut également compléter les services de messagerie pour les tâches nécessitant des résumés détaillés. Une fois toutes les notifications de bons envoyées via SSE, le backend peut générer un rapport de manière asynchrone et envoyer un e-mail consolidé aux responsables. Cette communication multicanal garantit à la fois des notifications immédiates et un suivi complet, répondant à un large éventail de préférences des utilisateurs. Une telle intégration améliore la flexibilité de votre système, créant une expérience utilisateur complète. 📧