HUOMAUTUS: THH:n artikkeli on ensisijaisesti tekoäly, joka on syntynyt osana uutuuspakettiani julkaisudokumenttina. Se on aika mielenkiintoinen, joten laitan sen tähän, mutta jos se on ongelma sinulle, ole hyvä ja jätä se huomiotta.
Osana minun Nuget-paketti LLMApi / enimmäkseen lucid.mockllmapi Tarvitsin sivun, jotta voin käyttää SignalR-ominaisuuksia (se voi simuloida SignalR-syötteitä käyttämällä LLM-tietoja). Niinpä keksin tämän.
Voit löytää GitHub tässä. projektia varten kaikki julkisuus ym....
Siitä tuli vaivihkaa varsin mukava työkalu!
Jos olet joskus tarvinnut kojelautaa tai reaaliaikaista käyttöliittymää ennen varsinaisen tietolähteen olemassaoloa, tiedät haasteen. Päädyt kirjoittamaan kovakoodattuja JSON-laitteita tai tarkempaa setInterval() silmukoita, jotka pyörivät saman kourallisen esineitä läpi.
Rakensin tämän SignalR-demon ratkaisemaan ongelman joustavammalla tavalla. Kuvailet mitä tietoja tarvitset selkokielellä, ja paikallinen LLM tuottaa realistisen, monipuolisen JSONin, joka virtaa selaimeesi reaaliaikaisesti. Ei varusteita, joita ylläpitää, ei siementiedostoja, joita päivittää, vain kuvaat mitä haluat ja katsot sen virtaavan.
Näytän, miten se toimii ja miten siitä saadaan irti mahdollisimman paljon.
SignalR-demon sivu (Index.cshtml) on reaaliaikaisten tietovirtojen hallintapaneeli. Tässä on perusvirta:
Se on erityisen hyödyllistä prototyypityksessä, demojen rakentamisessa tai frontend-ominaisuuksien parissa odottaessaan taustarajapintojen valmistumista. Tiedot näyttävät realistisilta, koska LLM ymmärtää kontekstin ja tuottaa sopivat arvot.
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 ylläpitää selaimen ja palvelimen välistä pysyvää WebSocket-yhteyttä. Sen sijaan, että HTTP-pyynnöillä järjestettäisiin päätetapahtuma muutaman sekunnin välein, palvelin työntää dataa, kun se on valmis. Näin saat todella reaaliaikaisia päivityksiä, joiden yleiskustannukset ovat mahdollisimman pienet.
Yhteys pysyy auki, data virtaa välittömästi, ja käyttöliittymäsi on paljon reagoivampi. Se on samaa teknologiaa, jota käytetään chat-sovelluksissa, live-kojelaudaissa ja yhteistyötyökaluissa, joissa pikapäivityksillä on merkitystä.
Aloitetaan nopeimmasta polusta nähdä tämän toimivan. Näytän pörssitiedot esimerkiksi.
Vaihe 1: Aloita sovellus
dotnet run --project LLMApi/LLMApi.csproj
Navigoi http://localhost:5116 (Tarkista konsolin ulostulo todellisesta portista).
Vaihe 2: Käytä pikakäynnistysesimerkkiä
Näet viisi esiaseteltua esimerkkiä vihreillä "Launch"-painikkeilla. Klikkaa "Stock Marketia" ja olet valmis. Sivu automaattisesti:
Vaihe 3: Katso tietovirtaa
Uusia tietoja ilmestyy viiden sekunnin välein syntaksin korostamana. Jokaisessa päivityksessä näkyy erilaisia osakkeita, joiden hinnat ja kaupankäyntimäärät ovat realistisia. LLM tuottaa uutta dataa joka kerta, joten näet vaihtelua samalla, kun säilytät johdonmukaisen rakenteen.
Nyt streamaat pilkkapörssitietoja. Tutustu vapaasti muihin pikavippiesimerkkeihin nähdäksesi erilaisia datamalleja.
Pikakäynnistyspainikkeet ovat käteviä, mutta todellinen teho tulee siitä, että kuvataan, mitä tarvitaan. Luodaan oma esimerkki.
Esimerkki: Kahvikoneen telemetria
Sano, että rakennat IoT-kojelautaa ja tarvitset simuloituja kahvinkeitintietoja.
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
Klikkaa "Create & Subscribe" ja olet vapaalla.
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
Järjestelmä:
Näet tuotoksen näin:
{
"machineId": "CM-2847",
"beansRemaining": 67,
"waterTemp": 94.5,
"cupsBrewed": 142,
"lastMaintenance": "2025-01-03T08:23:00Z"
}
Jokaisella päivityksellä on erilaiset arvot, mutta se ylläpitää rakennetta. LLM ymmärtää "kahvikoneen telemetriaa" ja tuottaa siinä yhteydessä järkeviä lukuja.
A konteksti On nimetty datavirta-asetus. Ajattele sitä kanavana tai puheenaiheena.
Kun luot sellaisen, tarkenna:
weather, stock-market, sensors)Takaosa sitten:
Useat selaimet voivat tilata saman kontekstin, ja ne saavat kaikki samat tiedot samanaikaisesti. Tämä on hienoa kojelaudan testaamiseen, jossa on näytettävä synkronoituja päivityksiä eri näytöille tai komponenteille.
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
Liitännässä on kolme paneelia, jotka pitävät asiat järjestyksessä:
Tässä kohtaa määrität uudet tietovirrat. Tarvitset:
Ei tarvitse kirjoittaa JSON-skeemaa tai selittää tietotyyppejä. LLM:n rakenne luontevista kielikuvauksista yllättävän hyvin.
Näyttää kaikki juoksevat asiayhteytesi:
Yhdistä/katkaise yhteys Ohjaa selaimesi tilausta. Valitse Connect aloittaaksesi tietojen vastaanottamisen, katkaise yhteys poistaaksesi kontekstin.
Aloita tai lopeta Ohjaa taustatietojen tuottamista. Tämä on hyödyllistä, kun haluat pysäyttää virran tuhoamatta kontekstikokoonpanoa.
Poista Poistaa kontekstin kokonaan. Käytä tätä puhdistukseen, kun olet valmis tietyllä tietovirralla.
Tässä näet reaaliaikaisia päivityksiä:
Data ilmestyy uusimpana ensimmäisenä huipulla, joten näet aina uusimmat päivitykset selaamatta.
Sivulla käytetään HTMX:ää lomakkeiden toimittamiseen ja SignalR:ää reaaliaikaiseen yhteydenpitoon. Jos rakennat omaa asiakasta, tässä on SignalR-kuvio, jota tarvitset:
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
Liitännäisen asennus:
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();
Tietojen vastaanottaminen:
await connection.invoke('SubscribeToContext', 'my-context-name');
Ei tilausta, kun valmis:
await connection.invoke('UnsubscribeFromContext', 'my-context-name');
Demosivu käsittelee kaiken tämän automaattisesti, mutta nämä kolme mallia ovat kaikki mitä tarvitset mukautettuun toteutukseen.
Tässä muutamia skenaarioita, joissa tämä työkalu todella loistaa:
1. UI:n rakentaminen ennen API:tä on olemassa
Työstät kojelautaa ja taustatiimi suunnittelee yhä API-skeemaa. Sen sijaan, että estät heidän työnsä, kuvaile odottamasi datarakenne ja rakenna käyttöliittymäsi valevirtaa vasten. Kun todellinen API on valmis, vaihdat päätepisteen.
2. Asiakasmielenosoitukset
Suoritat liveseurannan kojelautaa asiakkaalle, mutta varsinainen dataputki ei ole vielä valmis. Luo kontekstit, jotka vastaavat suunniteltua datarakennettasi ja näyttävät realistista, muuttuvaa dataa esityksen aikana. Se näyttää ammattimaiselta ja auttaa asiakasta visualisoimaan lopputuotteen.
3. Frontend Development ja Testit
Tarvitset realistista ja monipuolista dataa, jotta voit testata, miten kaaviot, taulukot ja komponentit käsittelevät päivityksiä. Luo kontekstit tarvitsemiisi rakenteisiin ja kehitä käyttöliittymääsi luottaen siihen, että se käsittelee tosimaailman datakuvioita.
4. Kuormituksen testaus reaaliaikaisesti
Haluat nähdä, miten käyttöliittymäsi toimii nopeissa päivityksissä. Luo korkeataajuinen konteksti ja katso, miten komponenttisi käsittelevät datavirtaa. Tämä auttaa tunnistamaan suorituskykyongelmat ennen tuotantoa.
5. Verkkosokettien ja reaaliaikaisten ideoiden opettaminen
Opetat SignalR- tai WebSocket-konsepteja ja haluat oppilaiden näkevän reaaliaikaisia päivityksiä ilman täydellisen taustajoukon rakentamista. demo on toimiva esimerkki, jota he voivat kokeilla ja josta he voivat oppia.
Viisi esiaseteltua esimerkkiä osoittavat erilaisia yhteisiä tietomalleja:
IoT-anturit: Numeeriset anturilukemat ja laitteen metatiedot Osakemarkkinat: Rahoitustiedot hinnoineen, volyymeineen ja prosenttimuutoksineen Verkkokaupan tilaukset: Nested objekteja tilauskohteiden sarjoissa Palvelinmetriikka: Järjestelmän seuranta useilla suoritusmittareilla Pelien leaderboard: Pelaajatilastot ja -statukset
Nämä esimerkit ovat valmiita. Klikkaa Käynnistä, katso tietoja ja käytä niitä malliesimerkkinä omiin asiayhteyksiisi.
Jos rakennat asiakaskohtaista asiakasta tai yhdistät tämän toiseen sovellukseen, tässä HTTP:n päätetapahtumat:
Luo konteksti:
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"}'
Luettele kaikki kontekstit:
curl http://localhost:5116/api/mock/contexts
Hanki erityinen konteksti:
curl http://localhost:5116/api/mock/contexts/sensors
Aloita tai pysäytä datan tuottaminen:
curl -X POST http://localhost:5116/api/mock/contexts/sensors/start
curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop
Poistetaan tekstiyhteys:
curl -X DELETE http://localhost:5116/api/mock/contexts/sensors
Kun olet luonut kontekstin, ota yhteys SignalR-napaan osoitteessa /hub/mock ja tilata alkaa vastaanottaa päivityksiä.
Kun luot kontekstin, järjestelmä:
Lämpötila on 1,2 (suhteellisen korkea) vaihtelun varmistamiseksi. "Käyttäjätietoja" kysyttäessä saa joka kerta erilaisia nimiä ja arvoja, ei samoja harvoja kierrätettyjä loputtomasti. Tiedot pysyvät rakenteellisesti yhdenmukaisina ja vaihtelevat realistisesti.
Datan tuottaminen tapahtuu taustalla, ei tilattuna työntöä kohden. Tämä pitää päivitykset johdonmukaisina ja vähentää LLM-kuormaa.
Näin se toimii:
Tulos: Ensimmäinen viestisi saapuu heti, sen jälkeen viestejä tulee jatkuvasti viiden sekunnin välein, eikä LLM:tä moukaroida jatkuvasti.
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
Liitäntä näyttää "Discnnected" -yhteyden, eikä kytketä uudelleen
http://localhost:11434ollama list Varmista, että olet asentanut mallejaKonteksti luotu, mutta tietoja ei ilmesty
Datarakenne ei vastaa odotuksiasi
Selainkonsoli näyttää SignalR-kytkentäyritykset
Voit muokata käyttäytymistä 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: Aseta matalammalle nopeammille päivityksille, korkeammalle vähentämään LLM-kuormaa Lämpötila: Korkeammat arvot antavat luovempaa/satunnaisempaa dataa, pienemmät antavat johdonmukaisempia tuloksia HubContexts: Määrittele kontekstit, jotka alkavat automaattisesti sovelluksen käynnistyessä
Jos rakennat varsinaista kojelautaa ja haluat käyttää sitä kehityksen aikana, tässä on React-esimerkki:
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');
Kun olet valmis siirtymään tuotantoon, vaihda navigaattorin URL. SignalR-rajapinta (on() sekä invoke()) toimii samalla tavalla oikeiden backendien kanssa.
Siellä on hyviä valedatakirjastoja. Faker.js on erinomainen. Mockaroo tekee hyvää työtä. Miksi siis rakentaa toinen työkalu?
Tämä työkalu ratkaisee erityishaasteita:
Se on suunniteltu tiettyä työnkulkua varten: reaaliaikaisen käyttöliittymän rakentaminen silloin, kun tarvitset monipuolista, realistista tietoa ilman konfiguraatiota.
Paras tapa ymmärtää tämä työkalu on käyttää sitä:
dotnet run --project LLMApihttp://localhost:5116Yritä sieltä luoda oma kontekstisi kuvauksella, joka vastaa projektisi tarpeita. Työkalu on kaikkein arvokkain, kun käytät sitä todelliseen kehitystyöhön.
Rakensin tämän, koska törmäsin jatkuvasti samaan ongelmaan: tarvitsemme realistista, muuttuvaa dataa demoja ja kehitystä varten. Jos kohtaat tuonkin haasteen, toivon, että tämä työkalu auttaa työnkulkuasi.
Käynnistys:
dotnet run --project LLMApi
Oletusverkko- osoite: http://localhost:5116
SignalR-hub: /hub/mock
Tärkeimmät menetelmät:
SubscribeToContext(name) - Aloita tietojen vastaanottaminenUnsubscribeFromContext(name) - Lopeta tietojen vastaanottaminenTärkeimmät tapahtumat:
DataUpdate - Uudet tiedot saapuivatSubscribed - Tilaus vahvistettuUnsubscribed - Ei kirjoitusta vahvistettuLoppu on vain sen tutkimista, mitä sillä voi rakentaa.
© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.