# Services Angular et communication avec l’API

## Vue d’ensemble

Le frontend ne doit pas appeler le backend directement depuis chaque composant. La logique partagée est regroupée dans `uniksimFrontEnd/src/app/service/`, avec plusieurs familles spécialisées.

## Flux standard

```mermaid
sequenceDiagram
    participant P as Page / Component
    participant S as Service Angular
    participant I as AuthInterceptor
    participant C as Controller NestJS
    participant B as Service backend

    P->>S: Action utilisateur
    S->>I: Requête HttpClient
    I->>I: Ajoute / gère auth
    I->>C: HTTP
    C->>B: Logique métier
    B-->>C: Résultat
    C-->>S: Réponse
    S-->>P: État / données UI

```

## Auth

`service/auth/` contient :

- `AuthGuard.service.ts` : guards de navigation selon le type d’utilisateur.
- `authInterceptor.service.ts` : intercepteur HTTP enregistré globalement dans `app.module.ts`.

## Accès aux données et APIs

`service/requestAndData/` contient les services historiques de communication et de données :

- `braincloudRequest.service.ts`
- `dataBaseRequest.service.ts`
- `dataSource.service.ts`

Avant de créer un nouveau service HTTP générique, vérifier si l’appel appartient déjà à l’un de ces services ou à un service fonctionnel plus spécifique.

## Support

`service/support/` sépare le support en trois responsabilités :

- `support.service.ts` : appels et logique du support.
- `support-socket.service.ts` : namespace `/support`, rooms de conversations et événements temps réel.
- `support-state.service.ts` : état frontend partagé du support.

## Notifications

`service/notifications/` contient notamment :

- `user-notification.service.ts` : inbox locale, synchronisation HTTP et fusion par UID des notifications transmises par AppComponent.
- `notification-sound.service.ts` : gestion du son lors de nouvelles notifications.

## Présence et WebPanel

- `service/presence/admin-presence.service.ts` : données de présence utilisées par l’interface admin.
- `service/webPanel/web-panel.service.ts` : logique du WebPanel.

## Choisir où placer une nouvelle logique

```mermaid
flowchart TD
    NEW[Nouvelle logique frontend] --> SHARED{Utilisée par plusieurs pages ?}
    SHARED -- Non --> PAGE[La garder près de la Page / Component]
    SHARED -- Oui --> DOMAIN{Sous-système existant ?}
    DOMAIN -- Auth --> AUTH[service/auth]
    DOMAIN -- Support --> SUP[service/support]
    DOMAIN -- Notifications --> NOTIF[service/notifications]
    DOMAIN -- Présence --> PRES[service/presence]
    DOMAIN -- Données / API générique --> DATA[service/requestAndData]
    DOMAIN -- Autre --> NEWSVC[Nouveau service spécialisé]

```

## Points d’attention

- Éviter de dupliquer les appels HTTP dans plusieurs pages.
- Garder les composants centrés sur l’UI et déléguer la logique partagée aux services.
- Pour le temps réel, toujours prévoir le chargement initial HTTP et la mise à jour Socket.IO.
- Lorsqu’un endpoint change, vérifier le service Angular correspondant et non seulement la page visible.

## Temps réel du compte et transport partagé — septembre 2026

`service/realtime/realtime-socket.ts` centralise connexion JWT, événements observables, reconnexion et acknowledgements. `service/account/account-socket.service.ts` utilise `/account` pour présence, télémétrie consentie, jeu actif et `notification.created`. `service/support/support-socket.service.ts` utilise `/support` pour messages, tickets et typing, et restaure la conversation active à la reconnexion. Les composants de support et de présence admin consomment le service du compte pour les signaux de présence.

`AccountSocketService` joue le son et émet la notification; `AppComponent` la transmet à `UserNotificationService.upsert()`. Les modèles sont séparés dans `Models/Notification.ts`, `Presence.ts` et `Support.ts`; les constantes communes vivent dans `realtime.constants.ts` et `account.constants.ts`. Voir [Support temps réel](https://wiki.uniksim.com/books/web/page/support-temps-reel).