SignalR C# (.NET) पूरी गाइड: उदाहरण और ट्यूटोरियल

SignalR क्या है और इसकी आवश्यकता क्यों है?

SignalR, ASP.NET Core के लिए एक लाइब्रेरी है जो वेब एप्लिकेशन में रियल-टाइम (real-time) सुविधाएँ जोड़ना आसान बनाती है। यह सर्वर को कनेक्टेड क्लाइंट (ब्राउज़र, मोबाइल ऐप, डेस्कटॉप ऐप) पर तुरंत डेटा भेजने की अनुमति देता है, बिना क्लाइंट द्वारा बार-बार अनुरोध किए।

इसकी आवश्यकता क्यों है? पारंपरिक HTTP प्रोटोकॉल "अनुरोध-प्रतिक्रिया" सिद्धांत पर काम करता है: क्लाइंट अनुरोध भेजता है, सर्वर जवाब देता है। अपडेट प्राप्त करने के लिए क्लाइंट को लगातार सर्वर से पूछताछ (polling) करनी पड़ती है। यह अक्षम है और देरी पैदा करता है। SignalR एक स्थायी द्विदिश कनेक्शन प्रदान करके इस समस्या को हल करता है।

मुख्य उपयोग के मामले:

• चैट और मैसेंजर (संदेशों की तत्काल डिलीवरी)
• मॉनिटरिंग पैनल और डैशबोर्ड (मुद्रा दरों, स्टॉक कोट्स का अपडेट)
• सहयोगात्मक दस्तावेज़ संपादन (Google Docs जैसा)
• रियल-टाइम सूचनाएँ (नए ऑर्डर, अलर्ट)
• मल्टीप्लेयर गेम
• लंबी प्रक्रियाओं की प्रगति (फ़ाइल अपलोड, डेटा प्रोसेसिंग)

SignalR कनेक्शन के लिए स्वचालित रूप से सबसे अच्छा ट्रांसपोर्ट प्रोटोकॉल चुनता है:

• WebSocket — सबसे कुशल, स्थायी द्विदिश कनेक्शन
• Server-Sent Events (SSE) — सर्वर से क्लाइंट तक एकतरफा ट्रांसमिशन
• Long Polling — फ़ॉलबैक तंत्र, यदि WebSocket और SSE उपलब्ध नहीं हैं

SignalR की स्थापना (इंस्टॉलेशन)

सर्वर पर स्थापना (ASP.NET Core)

सर्वर साइड के लिए NuGet पैकेज का उपयोग किया जाता है। टर्मिनल में निष्पादित करें:

dotnet add package Microsoft.AspNetCore.SignalR

या Visual Studio में Package Manager Console के माध्यम से:

Install-Package Microsoft.AspNetCore.SignalR

JavaScript क्लाइंट (ब्राउज़र) के लिए स्थापना

क्लाइंट साइड (ब्राउज़र) के लिए npm का उपयोग करें:

npm install @microsoft/signalr

या CDN के माध्यम से कनेक्ट करें:

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>

.NET (C#) क्लाइंट के लिए स्थापना

C# क्लाइंट (जैसे, कंसोल एप्लिकेशन या WPF) के लिए:

dotnet add package Microsoft.AspNetCore.SignalR.Client

त्वरित शुरुआत: "Hello, World!" उदाहरण

एक सरल चैट बनाते हैं: सर्वर एक संदेश प्राप्त करता है और इसे सभी कनेक्टेड क्लाइंट को भेजता है।

चरण 1: Hub बनाएं (सर्वर साइड)

एक फ़ाइल ChatHub.cs बनाएं:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            // सभी कनेक्टेड क्लाइंट को संदेश भेजें
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

चरण 2: Program.cs में SignalR रजिस्टर करें

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// SignalR जोड़ें
builder.Services.AddSignalR();

var app = builder.Build();

app.MapGet("/", () => "Hello World!");

// Hub को /chatHub पथ पर मैप करें
app.MapHub<ChatHub>("/chatHub");

app.Run();

चरण 3: क्लाइंट बनाएं (HTML + JavaScript)

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Chat</title>
</head>
<body>
    <h2>SignalR Chat</h2>
    <div>
        <input type="text" id="userInput" placeholder="आपका नाम" />
        <input type="text" id="messageInput" placeholder="संदेश" />
        <button onclick="sendMessage()">भेजें</button>
    </div>
    <ul id="messagesList"></ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chatHub")
            .build();

        connection.on("ReceiveMessage", (user, message) => {
            const li = document.createElement("li");
            li.textContent = `${user}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.start().catch(err => console.error(err.toString()));

        function sendMessage() {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
        }
    </script>
</body>
</html>