asp net server events example

ASP.Net Core 백엔드를 사용하여 서버에서 이벤트 전송

ASP.Net 핵심 웹 API에서 HTML 서버 전송 이벤트를 사용하는 간단한 예입니다.

원격 카운터

응용 프로그램은 매초마다 자동으로 증가하는 카운터입니다. 사용자는 카운터를 일시 중지 또는 재개하거나 지정된 값으로 설정할 수 있습니다.

카운터는 서버의 메모리에 저장됩니다. 브라우저 세션의 변경 사항은 열려 있는 다른 모든 세션에 전파됩니다.

서버 전송 이벤트

서버 전송 이벤트는 HTTP 스트림을 사용하여 서버에서 JavaScript로 메시지를 푸시할 수 있는 웹 API입니다.

이것이 서버에서 메시지를 푸시하는 유일한 방법은 아니지만 확실히 쉽고 매우 우아한 방법입니다.

서버에서 보낸 이벤트를 사용하는 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();
    }
}

상태(카운터)는 싱글톤 서비스 PertantCounter에 저장됩니다.

서비스는 카운터 값이 업데이트될 때마다 이벤트를 트리거합니다. 컨트롤러는 이 이벤트를 구독하고 각 변경 후에 새 값을 클라이언트에 푸시합니다.

달리는 방법

애플리케이션을 실행하려면 저장소의 기본 폴더에 다음 명령을 입력하기만 하면 됩니다.

 dotnet build
dotnet run

이전에 .NET 5 SDK를 설치했는지 확인하세요.

브라우저를 열고 https://localhost:5001 로 이동합니다.

유효한 등록 인증서를 사용하지 않기 때문에 인증서 오류가 발생합니다.

동기 부여

다음은 몇 가지 맥락을 제공하는 몇 가지 배경 정보입니다. 코드를 이해하기 위해 읽을 필요는 없습니다.

데스크톱 애플리케이션을 웹으로 포팅

이 저장소는 기존 데스크톱 애플리케이션을 웹 애플리케이션으로 이식하는 방법에 대한 개념 증명의 작은 부분입니다.

프런트엔드에 ASP.Net을 사용하는 것이 아마도 가장 쉬운 방법일 것입니다. 하지만 저는 웹 개발을 위해 React/Redux를 정말 좋아하고 ASP보다 React/Redux에 대한 경험도 더 많습니다. 그래서 REST 백엔드에는 ASP를 사용하고 프론트엔드에는 React를 사용하기로 결정했습니다.

관용적인 .Net 애플리케이션은 이벤트 패턴을 크게 활용합니다.

내 생각은 애플리케이션 내부에서 생성된 모든 이벤트를 구독하고 이를 JSON으로 직렬화한 다음 Server Sent Events를 사용하여 클라이언트에 푸시하는 일종의 미들웨어를 작성하는 것입니다.

클라이언트는 프런트엔드 상태를 업데이트하는 일부 Redux 작업을 전달하여 이벤트에 반응합니다.

백엔드는 프런트엔드와의 다른 모든 상호 작용을 위해 REST 엔드포인트를 노출합니다. 그것에 대해 특별한 것은 없습니다.

미들웨어는 이 리포지토리의 싱글톤 서비스 PertantCounter와 동일한 역할을 수행합니다.

이 저장소는 일반 바닐라 JavaScript만 사용합니다. React나 Redux가 없습니다. 여기서 나의 목적은 HTTP 스트림을 통한 푸시 메시지를 평가하는 것뿐입니다. 프론트 엔드는 관련이 없습니다.