asp net server events example

เหตุการณ์ที่เซิร์ฟเวอร์ส่งด้วยแบ็กเอนด์ ASP.Net Core

ตัวอย่างเล็กๆ น้อยๆ เกี่ยวกับการใช้ HTML Server Sent Events ใน ASP.Net core web API

เคาน์เตอร์ระยะไกล

แอปพลิเคชั่นเป็นตัวนับที่เพิ่มขึ้นโดยอัตโนมัติทุกวินาที ผู้ใช้สามารถหยุดชั่วคราวหรือเริ่มนับต่อ หรือตั้งค่าเป็นค่าที่กำหนด

ตัวนับถูกเก็บไว้ในหน่วยความจำบนเซิร์ฟเวอร์ การเปลี่ยนแปลงในเซสชันของเบราว์เซอร์จะเผยแพร่ไปยังเซสชันที่เปิดอื่นๆ ทั้งหมด

เหตุการณ์ที่เซิร์ฟเวอร์ส่ง

Server Sent Events คือ Web API ที่ช่วยให้คุณสามารถส่งข้อความจากเซิร์ฟเวอร์ไปยัง JavaScript โดยใช้ HTTP Streams

นี่ไม่ใช่วิธีเดียวในการส่งข้อความจากเซิร์ฟเวอร์ แต่เป็นวิธีที่ง่ายและยังค่อนข้างสวยงามอีกด้วย

รหัส 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 Core

พื้นที่เก็บข้อมูลนี้มีเว็บแอปพลิเคชันขนาดเล็กในตัวเองที่สามารถใช้เป็นข้อมูลอ้างอิงหรือเป็นโค้ดสำเร็จรูป สำหรับการใช้เหตุการณ์ที่เซิร์ฟเวอร์ส่งด้วยแบ็กเอนด์ 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 Backend และใช้ React สำหรับส่วนหน้า

แอปพลิเคชั่นสำนวน .Net ใช้ประโยชน์จากรูปแบบเหตุการณ์อย่างมาก

ความคิดของฉันคือการเขียนมิดเดิลแวร์บางประเภทซึ่งสมัครรับเหตุการณ์ทั้งหมดที่ผลิตภายในแอปพลิเคชัน ทำให้เป็นอนุกรมไปยัง JSON และพุชไปยังไคลเอนต์โดยใช้ Server Sent Events

ลูกค้าจะตอบสนองต่อเหตุการณ์โดยส่งการดำเนินการ Redux บางอย่าง ซึ่งจะอัปเดตสถานะส่วนหน้า

แบ็กเอนด์จะเปิดเผยตำแหน่งข้อมูล REST สำหรับการโต้ตอบอื่นๆ ทั้งหมดกับส่วนหน้า ไม่มีอะไรพิเศษเกี่ยวกับเรื่องนั้น

มิดเดิลแวร์จะมีบทบาทเหมือนกับบริการ PersistentCounter แบบซิงเกิลตันในพื้นที่เก็บข้อมูลนี้

พื้นที่เก็บข้อมูลนี้ใช้เฉพาะ JavaScript วานิลลาธรรมดาเท่านั้น ไม่มีปฏิกิริยาหรือ Redux จุดประสงค์ของฉันที่นี่คือเพื่อประเมินข้อความพุชผ่านสตรีม HTTP เท่านั้น ส่วนหน้าไม่เกี่ยวข้อง