asp net server events example

الأحداث المرسلة من الخادم مع الواجهة الخلفية لـ ASP.Net Core

مثال صغير على استخدام الأحداث المرسلة لخادم HTML في واجهة برمجة تطبيقات الويب الأساسية لـ ASP.Net.

عداد عن بعد

التطبيق عبارة عن عداد يزداد تلقائيا كل ثانية. يمكن للمستخدم إيقاف العداد مؤقتًا أو استئنافه، أو ضبطه على قيمة معينة.

يتم تخزين العداد في الذاكرة على الخادم. سيتم نشر التغييرات في جلسة المتصفح إلى جميع الجلسات المفتوحة الأخرى.

الأحداث المرسلة من الخادم

الأحداث المرسلة من الخادم هي واجهة برمجة تطبيقات ويب تسمح لك بدفع الرسائل من الخادم إلى JavaScript باستخدام تدفقات HTTP.

ليست هذه هي الطريقة الوحيدة لدفع الرسائل من الخادم، ولكنها بالتأكيد طريقة سهلة وأنيقة للغاية.

كود Javascript الذي يستهلك أحداث الخادم المرسلة موجود في الملفstream.js ويبدو كما يلي:

 function readStream()
{
    const evtSource = new EventSource('/Counter/Stream');
    evtSource.onmessage = function(event) {
        const el = document.getElementById('counter');
        const { value } = JSON.parse(event.data);
        
        el.textContent = value;
    }
}

الواجهة الخلفية لـ ASP.Net الأساسية

يحتوي هذا المستودع على تطبيق ويب صغير مستقل يمكن استخدامه كمرجع أو كرمز معياري لاستخدام الأحداث المرسلة من الخادم مع الواجهة الخلفية لـ ASP.Net Core.

يمكن العثور على تنفيذ نقطة نهاية دفق HTTP في CounterController.cs ويبدو كما يلي. إنه مقتبس من إجابة StackOverflow .

 [HttpGet]
[Route("Stream")]
public async Task StreamCounter(CancellationToken cancellationToken)
{
    _logger.LogInformation("Start counter streaming.");

    Response.StatusCode = 200;
    Response.Headers.Add("Content-Type", "text/event-stream");

    _counter.CounterUpdated += StreamValue;

    while (!cancellationToken.IsCancellationRequested) {
        await Task.Delay(1000);
    }

    _counter.CounterUpdated -= StreamValue;
    _logger.LogInformation("Stop counter streaming.");

    async void StreamValue(object sender, int value)
    {
        var messageJson = JsonConvert.SerializeObject(_counter, _jsonSettings);
        await Response.WriteAsync($"data:{messageJson}nn");
        await Response.Body.FlushAsync();
    }
}

يتم تخزين الحالة (العداد) في خدمة PersistentCounter الفردية.

تقوم الخدمة بتشغيل حدث في كل مرة يتم فيها تحديث قيمة العداد. تشترك وحدة التحكم في هذا الحدث وتدفع القيمة الجديدة للعميل بعد كل تغيير.

كيفية الجري

لتشغيل التطبيق، ما عليك سوى كتابة الأوامر التالية في المجلد الرئيسي للمستودع:

 dotnet build
dotnet run

تأكد من تثبيت .NET 5 SDK من قبل.

افتح المتصفح وانتقل إلى https://localhost:5001 .

سوف تحصل على خطأ في الشهادة، لأنني لا أستخدم شهادة مسجلة صالحة.

تحفيز

ما يلي هو مجرد بعض المعلومات الأساسية التي توفر بعض السياق. لا تحتاج إلى قراءتها لفهم الكود.

نقل تطبيق سطح المكتب إلى الويب

يعد هذا المستودع جزءًا صغيرًا من إثبات المفهوم حول كيفية نقل تطبيق سطح المكتب الموجود إلى تطبيق ويب.

من المحتمل أن يكون استخدام ASP.Net للواجهة الأمامية هو الطريقة الأسهل للقيام بذلك. ومع ذلك، أنا حقًا أحب React/Redux لتطوير الويب ولدي أيضًا خبرة أكبر في استخدامه مقارنة بـ ASP. لذلك قررت استخدام ASP للواجهة الخلفية REST واستخدام React للواجهة الأمامية.

يستخدم تطبيق .Net الاصطلاحي نمط الحدث بشكل كبير.

فكرتي هي كتابة نوع من البرامج الوسيطة، التي تشترك في جميع الأحداث التي يتم إنتاجها داخل التطبيق، وتسلسلها إلى JSON، ودفعها إلى العميل باستخدام Server Sent Events .

سوف يتفاعل العميل مع الأحداث من خلال إرسال بعض إجراءات Redux، والتي ستقوم بتحديث حالة الواجهة الأمامية.

ستعرض الواجهة الخلفية نقاط نهاية REST لجميع التفاعلات الأخرى مع الواجهة الأمامية. لا شيء خاص حول ذلك.

ستلعب البرامج الوسيطة نفس الدور الذي تلعبه الخدمة الفردية PersistentCounter في هذا المستودع.

يستخدم هذا المستودع جافا سكريبت الفانيليا العادي فقط. لا يوجد رد فعل أو Redux. هدفي هنا هو فقط تقييم دفع الرسائل عبر تدفقات HTTP. الواجهة الأمامية ليست ذات صلة.