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
This is a preview from the server running through my markdig pipeline
Tuesday, 04 November 2025
नोट: उनके आलेख में मुख्यतः एआई बनाया गया है मेरे Nuget पैकेज के भाग के रूप में. यह बहुत दिलचस्प है मैं इसे यहाँ डाल दिया है लेकिन अगर यह आप इसे नज़रअंदाज़ करें.
मेरे के भाग के रूप में नुget पैकेज olMONON / slud.molmapi मुझे सिग्नल आर फीचर का उपयोग करने के लिए एक पृष्ठ प्राप्त करने की जरूरत है (यह सिग्नलRM फीड को समर्थन दे सकते हैं डेटा देने के लिए उपयोग कर सकते हैं). तो यह है कि मैं के साथ आया था.
आप पा सकते हैं GiHh यहाँ परियोजना के लिए, सभी सार्वजनिक डोमेन...
यह काफ़ी अच्छी तरह से एक अच्छा औज़ार बन गया!

यदि आपको कभी एक तूफानबोर्ड या वास्तविक समय यूआई बनाने की जरूरत है वास्तविक डेटा स्रोत मौजूद होने से पहले, आप चुनौती को जानते हैं. आप मुश्किल JSON बार लिखना या बड़ी मात्रा में लिखना खत्म करते हैं setInterval() लूप जो कि एक ही मुट्ठी के भीतर घूमता है
मैंने इस सिग्नल-शंस को हल करने के लिए बनाया है कि समस्या को हल करने के लिए। आप वर्णन करते हैं कि क्या डेटा आप सादे अंग्रेजी में की जरूरत है, और एक स्थानीय CLM यथार्थवादी बनाता है, विभिन्न JSON कि वास्तव में आपके ब्राउज़र के लिए प्रवाह को उत्पन्न करता है। कोई बीज नहीं, बस क्या आप चाहते हैं वर्णन करें और देखते हैं कि आप क्या करना चाहते हैं।
मैं आपको दिखाता हूँ कि यह कैसे काम करता है और सबसे अधिक इसे प्राप्त करने के लिए कैसे।
सिग्नल- लेखक पृष्ठ (ए)Index.cshtml) वास्तविक समय डाटा नदियों का प्रबंधन करने के लिए नियंत्रण फलक है. यहाँ मूल प्रवाह है:
यह विशेष रूप से उपयोगी है जब आप निर्माता बनाने के लिए कर रहे हैं, डेमो बनाने या सामने दिये गये विशेषताओं पर काम करते हैं... ... बैकेंड एपीआई एपीआई्स तैयार करने के लिए इंतजार कर रहे हैं. डेटा यथार्थ रूप से दिखता है क्योंकि CAL संदर्भ को समझता है और उपयुक्त मान बनाता है.
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
सिग्नलR आपके ब्राउज़र और सर्वर के बीच एक आग्रहात्मक वेब-सेप कनेक्शन बनाए रखता है. कुछ सेकंडों के बजाय, सर्वर डेटा धक्का जब यह तैयार है. यह आपको सच में अधिकतम समय अद्यतन करता है.
कनेक्शन खुला रहता है, डेटा तत्काल प्रवाहता है, और आपके यूआई को अधिक प्रतिक्रिया महसूस होती है. यह चैट अनुप्रयोगों में प्रयोग की उसी तकनीक है, डीबोर्ड, और सहयोगात्मक उपकरण है जहाँ तत्काल अद्यतन किया जाता है.
चलो इस काम को देखने के लिए सबसे तेजी से पथ के साथ शुरू करते हैं. मैं आपको एक स्टॉक बाजार डाटा उदाहरण दिखाता हूँ.
चरण 1: अनुप्रयोग प्रारंभ करें
dotnet run --project LLMApi/LLMApi.csproj
यहाँ नेविगेट करें http://localhost:5116 ( वास्तविक पोर्ट के लिए कंसोल आउटपुट जाँचें.
चरण 2: जल्दी प्रारंभ उदाहरण
आप हरे "ले" बटनों के साथ पांच पूर्व पूर्व उदाहरण देखेंगे. "चचक बाजार" क्लिक करें और आप कर रहे हैं. पृष्ठ स्वचालित रूप से कर रहे हैं:
चरण 3: डाटा स्ट्रीम देखते हैं
हर 5 सेकंड, नए डाटा को सिंटेक्स हाइलाइटिंग के साथ प्रकट होता है. प्रत्येक अद्यतन यथार्थ दामों और व्यापार पत्रों के साथ भिन्न वस्तुओं को दिखाता है.
कि यह है! आप अब पी रहे हैं स्टॉक्स डाटा की हँसी उड़ा रहे हैं. अन्य जल्दी शुरू उदाहरण देखने के लिए अन्य जल्दी डेटा पैटर्न देखने के लिए उदाहरण का पता लगाने के लिए स्वतंत्र लग रहे हैं.
जल्दी शुरू के बटन कुशल हैं, लेकिन असली शक्ति वास्तव में आप क्या जरूरत है वर्णन से आता है। चलो एक मनपसंद उदाहरण बनाता है।
उदाहरण: कॉफी मशीन द्वारा जारी
कहते हैं कि आप एक आईओटी डीबोर्ड का निर्माण कर रहे हैं और कॉफी मशीन डेटा सिमुलेट की जरूरत है. यहाँ कैसे है:
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
"संदेश बनाएँ" क्लिक करें और आप बंद कर रहे हैं.
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
सिस्टम:
आप आउटपुट इस तरह देखेंगे:
{
"machineId": "CM-2847",
"beansRemaining": 67,
"waterTemp": 94.5,
"cupsBrewed": 142,
"lastMaintenance": "2025-01-03T08:23:00Z"
}
प्रत्येक अद्यतन अलग मान रखता है लेकिन संरचना बनाए रखता है.
ए संदर्भ डाटा स्ट्रीम विन्यास है. इसे किसी चैनल या विषय के रूप में नोट करें.
जब आप एक बनाते हैं, आप निर्दिष्ट करते हैं:
weather, stock-market, sensors)बैकेंड तब:
कई ब्राउज़र एक ही संदर्भ में सदस्यता ले सकते हैं और वे सभी एक ही डेटा को एक साथ प्राप्त कर सकते हैं. यह डेंटबोर्ड के लिए बड़ा है जो विभिन्न स्क्रीन या अवयव के माध्यम से अद्यतन करने की जरूरत होती है.
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
इंटरफेस में तीन फलक हैं जो व्यवस्थित चीजों को बनाए रखने के लिए:
यह वह जगह है जहाँ आप नए डाटा नहरें पारिभाषित करते हैं. आपको आवश्यकता होगी:
आपको JSON स्कीमा या डेटा प्रकार को समझने की जरूरत नहीं है. प्राकृतिक भाषा वर्णन से टिलम संरचना में CLM अच्छी तरह से आश्वस्त है.
आपके सभी चल रहे संदर्भों को दिखाता है:
कनेक्ट/डीएस से कनेक्ट करें अपने ब्राउज़र के सब्सक्रिप्शन को नियंत्रित करें. डाटा प्राप्त करने के लिए कनेक्ट को क्लिक करें, संदर्भ मिटाने के लिए डिस्कनेक्ट करें.
प्रारंभ/ रोकें नियंत्रण बैकएण्ड डाटा बनाने के लिए. यह उपयोगी है जब आप संदर्भ कॉन्फ़िगरेशन को नष्ट करते हैं तो यह उपयोगी होता है.
मिटाएँ संदर्भ को पूरी तरह हटा दें. जब आप किसी खास डाटा स्ट्रीम के साथ कर रहे हैं तो इसे साफ करने के लिए इसका प्रयोग करें.
यह वह जगह है जहाँ आप असली समय अद्यतन देखते हैं:
डेटा शीर्ष में नया दिखाई देता है, तो आप हमेशा नवीनतम अद्यतन बिना स्क्रॉल किए देखते हैं.
पृष्ठ HMMMX फ़ॉर्म जमा करने के लिए उपयोग करता है और वास्तव में समय कनेक्ट के लिए सिग्नल आर. यदि आप अपने ही ग्राहक बना रहे हैं, यहाँ सिग्नलR पैटर्न आप की आवश्यकता होगी:
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
कनेक्शन सेटअप किया जा रहा है:
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();
डाटा प्राप्त करने की कोशिश की जा रही है:
await connection.invoke('SubscribeToContext', 'my-context-name');
जब समाप्त हो जाए तो प्राप्त किया जा रहा है:
await connection.invoke('UnsubscribeFromContext', 'my-context-name');
डेमो पृष्ठ यह सब स्वचालित संभालता है, लेकिन ये तीनों पैटर्न आप सभी के लिए एक मनपसंद कार्यान्वयन की जरूरत है.
यहाँ कुछ दृश्य हैं जहाँ यह उपकरण सचमुच चमकता है:
1 से पहले यूआई को एपीआई्स बनाने के लिए
आप एक साला बोर्ड पर काम कर रहे हैं और बैकेंड टीम अब भी कर रहे हैं एपीआई स्कीमा. उनके काम पर ब्लॉक करने के बजाय डेटा संरचना का वर्णन करें, आप की उम्मीद है और अपने यूआई संरचना का वर्णन आप की धारा के खिलाफ निर्माण. जब वास्तविक एपीआई तैयार है, आप सिर्फ अंत-अक्ष पर नज़र रखना होगा.
2 ग्राहक लक्षण
आप एक ग्राहक के लिए एक लंबी दूरी ठहरा रहे हैं, लेकिन वास्तविक डेटा निश्चित रूप से तैयार नहीं है. संदर्भ बनाएँ कि अपने डेटा संरचना से मेल खाते हैं और बाहरी रूप से डेटा को दिखाने के लिए, प्रस्तुति के दौरान डेटा बदल. यह पेशेवर लग रहा है और ग्राहक को अंतिम उत्पाद की कल्पना करने में मदद करता है.
3. फ्रन्टएण्ड विकास तथा जाँच
आपको यथार्थवादी, विविध डाटा की आवश्यकता है कि अपने चार्ट, तालिका और घटकों को कैसे हैंडल करें. सामग्री के साथ संदर्भ बनाएँ और यकीन के साथ अपने यूआई को विकसित करें कि यह वास्तविक सांसारिक डेटा पैटर्न संभालता है.
4. जाँच वास्तविक समय विशेषताएँ लोड करें
आप देखना चाहते हैं कि कैसे आपका यूआई तेजी से अद्यतन के तहत काम करता है. एक उच्च-फ्लाइड संदर्भ तथा देखने के लिए कि आपके अवयव डेटा प्रवाह को संभालते हैं. यह विकास से पहले प्रदर्शन मुद्दों को पहचानने में मदद करता है.
5 सिखाने के लिए जाल और वास्तविक समय ट्रांसमीटर
आप सिग्नलR या वेब-स्फीति सिखा रहे हैं और विद्यार्थियों को एक पूर्ण बैकएण्ड बनाने के बिना वास्तविक समय अद्यतन देखना चाहते हैं. डेमो एक कार्यात्मक उदाहरण प्रदान करता है वे के साथ प्रयोग कर सकते हैं और सीख सकते हैं.
पांच पूर्व किए गए उदाहरण विभिन्न डाटा पैटर्न प्रदर्शित करते हैं:
आईओटी सेंसर्सछवि फ़ाइल नाम प्रदर्शित करने के लिए यह विकल्प सेट करें. स्टॉक हाउस: पैसों, खण्ड, और प्रतिशत परिवर्तनों के साथ वित्तीय आंकड़ा ई- कॉम- मशीन अनुक्रम: नेडिटी वस्तुओं को क्रम क्रम से सेट किया सर्वर मेट्रिक्स: बहुत से प्रदर्शन युक्त सिस्टम निगरानी कोने - कोने का नेताखिलाड़ी: स्टेट्स तथा स्थिति के साथ
ये उदाहरण जाने के लिए तैयार हैं. चालू करने, डाटा देखने के लिए क्लिक करें, और उन्हें अपने संदर्भों के लिए टेम्पलेट के रूप में इस्तेमाल करें.
यदि आप एक मनपसंद ग्राहक बना रहे हैं या इस पर किसी अन्य अनुप्रयोग में ध्यान देने के लिए, यहाँ एचटीटीपी अंतपाइंट हैं:
संदर्भ बनाएँ:
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"}'
सभी संदर्भों की सूची दें:
curl http://localhost:5116/api/mock/contexts
विशेष संदर्भ प्राप्त करें:
curl http://localhost:5116/api/mock/contexts/sensors
डाटा बनाना प्रारंभ या रोकें:
curl -X POST http://localhost:5116/api/mock/contexts/sensors/start
curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop
संदर्भ मिटाएँ:
curl -X DELETE http://localhost:5116/api/mock/contexts/sensors
संदर्भ बनाने के बाद, सिग्नलआर से कनेक्ट करें /hub/mock और अद्यतन प्राप्त करने के लिए सदस्यता.
जब आप एक संदर्भ बना रहे होते हैं, तंत्र:
तापमान 11 से अधिक (pally उच्च) सेट है. जब आप "user डाटा के लिए पूछें," के लिए आप भिन्न नाम और मान पाते हैं, आप हर बार एक ही समय में कुछ सदा के लिए नहीं मिलते हैं. यह डेटा समान रूप से सीमित रहता है.
डाटा छवियाँ पृष्ठभूमि में हो जाता है, पर नहीं तो प्रति पुश का. यह अद्यतन लगातार करता रहता है और कम करता है.
यहाँ यह कैसे काम करता है:
परिणाम: आपका पहला संदेश तत्काल आता है, उसके बाद हर 5 सेकंड का संदेश आता है, और नीएम लगातार बज रहा है.
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
कनेक्शन दिखाता है "ड्ऱ फिर कनेक्ट नहीं होगा
http://localhost:11434ollama list आपके पास मॉडल संस्थापित हैं सत्यापित करने के लिएकॉन्टेक्स्ट बनाया गया है लेकिन कोई डाटा दिखाई नहीं देता
डाटा स्ट्रक्चर जो आप उम्मीद करते हैं उससे मेल नहीं खाता
ब्राउज़र कंसोल सिग्नलR जिससे पुनः प्राप्त होने की कोशिश की जा सकती है
आप बर्ताव को मनपसंद बना सकते हैं 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
}
]
}
}
सिग्नलPRINERSERSIM: तेजी से अपडेट के लिए कम सेट, कम से कम एमएम लोड कम करने के लिए तापक्रम: उच्च मूल्य अधिक सृजनात्मक/ स्थैतिक डाटा देते हैं, कम से कम परिणाम देते हैं हबल संदर्भसंदर्भों को पारिभाषित करता है कि जब अनुप्रयोग चालू करता है तो स्वचलित प्रारंभ करें
यदि आप एक वास्तविक प्रेस बना रहे हैं और विकास के दौरान इस का उपयोग करना चाहते हैं, तो यहाँ एक रीफ्रेक्ट उदाहरण है:
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');
जब आप उत्पादन करने के लिए स्विच करने के लिए तैयार हैं, सिर्फ HatR URL बदलें. सिग्नलR इंटरफेस (e)on() और invoke()) असली बैकएण्ड के साथ एक ही तरह से काम करता है.
अच्छा उपहास डेटा पुस्तकालयों बाहर हैं. नकली. नकली है महान काम करता है. तो क्यों एक और उपकरण बनाने के लिए?
यह औजार विशिष्ट चुनौतियों को हल करता है:
यह एक विशिष्ट कार्य फूल के लिए बनाया जाता है: जब आपको विविध, यथार्थ डेटा की आवश्यकता होती है तो वास्तविक समय यूआई बनाना.
इस औज़ार को समझने का सबसे अच्छा तरीका है इसका उपयोग करना:
dotnet run --project LLMApihttp://localhost:5116वहाँ से, एक विवरण के साथ अपने संदर्भ बनाने की कोशिश करें जो आपके परियोजना की जरूरत से मेल खाता है. यह उपकरण सबसे मूल्यवान है जब आप इसे असली विकास कार्य के लिए इस्तेमाल करते हैं.
मैंने इसे बनाया क्योंकि मैं एक ही समस्या में चला रहा था: यथार्थवादी, डेमो और विकास के लिए डाटा बदलने की जरूरत है. यदि आप इस चुनौती का सामना भी करते हैं, तो आशा है कि यह उपकरण आपके कार्य प्रवाह को मदद करता है.
आरंभ कर रहा है:
dotnet run --project LLMApi
डिफ़ॉल्ट यूआरएल: http://localhost:5116
सिग्नलआर हब: /hub/mock
कुंजी विधि:
SubscribeToContext(name) - प्राप्त डाटा प्रारंभ करेंUnsubscribeFromContext(name) - प्राप्त डाटा प्राप्त करना रोकेंकुंजी घटनाएँ:
DataUpdate - नया डाटा आयाSubscribed - सदस्यता पुष्टि की पुष्टि की गईUnsubscribed - बिना किसी कड़ी की पुष्टि कीयही कारण है कि जो कुछ तुम्हें जानने की ज़रूरत है, बाकी बस सोच रही है कि आप इसके साथ क्या निर्माण कर सकते हैं।
© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.