NOTE: Son article est principalement généré par l'IA dans le cadre de mon paquet nuget comme documentation de publication. C'est assez intéressant donc je l'ai mis ici mais si c'est un problème pour vous s'il vous plaît ignorez-le.
Dans le cadre de mon Paquet Nuget LLMApi / principalementlucide.mockllmapi J'avais besoin d'avoir une page pour activer en utilisant les fonctionnalités SignalR qu'il possède (il peut simuler les flux SignalR en utilisant LLMs pour fournir des données).
Vous pouvez trouver le GitHub ici pour le projet, tout domaine public etc...
C'est devenu un bel outil !
Si vous avez jamais eu besoin de construire un tableau de bord ou une interface utilisateur en temps réel avant l'existence de la source de données réelle, vous connaissez le défi. setInterval() boucles qui tournent à travers la même poignée d'objets.
J'ai construit cette démo SignalR pour résoudre ce problème d'une manière plus flexible. Vous décrivez les données dont vous avez besoin en anglais simple, et un LLM local génère JSON réaliste et varié qui s'écoule vers votre navigateur en temps réel. Pas d'installation à maintenir, pas de fichiers de semences à mettre à jour, juste décrire ce que vous voulez et regarder son flux.
Laissez-moi vous montrer comment ça marche et comment en tirer le meilleur parti.
La page de démonstration SignalR (Index.cshtml) est un panneau de contrôle pour la gestion des flux de données en temps réel. Voici le flux de base:
Il est particulièrement utile lorsque vous êtes prototypage, construire des démos, ou travailler sur des fonctionnalités frontend en attendant que les API backend soient prêtes. Les données semblent réalistes parce que le LLM comprend le contexte et génère des valeurs appropriées.
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
SignalR maintient une connexion WebSocket persistante entre votre navigateur et le serveur. Au lieu de scruter un paramètre toutes les quelques secondes avec les requêtes HTTP, le serveur pousse les données quand il est prêt. Cela vous donne vraiment des mises à jour en temps réel avec un minimum de frais généraux.
La connexion reste ouverte, les flux de données instantanément, et votre interface utilisateur se sent beaucoup plus réactive. C'est la même technologie utilisée dans les applications de chat, les tableaux de bord en direct et les outils collaboratifs où les mises à jour instantanées comptent.
Commençons par le chemin le plus rapide pour voir ce travail. Je vais vous montrer un exemple de données boursières.
Étape 1: Démarrer l'application
dotnet run --project LLMApi/LLMApi.csproj
Naviguez vers http://localhost:5116 (vérifiez la sortie de la console pour le port réel).
Étape 2: Utilisez un exemple de démarrage rapide
Vous verrez cinq exemples préconfigurés avec des boutons verts "Launch". Cliquez sur "Stock Market" et vous avez terminé. La page automatiquement:
Étape 3: Regardez le flux de données
Toutes les 5 secondes, de nouvelles données apparaissent avec mise en évidence syntaxique. Chaque mise à jour montre différents stocks avec des prix réalistes et des volumes de trading. Le LLM génère des données fraîches à chaque fois, de sorte que vous voyez la variété tout en maintenant une structure cohérente.
C'est tout ! Vous êtes maintenant en train de diffuser des données sur les marchés boursiers simulés. N'hésitez pas à explorer les autres exemples de démarrage rapide pour voir différents modèles de données.
Les boutons de démarrage rapide sont pratiques, mais la puissance réelle vient de décrire exactement ce dont vous avez besoin.
Exemple: Télémétrie de la machine à café
Dites que vous construisez un tableau de bord IoT et avez besoin de données simulées de machine à café. Voici comment:
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 "Créer & S'abonner" et vous êtes désactivé.
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:
Vous verrez la sortie comme ceci :
{
"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 maintient la structure. Le LLM comprend la télémétrie de la machine de café et génère des nombres qui ont un sens dans ce contexte.
A contexte est une configuration de flux de données nommée. Pensez-y comme un canal ou un sujet.
Lorsque vous en créez un, vous spécifiez :
weather, stock-market, sensors)Le moteur alors:
Plusieurs navigateurs peuvent s'abonner au même contexte et tous reçoivent les mêmes données simultanément. Ceci est idéal pour tester des tableaux de bord qui doivent afficher des mises à jour synchronisées sur différents écrans ou composants.
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
L'interface a trois panneaux pour garder les choses organisées:
C'est là que vous définissez de nouveaux flux de données. Vous aurez besoin :
Vous n'avez pas besoin d'écrire des schémas JSON ou d'expliquer des types de données. La structure de LLM infère étonnamment bien à partir de descriptions de langage naturel.
Affiche tous vos contextes d'exécution avec :
Connecter/désconnecter Cliquez sur Se connecter pour commencer à recevoir les données, Déconnecter pour s'arrêter sans supprimer le contexte.
Démarrer/arrêter contrôle la génération de données backend. Ceci est utile lorsque vous voulez interrompre un flux sans détruire la configuration du contexte.
Supprimer supprime entièrement le contexte. Utilisez ceci pour nettoyer lorsque vous avez terminé avec un flux de données particulier.
C'est là que vous voyez des mises à jour en temps réel :
Les données apparaissent en premier en haut, donc vous voyez toujours les dernières mises à jour sans défiler.
La page utilise HTMX pour la soumission de formulaire et SignalR pour la connectivité en temps réel. Si vous construisez votre propre client, voici le modèle SignalR dont vous aurez besoin :
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
Configuration 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();
S'abonner pour recevoir des données:
await connection.invoke('SubscribeToContext', 'my-context-name');
Se désabonner à la fin:
await connection.invoke('UnsubscribeFromContext', 'my-context-name');
La page de démonstration gère tout cela automatiquement, mais ces trois modèles sont tout ce dont vous avez besoin pour une implémentation personnalisée.
Voici quelques scénarios où cet outil brille vraiment:
1. Construction d'interfaces utilisateur avant l'existence d'API
Vous travaillez sur un tableau de bord et l'équipe de backend est toujours en train de concevoir le schéma de l'API. Au lieu de bloquer leur travail, décrivez la structure de données que vous attendez et construisez votre interface utilisateur contre le flux simulé.
2. Démonstrations des clients
Vous démolisez un tableau de bord de surveillance en direct à un client, mais le pipeline de données n'est pas encore prêt. Créez des contextes qui correspondent à votre structure de données prévue et montrent des données réalistes et changeantes pendant la présentation. Il semble professionnel et aide le client à visualiser le produit final.
3. Développement et mise à l'essai de la façade
Vous avez besoin de données réalistes et variées pour tester comment vos graphiques, tables et composants gèrent les mises à jour. Créez des contextes avec les structures dont vous avez besoin et développez votre interface utilisateur avec confiance qu'elle gère les modèles de données du monde réel.
4. Essais de charge en temps réel
Vous voulez voir comment votre UI fonctionne dans le cadre de mises à jour rapides. Créez un contexte haute fréquence et regardez comment vos composants gèrent le flux de données. Cela aide à identifier les problèmes de performance avant la production.
5. Enseigner les concepts Web et les concepts en temps réel
Vous enseignez les concepts SignalR ou WebSocket et voulez que les étudiants voient des mises à jour en temps réel sans construire un backend complet. La démo fournit un exemple de travail avec lequel ils peuvent expérimenter et apprendre.
Les cinq exemples préconfigurés montrent différents modèles de données communs :
Capteurs IdO: Lectures de capteurs numériques avec métadonnées de l'appareil Marché boursier: Données financières avec prix, volumes et variations en pourcentage Ordonnances de commerce électronique: Objets imbriqués avec tableaux d'éléments de commande Métriques du serveur: Surveillance du système avec plusieurs paramètres de performance Tableau de classement des jeux: Classement des joueurs avec statistiques et statuts
Ces exemples sont prêts à partir. Cliquez sur Lancer, regarder les données et les utiliser comme modèles pour vos propres contextes.
Si vous construisez un client personnalisé ou si vous l'intégrez dans une autre application, voici les paramètres 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"}'
Énumérez 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 génération 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 inscrivez-vous pour commencer à recevoir les mises à jour.
Lorsque vous créez un contexte, le système :
La température est de 1,2 (relativement élevée) pour assurer la variété. Lorsque vous demandez des « données utilisateur », vous obtenez des noms et des valeurs différents à chaque fois, pas les mêmes rares recyclés sans fin. Les données restent structurellement cohérentes tout en variant de façon réaliste.
La génération de données se produit en arrière-plan, pas à la demande par poussée. Cela maintient les mises à jour cohérentes et réduit la charge LLM.
Voici comment ça marche :
Résultat : Votre premier message arrive instantanément, les messages suivants viennent régulièrement toutes les 5 secondes, et le LLM n'est pas martelé en continu.
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
La connexion affiche « Déconnecté » et ne se reconnectera pas
http://localhost:11434ollama list pour vérifier que vous avez des modèles installésContexte créé mais aucune donnée n'apparaît
La structure des données ne correspond pas à ce que vous attendiez
La console du navigateur affiche les tentatives de reconnection SignalR
Vous pouvez personnaliser le comportement dans 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
}
]
}
}
SignalRPushIntervallesM: Réglez plus bas pour des mises à jour plus rapides, plus haut pour réduire la charge LLM Température: Des valeurs plus élevées donnent des données plus créatives et plus aléatoires, plus faibles donne des résultats plus cohérents HubContexts: Définissez les contextes qui démarrent automatiquement lorsque l'application démarre
Si vous construisez un tableau de bord réel et que vous voulez l'utiliser pendant le développement, voici un exemple de 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êt à passer à la production, il suffit de changer l'URL du hub. L'interface SignalR (on() et invoke()) fonctionne de la même façon avec les vrais moteurs.
Il ya de bonnes bibliothèques de données simulées là-bas. Faker.js est excellent. Mockaroo fait du bon travail. Alors pourquoi construire un autre outil?
Cet outil résout des défis spécifiques :
Il est conçu pour un workflow spécifique : construire des UI en temps réel lorsque vous avez besoin de données variées et réalistes sans frais généraux de configuration.
La meilleure façon de comprendre cet outil est de l'utiliser :
dotnet run --project LLMApihttp://localhost:5116À partir de là, essayez de créer votre propre contexte avec une description qui correspond aux besoins de votre projet. L'outil est le plus précieux lorsque vous l'utilisez pour un travail de développement réel.
J'ai construit cela parce que j'ai continué à rencontrer le même problème: besoin de données réalistes, changeant pour les démos et le développement. Si vous faites face à ce défi aussi, j'espère que cet outil aide votre workflow.
Démarrage :
dotnet run --project LLMApi
URL par défaut & #160;: http://localhost:5116
Hub SignalR : /hub/mock
Méthodes clés :
SubscribeToContext(name) - Commencez à recevoir des donnéesUnsubscribeFromContext(name) - Arrêter de recevoir les donnéesÉvénements clés :
DataUpdate - De nouvelles données sont arrivéesSubscribed - Abonnement confirméUnsubscribed - Non-abonnement confirméC'est tout ce que vous devez savoir. Le reste est juste explorer ce que vous pouvez construire avec elle.
© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.