Back to "LLMApi: Real-Time Mock Data with LLMs and SignalRM SK2 A Practical Guide"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

# LLMApi: Real-Time Mock Data with LLMs and SignalRM SK2 A Practical Guide

<datetime class="hidden">2025-11-04T21:15</datetime>

# Introduction

[![NuGet](https://img.shields.io/nuget/v/mostlylucid.mockllmapi.svg)](https://www.nuget.org/packages/mostlylucid.mockllmapi) [![NuGet](https://img.shields.io/nuget/dt/mostlylucid.mockllmapi.svg)](https://www.nuget.org/packages/mostlylucid.mockllmapi)

> NOTE: Cet article est principalement AI généré dans le cadre de mon paquet nuget en tant que documentation de diffusion.

En tant que partie de mon [Nuget package LLMApi / mostlylucid.mockllmapi ](https://www.nuget.org/packages/mostlylucid.mockllmapi) J’avais besoin d’une page pour permettre l’utilisation des fonctionnalités de SignalR qu’il possède (il peut simuler les feeds de signalR en utilisant les LLMs pour fournir des données). C’est ce que j’ai trouvé .

Vous pouvez trouver le[ GitHub ici ](https://github.com/scottgal/LLMApi)pour le projet, tous les domaines publics, etc.

C'est quicly devenu un très bon outil!

![Simulateur de SignalR](signalrsimulator.png)

Si vous ' avez déjà besoin de construire un tableau de bord ou une interface réelle -time UI avant que la source de données réelle n’existe M SK2 vous connaissez le défi . Vous terminez par écrire des fixtures JSON hardcoded ou élaborer `setInterval()` les boucles qui tournent par la même poignée d'objets.

J’ai construit cette démonstration de SignalR pour résoudre ce problème d’une manière plus souple. Vous décritez les données dont vous avez besoin en anglais simple, et un LLM local génère des JSON réalistes , variés qui s’acheminent dans votre navigateur en temps réelMSC3timeM SK4 Aucune réparation à entretenirMska5 aucun fichier de semences à mettre à jourM Ska6 simplement décrivez ce que vous voulez et regardez le déroulement de l’applicationMka7

Permettez-moi de vous montrer comment il fonctionne et comment en tirer le meilleur parti.

[TOC]

## Ce que fait cet outil

La page de démonstration SignalR (`Index.cshtml`) est un panneau de commande pour la gestion des flux de données réels.

1. Vous créez un flux de données nommé "contexteM SK1 (
2. Vous décrivez quel type de données vous voulez en anglais
3. Un LLM génère un JSON approprié en fonction de votre description
4. SignalR transmet des données fraîches à votre navigateur tous les 5 secondes
5. Vous voyez les résultats avec l'affichage de la syntaxe en temps réel-

Il est particulièrement utile' lorsqu’il s’agit d’établir des prototypes, de faire des démonstrations ou de travailler sur les fonctionnalités de frontend en attendant que les API de backend soient prêts.

### Le grand tableau

```mermaid
graph TB
    Browser[Your Browser]
    UI[Demo UI]
    API[Management API]
    Hub[SignalR Hub]
    Manager[Context Manager]
    BG[Background Service]
    LLM[LLM Ollama/OpenAI]
    Cache[Response Cache]

```

## Pourquoi SignalR pour le réel-Mises à jour du temps?

SignalR entretient une connexion WebSocket persistante entre votre navigateur et le serveur. Au lieu d’interroger un point final tous les quelques secondes avec des demandes HTTP, le serveur pousse les données lorsqu’elle est prêteM SK2 . Cela vous donne vraiment des mises à jour réellesMSC4 temps avec minimales frais généraux

La connexion demeure ouverte, les données circulent instantanément , et votre interface se sent beaucoup plus réceptive. C’est la même technologie que celle utilisée dans les applications de chatM SK4 les tableaux de bord en directMSC5 et les outils collaboratifs où les mises à jour immédiates sont importantesMST6

## Démarrage rapide: Faire courir en 5 minutes

Je vais vous montrer un exemple de données sur le marché des actions.

**Étape 1: Lancer l'application**

```bash
dotnet run --project LLMApi/LLMApi.csproj
```

Naviger vers `http://localhost:5116` (vérifier la sortie de console pour le port réel

**Étape 2: Utiliser un exemple de démarrage rapide**

Vous verrez cinq exemples préconfigurés de - avec des boutons verts "LaunchM SK3 buttons. Cliquez sur "Stock MarketMSC6 et vous verrez la page

- Crée un contexte de données sur le marché des actions
- Inscrire votre navigateur pour recevoir des mises à jour
- Début de l'affichage des données sur les stocks en direct avec les prix, volumesM SK1 et changements

**Étape 3: Voir le flux de données**

Chaque 5 secondes , de nouvelles données apparaissent avec une mise en évidence de la syntaxe. Chaque mise à jour montre des stocks différents avec des prix réalistes et des volumes commerciaux.

Que'c'est ça!Vous 'enregistrez maintenant des données de marchés monétaires modèlesM SK3 Vous êtes libre d'explorer les autres exemples de démarrage rapide pour voir différents patrons de données.

## Créer vos propres flux de données personnalisés

Les boutons de démarrage rapide sont utiles, mais le pouvoir réel provient d’expliquer exactement ce que vous avez besoin. LaissezM SK2s créer un exemple personnalisé .

**Exemple: télémétrie de la machine à café**

Supposons que vous construisez un tableau de bord IoT et avez besoin de données simulées sur la machine à café.

```
Context Name: coffee-machines
Description: Coffee machine telemetry with machine ID, beans remaining percentage,
             water temperature in Celsius, cups brewed today, and last maintenance timestamp
```

Cliquez sur "Create & Subscribe" et vousM SK3sterez à l’écart de la liste

### Ce qui se passe derrière les scènes

```mermaid
sequenceDiagram
    participant Browser
    participant API
    participant Manager
    participant BG as Background Service
    participant LLM
    participant Hub

Browser->>API: POST /api/mock/contexts {name, description}
 API->>Manager: Store context config
 Manager-->>API: Context created ✓
 API-->>Browser: 200 OK

Browser->>Hub: invoke('SubscribeToContext', 'coffee-machines')
    Hub->>Manager: Register subscription
    Manager-->>Hub: Subscription confirmed
    Hub-->>Browser: on('Subscribed')

Note over BG,LLM: Every 5 seconds...
 BG->>LLM: Generate data for 'coffee-machines' Prompt includes description
 LLM-->>BG: JSON response
 BG->>Hub: Broadcast to 'coffee-machines' group
 Hub-->>Browser: on('DataUpdate', {data})
 Browser->>Browser: Display with syntax highlighting
```

Le système:

1. Crée le contexte dans la backend
2. Inscrivez votre navigateur pour recevoir des mises à jour via SignalR
3. Commence à produire des données en fonction de votre description
4. Met à jour tous les 5 secondes

Vous verrez la sortie comme suit :

```json
{
  "machineId": "CM-2847",
  "beansRemaining": 67,
  "waterTemp": 94.5,
  "cupsBrewed": 142,
  "lastMaintenance": "2025-01-03T08:23:00Z"
}
```

Chaque mise à jour a des valeurs différentes, mais elle maintient la structure.

## Comprendre les contextes

A **contexte** est une configuration de flux de données dénommée. Pensez à elle comme un canal ou un sujet.

Lorsque vous créez un ,, vous spécifiez

- **Nom**: Un identificateur unique (eM SK2g., `weather`, `stock-market`, `sensors`)
- **Description**: La structure de données que vous voulez, en français

Le backend alors:

- Crée un groupe SignalR avec ce nom
- Crée un prompt pour le LLM en fonction de votre description
- Génie périodiquement des données fraîches (par défaut toutes les 5 secondes
- La diffusion à tous les clients abonnés

Plusieurs navigateurs peuvent s'abonner au même contexte et ils reçoivent tous les mêmes données simultanément. C'est un bon outil pour tester des tableaux de bord qui doivent montrer des mises à jour synchronisées sur différents écrans ou composants.

### Contexte Machine d'État du cycle de vie

```mermaid
stateDiagram-v2
 [*] --> Created: Create Context (POST /contexts)

Created --> Active: Start (auto or manual)
 Active --> Stopped: Stop (POST /stop)
 Stopped --> Active: Start (POST /start)

Created --> Subscribed: Client Subscribes
 Active --> Subscribed: Client Subscribes
 Stopped --> Subscribed: Client Subscribes (no data sent)

Subscribed --> Receiving: Data Push (if Active)
 Receiving --> Subscribed: Client Connected

Subscribed --> Created: Unsubscribe
    Subscribed --> Active: Unsubscribe
    Subscribed --> Stopped: Unsubscribe

Created --> [*]: Delete
    Active --> [*]: Delete
    Stopped --> [*]: Delete
    Subscribed --> [*]: Delete

note right of Active
        Generates data
        Pushes to clients
        Shows "Active" badge
    end note

note right of Stopped
        No data generation
        Clients stay connected
        Shows "Stopped" badge
    end note
```

## Comprendre la conception de l'UI

L'interface a trois panneaux pour garder les choses organisées:

### gauche: Créer un contexte

C'est là où vous définissez les nouveaux flux de données. VousM SK1Vous aurez besoin:

- **Nom du contexte**: Rendre unique et descriptifM SK1 Utiliser la case inférieure -avec-les barres fonctionnent bienMSC4
- **Description**: Être précis sur ce que vous voulez. Le LLM fonctionne le mieux avec des descriptions claires comme " profils d'utilisateurs avec un nomM SK3 courrielMNK4 âgeMRK5 et statut de prime booleanMSC6

Il n’est pas nécessaire de rédiger des schémas JSON ou d’expliquer les types de données.

### Moyen: Contextes actifs

Affiche tous vos contextes en cours avec:

- Nom et badge de situation (Active/StoppedM SK2
- Cote des connexions ( Combien de clients sont actuellement abonnés)
- boutons de commande: Connexion, Déconnection , DémarrageM SK3 StopMSC4 Supprimer

**Connect/Disconnect** Contrôle de votre navigateur's abonnement. Cliquer Connect pour commencer à recevoir les donnéesM SK2 Déconnecter pour arrêter sans supprimer le contexteMSC3

**Démarrage/Stop** contrôle la production de données en backend. Il s'agit d'un outil utile lorsque vous voulez interrompre un flux sans détruire la configuration contextuelle.

**Supprimer** supprime complètement le contexte. Utilisez ce paramètre pour nettoyer lorsque vous effectuez un transfert de données particulier

### Right: Données en direct

C'est là que vous voyez les mises à jour de temps réels.

- Indicateur de l'état de la connexion (Connexe/DisconnectéeM SK2
- Nom du contexte actuellement abonné
- Les derniers messages 10 comportant des crochets de temps et une mise en valeur syntaxique

Les données apparaissent les plus récentes-premièrement en haut de la pageM SK1 vous pouvez donc toujours voir les dernières mises à jour sans parcourir la page

## Le modèle de connexion JavaScript

La page utilise HTMX pour soumettre le formulaire et SignalR pour la connectivité réelle.

### Flux de connexion du client

```mermaid
sequenceDiagram
    participant Page as Your Page
    participant SR as SignalR Client
    participant Hub as /hub/mock
    participant BG as Background Service

Page->>SR: new HubConnectionBuilder() .withUrl('/hub/mock')
 Page->>SR: connection.start()
 SR->>Hub: WebSocket connection
 Hub-->>SR: Connected ✓
 SR-->>Page: Trigger 'connected' event

Page->>SR: invoke('SubscribeToContext', 'weather')
    SR->>Hub: SubscribeToContext('weather')
    Hub->>Hub: Add to 'weather' group
    Hub-->>SR: on('Subscribed', {context: 'weather'})
    SR-->>Page: Display "Subscribed"

loop Every 5 seconds
        BG->>Hub: Broadcast to 'weather' group
        Hub->>SR: on('DataUpdate', {data, timestamp})
        SR->>Page: Update UI with new data
    end

Page->>SR: invoke('UnsubscribeFromContext', 'weather')
    SR->>Hub: UnsubscribeFromContext('weather')
    Hub->>Hub: Remove from 'weather' group
```

**Démarrage de la connexion:**

```javascript
const connection = new signalR.HubConnectionBuilder()
    .withUrl('/hub/mock')
    .withAutomaticReconnect()
    .build();

connection.on('DataUpdate', (message) => {
    // message.context: which context sent this
    // message.data: the actual JSON payload
    // message.timestamp: Unix timestamp in milliseconds
});

await connection.start();
```

**Souscrire pour recevoir des données:**

```javascript
await connection.invoke('SubscribeToContext', 'my-context-name');
```

**Désousscription lorsque terminée:**

```javascript
await connection.invoke('UnsubscribeFromContext', 'my-context-name');
```

La page de démonstration traite tout cela automatiquement, mais ces trois modèles sont tous ceux dont vous avez besoin pour une mise en œuvre personnalisée.

## Exemples d'utilisation pratiques

Voici quelques scénarios où cet outil brille vraiment:

**1. Établir des UI avant que les API ne soient existants**

Vous ' travaillez sur un tableau de bord et l’équipe de backend est encore en train de concevoir le schéma d’API . Au lieu de bloquer leur travail, vous décritez la structure des données que vous attendez et construisez votre UI à partir du flux de modèle M SK3 Lorsque l’API réel est prêt , vous MSC5 échangerez simplement le point final.

**2. Démonstrations des clients**

Vous effectuez la démonstration d’un panneau de surveillance en direct à un client, mais le pipeline réel des données n’est pas disponible.

**3. Développement et essais de frontend**

Vous avez besoin de données réalistes, variées pour tester la façon dont vos graphiquesM SK1 tables , et les composantes traitent des mises à jour. Créer des contextes avec les structures dont vous avez besoin et développer votre interface avec confiance qu’elle traite des données réellesMSC4patronaux de données du mondeMNK5

**4. Essais de chargement réels-Fechatures du temps**

Vous voulez voir comment votre interface fonctionne sous des mises à jour rapides. Créer un contexte de fréquence élevéeM SK1 et suivre la façon dont vos composantes gèrent le flux de données. Cela permet d’identifier les problèmes de performance avant la productionMSC3

**5. Apprentissage des sockets Web et du temps réel**

Vous enseignez les concepts de SignalR ou WebSocket et vous voulez que les étudiants voient des mises à jour réelles en temps réel sans construire un backend complet.

## Exemples de démarrage rapide expliqués

Les cinq exemples préconfigurés - démontrent différents modèles de données communs

**Sensors IoT**: Les lectures numériques des capteurs avec les métadonnées de l'appareil
**Marché des actions**: Données financières avec les prix , volumes M SK2 et variation en pourcentage
**E-ordonnances de commerce**: Objets nichés avec des tableaux d'articles de commande
**Métrique du serveur**: Surveillance du système avec plusieurs mesures de rendement
**Tableau de classement des jeux**: Classement des joueurs avec statistiques et statuts

Ces exemples sont prêts à partir. Cliquez sur LancerM SK1 regardez les données, et les utilisez comme templates pour vos propres contextes .

## API Endpoints pour l'intégration

Si vous ' construisez un client personnalisé ou l'intégrez à une autre application , voici les points d'entrée HTTP

**Créer un contexte:**

```bash
curl -X POST http://localhost:5116/api/mock/contexts \
  -H "Content-Type: application/json" \
  -d '{"name": "sensors", "description": "Temperature sensors with device ID and readings"}'
```

**Liste de tous les contextes:**

```bash
curl http://localhost:5116/api/mock/contexts
```

**Obtenir un contexte spécifique:**

```bash
curl http://localhost:5116/api/mock/contexts/sensors
```

**Démarrer ou arrêter la production de données:**

```bash
curl -X POST http://localhost:5116/api/mock/contexts/sensors/start
curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop
```

**Supprimer un contexte:**

```bash
curl -X DELETE http://localhost:5116/api/mock/contexts/sensors
```

Après avoir créé un contexte,, connectez-vous au hub SignalR à `/hub/mock` et vous abonner pour commencer à recevoir les mises à jour.

## Comment fonctionne la génération LLM

Lorsque vous créez un contexte, le système:

1. Prend votre description
2. Construit un prompt qui inclut l'aléacité (Seed GUID +Zeuble de temps pour la variété)
3. Demande au LLM de produire un JSON approprié correspondant à votre description
4. Valide que la réponse est JSON réelle (inscrit le marquage en cas de besoin)
5. Caches de réponses multiples pour une livraison rapide
6. génère plus dans l'arrière-plan pour garder le cache rempli

La température est fixée à 1.2 ( relativement élevéeM SK2 pour garantir la diversité. Quand vous demandez des données sur les utilisateursMSC4, vous obtiendrez différents noms et valeurs chaque foisMNK6 pas les mêmes quelques-uns recyclés sans cesseMMK7 Les données demeurent structurellement cohérentes tout en variant de façon réalisteMRK8

## Performance et Caching intelligent

La production de données se fait dans le contexte, non sur l’écran-demand par pousséeM SK2 Cela maintient les mises à jour cohérentes et réduit la charge LLM .

Voici comment il fonctionne' :

- Au démarrage, le système pré- remplit un cache avec des réponses pour chaque contexte actif
- Il mesure combien de temps la génération prend (sayM SK1 500ms par demande)
- Il calcule la taille optimale des lots: l'intervalle d'impulsion M SK1 le temps de génération (5000ms
- Il génère des lots dans l'arrière-plan pour maintenir le cache à niveau
- Lorsque c’est le moment de pousser ', il retire immédiatement du cache.

Résultat: Votre premier message arrive instantanément , les messages subséquents arrivent constamment tous les M SK2 secondes M SK3 et le LLM n’est pas' ne fait pas l’objet d’un marquage continu

### Le flux de cachement intelligent

```mermaid
graph LR
 subgraph Startup
 A[App Starts] --> B[Pre-fill Cache]
 B --> C[Measure Gen Time 500ms]
 C --> D[Calculate Batch 5000ms / 500ms = 10]
 end

subgraph Runtime Loop
 E[Timer Tick Every 5s] --> F{Cache > 50%?}
 F -->|Yes| G[Pop from Cache]
 F -->|No| H[Generate Batch in Background]
 G --> I[Push to Clients]
 H --> J[Refill Cache]
 J --> G
 I --> E
 end

D --> E

style B stroke:#10b981,stroke-width:3px
    style G stroke:#0ea5e9,stroke-width:3px
    style H stroke:#ef4444,stroke-width:3px
    style I stroke:#f59e0b,stroke-width:3px
```

## Troubleshooting Common Issues

**La connexion indique "Disconnected" et wonM SK2t reconnect**

- Vérifiez que votre service LLM (Ollama/OpenAIM SK2 est en cours
- Configuration par défaut attend Ollama à `http://localhost:11434`
- Faire courir `ollama list` pour vérifier si vous avez installé des modèles
- Vérifier la console du navigateur pour les erreurs de connexion SignalR

**Contexte créé mais aucune donnée n'apparaît**

- Voir le panneau Contextes actifs—est le contexte qui montre M SK1Active"?
- Cliquez sur le bouton Connexion si vous n’avez pas encore subscrit'
- Vérifier que l'état de la connexion montre vert (Connected) dans le panneau des données en direct
- Vérifier les registres du serveur pour voir si la génération LLM fonctionne

**Structure des données ne correspond pas à ce que vous attendiez**

- Rendre votre description plus précise et concrète
- Exemple: M SK1la température, en tant que nombre entre 0 et
- Essayez de redéfinir votre description—il s'agit d'une ingénierie rapide au travail
- Vérifiez les données générées et perfectionnez votre description en fonction de ce que vous voyez

**La console du navigateur montre les tentatives de reconnection SignalR**

- Le backend ne fonctionne peut-être pas—veuillez vérifier votre terminal
- Vous avez peut-être changé le port—actualiser l'URL du hub SignalR si nécessaire
- Vérifier les problèmes de pare-feu ou de réseau (en particulier dans le Docker /Environnements STL)

## Options de configuration

Vous pouvez personnaliser le comportement en `appsettings.json`:

```json
{
  "MockLlmApi": {
    "SignalRPushIntervalMs": 5000,  // How often to push data (milliseconds)
    "ModelName": "llama3",           // Which LLM model to use
    "Temperature": 1.2,              // Creativity level (0.0-2.0, higher = more varied)
    "BaseUrl": "http://localhost:11434",  // LLM service URL
    "HubContexts": [                 // Optional: pre-configured contexts
      {
        "Name": "weather",
        "Description": "Weather data with temperature, humidity, wind speed",
        "IsActive": true
      }
    ]
  }
}
```

**SignalRPushIntervalMs**: Établir une valeur inférieure pour des mises à jour plus rapides , une valeur supérieure pour réduire la charge de LLM
**Température**: Les valeurs plus élevées donnent un résultat plus créatif
**Contextes Hub**: Définir les contextes qui commencent automatiquement lors du lancement de l'application

## Intégration avec votre application

Si vous' construisez un tableau de bord réel et que vous voulez l’utiliser pendant le développement , ici M SK2 est un exemple React :

```javascript
import * as signalR from '@microsoft/signalr';

const connection = new signalR.HubConnectionBuilder()
  .withUrl('http://localhost:5116/hub/mock')
  .withAutomaticReconnect()
  .build();

connection.on('DataUpdate', (message) => {
  if (message.context === 'stock-market') {
    updateStockChart(message.data);
  }
});

await connection.start();
await connection.invoke('SubscribeToContext', 'stock-market');
```

Lorsque vous êtes prêts à passer à la production, changez simplement l’URL du hub.`on()` et `invoke()`) fonctionne de la même façon avec les backends réels.

## Pourquoi construire ce modèle?

Il y a de bonnes bibliothèques de données mock là-bas. Faker.js est excellentM SK2 Mockaroo fait un grand travail . Alors pourquoi construire une autre outilMSC4

Cet outil permet de résoudre des problèmes spécifiques:

1. **Enregistrement en temps réel**: La plupart des outils vous donnent des ensembles de données statiques ou des points finals RESTM SK1 pas les flux WebSocket en direct
2. **Liens linguistiques naturels**: Décrivez ce que vous voulez au lieu de rédiger des schémas JSON
3. **Données pertinentes du contexte**: Les LLM génèrent des valeurs réalistes qui ont un sens ensemble , non seulement des chaînes aléatoires qui se trouvent à l'intérieur d'un type
4. **Self-documentation**: La description est la documentation pour votre structure de données
5. **Structure flexible**: Modifier votre modèle de données à la mi-parcours de l’élaboration - sans mettre à jour les fixtures

Il' est conçu pour un flux de travail spécifique: bâtir des interfaces réelles - à temps lorsque vous avez besoin de données réalistes variées

## Démarrage

La meilleure façon de comprendre cet outil est d'en utiliser.

1. Démarrer l’application: `dotnet run --project LLMApi`
2. Ouvrir votre navigateur à `http://localhost:5116`
3. Cliquez sur l’un des boutons verts "Launch"
4. Voir le flux de données dans

De là, essayez de créer votre propre contexte avec une description qui correspond à votre projetM SK1s besoins. L'outil est le plus précieux lorsque vous l'utilisez pour des travaux de développement réels .

Je l’ai construit parce que je continuais à faire face au même problème.

---

## Référence rapide

**Démarrage:**

```bash
dotnet run --project LLMApi
```

**URL par défaut:** `http://localhost:5116`

**SignalR Hub:** `/hub/mock`

**Méthodes clés:**

- `SubscribeToContext(name)` - Commencer à recevoir les données
- `UnsubscribeFromContext(name)` - Supprimer la réception des données

**Activités clés:**

- `DataUpdate` - Nouveaux données sont arrivées
- `Subscribed` - L'abonnement est confirmé
- `Unsubscribed` - Confirmation de non-abonnement

Il s’agit de tout ce que vous devez savoir. Le reste est d’explorer ce qu’on peut y construire.

This is a preview from the server running through my markdig pipeline

AI AI-Article API ASP.NET Core LLM LLMApi mockllmapi Nuget SignalR

LLMApi: Real-Time Mock Data with LLMs and SignalRM SK2 A Practical Guide

Tuesday, 04 November 2025

Introduction

NOTE: Cet article est principalement AI généré dans le cadre de mon paquet nuget en tant que documentation de diffusion.

En tant que partie de mon Nuget package LLMApi / mostlylucid.mockllmapi J’avais besoin d’une page pour permettre l’utilisation des fonctionnalités de SignalR qu’il possède (il peut simuler les feeds de signalR en utilisant les LLMs pour fournir des données). C’est ce que j’ai trouvé .

Vous pouvez trouver le GitHub ici pour le projet, tous les domaines publics, etc.

C'est quicly devenu un très bon outil!

Simulateur de SignalR

Si vous ' avez déjà besoin de construire un tableau de bord ou une interface réelle -time UI avant que la source de données réelle n’existe M SK2 vous connaissez le défi . Vous terminez par écrire des fixtures JSON hardcoded ou élaborer setInterval() les boucles qui tournent par la même poignée d'objets.

Permettez-moi de vous montrer comment il fonctionne et comment en tirer le meilleur parti.

Ce que fait cet outil

La page de démonstration SignalR (Index.cshtml) est un panneau de commande pour la gestion des flux de données réels.

Vous créez un flux de données nommé "contexteM SK1 (
Vous décrivez quel type de données vous voulez en anglais
Un LLM génère un JSON approprié en fonction de votre description
SignalR transmet des données fraîches à votre navigateur tous les 5 secondes
Vous voyez les résultats avec l'affichage de la syntaxe en temps réel-

Le grand tableau

graph TB
    Browser[Your Browser]
    UI[Demo UI]
    API[Management API]
    Hub[SignalR Hub]
    Manager[Context Manager]
    BG[Background Service]
    LLM[LLM Ollama/OpenAI]
    Cache[Response Cache]

    Browser -->|Create Context| API
    API -->|Store Config| Manager
    Browser -->|Connect Subscribe| Hub
    Hub -->|Register Client| Manager
    BG -->|Generate Data| LLM
    LLM -->|Return JSON| BG
    BG -->|Cache Responses| Cache
    BG -->|Push to Clients| Hub
    Hub -->|Real-time Updates| Browser

Pourquoi SignalR pour le réel-Mises à jour du temps?

Démarrage rapide: Faire courir en 5 minutes

Je vais vous montrer un exemple de données sur le marché des actions.

Étape 1: Lancer l'application

dotnet run --project LLMApi/LLMApi.csproj

Naviger vers http://localhost:5116 (vérifier la sortie de console pour le port réel

Étape 2: Utiliser un exemple de démarrage rapide

Vous verrez cinq exemples préconfigurés de - avec des boutons verts "LaunchM SK3 buttons. Cliquez sur "Stock MarketMSC6 et vous verrez la page

Crée un contexte de données sur le marché des actions
Inscrire votre navigateur pour recevoir des mises à jour
Début de l'affichage des données sur les stocks en direct avec les prix, volumesM SK1 et changements

Étape 3: Voir le flux de données

Chaque 5 secondes , de nouvelles données apparaissent avec une mise en évidence de la syntaxe. Chaque mise à jour montre des stocks différents avec des prix réalistes et des volumes commerciaux.

Créer vos propres flux de données personnalisés

Les boutons de démarrage rapide sont utiles, mais le pouvoir réel provient d’expliquer exactement ce que vous avez besoin. LaissezM SK2s créer un exemple personnalisé .

Exemple: télémétrie de la machine à café

Supposons que vous construisez un tableau de bord IoT et avez besoin de données simulées sur la machine à café.

Context Name: coffee-machines
Description: Coffee machine telemetry with machine ID, beans remaining percentage,
             water temperature in Celsius, cups brewed today, and last maintenance timestamp

Cliquez sur "Create & Subscribe" et vousM SK3sterez à l’écart de la liste

Ce qui se passe derrière les scènes

sequenceDiagram
    participant Browser
    participant API
    participant Manager
    participant BG as Background Service
    participant LLM
    participant Hub

    Browser->>API: POST /api/mock/contexts<br/>{name, description}
    API->>Manager: Store context config
    Manager-->>API: Context created ✓
    API-->>Browser: 200 OK

    Browser->>Hub: invoke('SubscribeToContext', 'coffee-machines')
    Hub->>Manager: Register subscription
    Manager-->>Hub: Subscription confirmed
    Hub-->>Browser: on('Subscribed')

    Note over BG,LLM: Every 5 seconds...
    BG->>LLM: Generate data for 'coffee-machines'<br/>Prompt includes description
    LLM-->>BG: JSON response
    BG->>Hub: Broadcast to 'coffee-machines' group
    Hub-->>Browser: on('DataUpdate', {data})
    Browser->>Browser: Display with syntax highlighting

Le système:

Crée le contexte dans la backend
Inscrivez votre navigateur pour recevoir des mises à jour via SignalR
Commence à produire des données en fonction de votre description
Met à jour tous les 5 secondes

Vous verrez la sortie comme suit :

{
  "machineId": "CM-2847",
  "beansRemaining": 67,
  "waterTemp": 94.5,
  "cupsBrewed": 142,
  "lastMaintenance": "2025-01-03T08:23:00Z"
}

Chaque mise à jour a des valeurs différentes, mais elle maintient la structure.

Comprendre les contextes

A contexte est une configuration de flux de données dénommée. Pensez à elle comme un canal ou un sujet.

Lorsque vous créez un ,, vous spécifiez

Nom: Un identificateur unique (eM SK2g., weather, stock-market, sensors)
Description: La structure de données que vous voulez, en français

Le backend alors:

Crée un groupe SignalR avec ce nom
Crée un prompt pour le LLM en fonction de votre description
Génie périodiquement des données fraîches (par défaut toutes les 5 secondes
La diffusion à tous les clients abonnés

Contexte Machine d'État du cycle de vie

stateDiagram-v2
    [*] --> Created: Create Context<br/>(POST /contexts)

    Created --> Active: Start<br/>(auto or manual)
    Active --> Stopped: Stop<br/>(POST /stop)
    Stopped --> Active: Start<br/>(POST /start)

    Created --> Subscribed: Client Subscribes
    Active --> Subscribed: Client Subscribes
    Stopped --> Subscribed: Client Subscribes<br/>(no data sent)

    Subscribed --> Receiving: Data Push<br/>(if Active)
    Receiving --> Subscribed: Client Connected

    Subscribed --> Created: Unsubscribe
    Subscribed --> Active: Unsubscribe
    Subscribed --> Stopped: Unsubscribe

    Created --> [*]: Delete
    Active --> [*]: Delete
    Stopped --> [*]: Delete
    Subscribed --> [*]: Delete

    note right of Active
        Generates data
        Pushes to clients
        Shows "Active" badge
    end note

    note right of Stopped
        No data generation
        Clients stay connected
        Shows "Stopped" badge
    end note

Comprendre la conception de l'UI

L'interface a trois panneaux pour garder les choses organisées:

gauche: Créer un contexte

C'est là où vous définissez les nouveaux flux de données. VousM SK1Vous aurez besoin:

Nom du contexte: Rendre unique et descriptifM SK1 Utiliser la case inférieure -avec-les barres fonctionnent bienMSC4
Description: Être précis sur ce que vous voulez. Le LLM fonctionne le mieux avec des descriptions claires comme " profils d'utilisateurs avec un nomM SK3 courrielMNK4 âgeMRK5 et statut de prime booleanMSC6

Il n’est pas nécessaire de rédiger des schémas JSON ou d’expliquer les types de données.

Moyen: Contextes actifs

Affiche tous vos contextes en cours avec:

Nom et badge de situation (Active/StoppedM SK2
Cote des connexions ( Combien de clients sont actuellement abonnés)
boutons de commande: Connexion, Déconnection , DémarrageM SK3 StopMSC4 Supprimer

Connect/Disconnect Contrôle de votre navigateur's abonnement. Cliquer Connect pour commencer à recevoir les donnéesM SK2 Déconnecter pour arrêter sans supprimer le contexteMSC3

Démarrage/Stop contrôle la production de données en backend. Il s'agit d'un outil utile lorsque vous voulez interrompre un flux sans détruire la configuration contextuelle.

Supprimer supprime complètement le contexte. Utilisez ce paramètre pour nettoyer lorsque vous effectuez un transfert de données particulier

Right: Données en direct

C'est là que vous voyez les mises à jour de temps réels.

Indicateur de l'état de la connexion (Connexe/DisconnectéeM SK2
Nom du contexte actuellement abonné
Les derniers messages 10 comportant des crochets de temps et une mise en valeur syntaxique

Les données apparaissent les plus récentes-premièrement en haut de la pageM SK1 vous pouvez donc toujours voir les dernières mises à jour sans parcourir la page

Le modèle de connexion JavaScript

La page utilise HTMX pour soumettre le formulaire et SignalR pour la connectivité réelle.

Flux de connexion du client

sequenceDiagram
    participant Page as Your Page
    participant SR as SignalR Client
    participant Hub as /hub/mock
    participant BG as Background Service

    Page->>SR: new HubConnectionBuilder()<br/>.withUrl('/hub/mock')
    Page->>SR: connection.start()
    SR->>Hub: WebSocket connection
    Hub-->>SR: Connected ✓
    SR-->>Page: Trigger 'connected' event

    Page->>SR: invoke('SubscribeToContext', 'weather')
    SR->>Hub: SubscribeToContext('weather')
    Hub->>Hub: Add to 'weather' group
    Hub-->>SR: on('Subscribed', {context: 'weather'})
    SR-->>Page: Display "Subscribed"

    loop Every 5 seconds
        BG->>Hub: Broadcast to 'weather' group
        Hub->>SR: on('DataUpdate', {data, timestamp})
        SR->>Page: Update UI with new data
    end

    Page->>SR: invoke('UnsubscribeFromContext', 'weather')
    SR->>Hub: UnsubscribeFromContext('weather')
    Hub->>Hub: Remove from 'weather' group

Démarrage de la connexion:

const connection = new signalR.HubConnectionBuilder()
    .withUrl('/hub/mock')
    .withAutomaticReconnect()
    .build();

connection.on('DataUpdate', (message) => {
    // message.context: which context sent this
    // message.data: the actual JSON payload
    // message.timestamp: Unix timestamp in milliseconds
});

await connection.start();

Souscrire pour recevoir des données:

await connection.invoke('SubscribeToContext', 'my-context-name');

Désousscription lorsque terminée:

await connection.invoke('UnsubscribeFromContext', 'my-context-name');

La page de démonstration traite tout cela automatiquement, mais ces trois modèles sont tous ceux dont vous avez besoin pour une mise en œuvre personnalisée.

Exemples d'utilisation pratiques

Voici quelques scénarios où cet outil brille vraiment:

1. Établir des UI avant que les API ne soient existants

2. Démonstrations des clients

Vous effectuez la démonstration d’un panneau de surveillance en direct à un client, mais le pipeline réel des données n’est pas disponible.

3. Développement et essais de frontend

4. Essais de chargement réels-Fechatures du temps

5. Apprentissage des sockets Web et du temps réel

Vous enseignez les concepts de SignalR ou WebSocket et vous voulez que les étudiants voient des mises à jour réelles en temps réel sans construire un backend complet.

Exemples de démarrage rapide expliqués

Les cinq exemples préconfigurés - démontrent différents modèles de données communs

Sensors IoT: Les lectures numériques des capteurs avec les métadonnées de l'appareil Marché des actions: Données financières avec les prix , volumes M SK2 et variation en pourcentage E-ordonnances de commerce: Objets nichés avec des tableaux d'articles de commande Métrique du serveur: Surveillance du système avec plusieurs mesures de rendement Tableau de classement des jeux: Classement des joueurs avec statistiques et statuts

Ces exemples sont prêts à partir. Cliquez sur LancerM SK1 regardez les données, et les utilisez comme templates pour vos propres contextes .

API Endpoints pour l'intégration

Si vous ' construisez un client personnalisé ou l'intégrez à une autre application , voici les points d'entrée HTTP

Créer un contexte:

curl -X POST http://localhost:5116/api/mock/contexts \
  -H "Content-Type: application/json" \
  -d '{"name": "sensors", "description": "Temperature sensors with device ID and readings"}'

Liste de tous les contextes:

curl http://localhost:5116/api/mock/contexts

Obtenir un contexte spécifique:

curl http://localhost:5116/api/mock/contexts/sensors

Démarrer ou arrêter la production de données:

curl -X POST http://localhost:5116/api/mock/contexts/sensors/start
curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop

Supprimer un contexte:

curl -X DELETE http://localhost:5116/api/mock/contexts/sensors

Après avoir créé un contexte,, connectez-vous au hub SignalR à /hub/mock et vous abonner pour commencer à recevoir les mises à jour.

Comment fonctionne la génération LLM

Lorsque vous créez un contexte, le système:

Prend votre description
Construit un prompt qui inclut l'aléacité (Seed GUID +Zeuble de temps pour la variété)
Demande au LLM de produire un JSON approprié correspondant à votre description
Valide que la réponse est JSON réelle (inscrit le marquage en cas de besoin)
Caches de réponses multiples pour une livraison rapide
génère plus dans l'arrière-plan pour garder le cache rempli

Performance et Caching intelligent

La production de données se fait dans le contexte, non sur l’écran-demand par pousséeM SK2 Cela maintient les mises à jour cohérentes et réduit la charge LLM .

Voici comment il fonctionne' :

Au démarrage, le système pré- remplit un cache avec des réponses pour chaque contexte actif
Il mesure combien de temps la génération prend (sayM SK1 500ms par demande)
Il calcule la taille optimale des lots: l'intervalle d'impulsion M SK1 le temps de génération (5000ms
Il génère des lots dans l'arrière-plan pour maintenir le cache à niveau
Lorsque c’est le moment de pousser ', il retire immédiatement du cache.

Le flux de cachement intelligent

graph LR
    subgraph Startup
        A[App Starts] --> B[Pre-fill Cache]
        B --> C[Measure Gen Time<br/>500ms]
        C --> D[Calculate Batch<br/>5000ms / 500ms = 10]
    end

    subgraph Runtime Loop
        E[Timer Tick<br/>Every 5s] --> F{Cache > 50%?}
        F -->|Yes| G[Pop from Cache]
        F -->|No| H[Generate Batch<br/>in Background]
        G --> I[Push to Clients]
        H --> J[Refill Cache]
        J --> G
        I --> E
    end

    D --> E

    style B stroke:#10b981,stroke-width:3px
    style G stroke:#0ea5e9,stroke-width:3px
    style H stroke:#ef4444,stroke-width:3px
    style I stroke:#f59e0b,stroke-width:3px

Troubleshooting Common Issues

La connexion indique "Disconnected" et wonM SK2t reconnect

Vérifiez que votre service LLM (Ollama/OpenAIM SK2 est en cours
Configuration par défaut attend Ollama à http://localhost:11434
Faire courir ollama list pour vérifier si vous avez installé des modèles
Vérifier la console du navigateur pour les erreurs de connexion SignalR

Contexte créé mais aucune donnée n'apparaît

Voir le panneau Contextes actifs—est le contexte qui montre M SK1Active"?
Cliquez sur le bouton Connexion si vous n’avez pas encore subscrit'
Vérifier que l'état de la connexion montre vert (Connected) dans le panneau des données en direct
Vérifier les registres du serveur pour voir si la génération LLM fonctionne

Structure des données ne correspond pas à ce que vous attendiez

Rendre votre description plus précise et concrète
Exemple: M SK1la température, en tant que nombre entre 0 et
Essayez de redéfinir votre description—il s'agit d'une ingénierie rapide au travail
Vérifiez les données générées et perfectionnez votre description en fonction de ce que vous voyez

La console du navigateur montre les tentatives de reconnection SignalR

Le backend ne fonctionne peut-être pas—veuillez vérifier votre terminal
Vous avez peut-être changé le port—actualiser l'URL du hub SignalR si nécessaire
Vérifier les problèmes de pare-feu ou de réseau (en particulier dans le Docker /Environnements STL)

Options de configuration

Vous pouvez personnaliser le comportement en appsettings.json:

{
  "MockLlmApi": {
    "SignalRPushIntervalMs": 5000,  // How often to push data (milliseconds)
    "ModelName": "llama3",           // Which LLM model to use
    "Temperature": 1.2,              // Creativity level (0.0-2.0, higher = more varied)
    "BaseUrl": "http://localhost:11434",  // LLM service URL
    "HubContexts": [                 // Optional: pre-configured contexts
      {
        "Name": "weather",
        "Description": "Weather data with temperature, humidity, wind speed",
        "IsActive": true
      }
    ]
  }
}

SignalRPushIntervalMs: Établir une valeur inférieure pour des mises à jour plus rapides , une valeur supérieure pour réduire la charge de LLM Température: Les valeurs plus élevées donnent un résultat plus créatif Contextes Hub: Définir les contextes qui commencent automatiquement lors du lancement de l'application

Intégration avec votre application

Si vous' construisez un tableau de bord réel et que vous voulez l’utiliser pendant le développement , ici M SK2 est un exemple React :

import * as signalR from '@microsoft/signalr';

const connection = new signalR.HubConnectionBuilder()
  .withUrl('http://localhost:5116/hub/mock')
  .withAutomaticReconnect()
  .build();

connection.on('DataUpdate', (message) => {
  if (message.context === 'stock-market') {
    updateStockChart(message.data);
  }
});

await connection.start();
await connection.invoke('SubscribeToContext', 'stock-market');

Lorsque vous êtes prêts à passer à la production, changez simplement l’URL du hub.on() et invoke()) fonctionne de la même façon avec les backends réels.

Pourquoi construire ce modèle?

Il y a de bonnes bibliothèques de données mock là-bas. Faker.js est excellentM SK2 Mockaroo fait un grand travail . Alors pourquoi construire une autre outilMSC4

Cet outil permet de résoudre des problèmes spécifiques:

Enregistrement en temps réel: La plupart des outils vous donnent des ensembles de données statiques ou des points finals RESTM SK1 pas les flux WebSocket en direct
Liens linguistiques naturels: Décrivez ce que vous voulez au lieu de rédiger des schémas JSON
Données pertinentes du contexte: Les LLM génèrent des valeurs réalistes qui ont un sens ensemble , non seulement des chaînes aléatoires qui se trouvent à l'intérieur d'un type
Self-documentation: La description est la documentation pour votre structure de données
Structure flexible: Modifier votre modèle de données à la mi-parcours de l’élaboration - sans mettre à jour les fixtures

Il' est conçu pour un flux de travail spécifique: bâtir des interfaces réelles - à temps lorsque vous avez besoin de données réalistes variées

Démarrage

La meilleure façon de comprendre cet outil est d'en utiliser.

Démarrer l’application: dotnet run --project LLMApi
Ouvrir votre navigateur à http://localhost:5116
Cliquez sur l’un des boutons verts "Launch"
Voir le flux de données dans

Je l’ai construit parce que je continuais à faire face au même problème.

Référence rapide

Démarrage:

dotnet run --project LLMApi

URL par défaut: http://localhost:5116

SignalR Hub: /hub/mock

Méthodes clés:

SubscribeToContext(name) - Commencer à recevoir les données
UnsubscribeFromContext(name) - Supprimer la réception des données

Activités clés:

DataUpdate - Nouveaux données sont arrivées
Subscribed - L'abonnement est confirmé
Unsubscribed - Confirmation de non-abonnement

Il s’agit de tout ce que vous devez savoir. Le reste est d’explorer ce qu’on peut y construire.