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

أو عبر Package Manager Console في Visual Studio:

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: تسجيل SignalR في Program.cs

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</title>
</head>
<body>
    <h2>دردشة SignalR</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));

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