asp net server events example
1.0.0
Um pequeno exemplo de uso de eventos enviados pelo servidor HTML em uma API web principal do ASP.Net.
O aplicativo é um contador que aumenta automaticamente a cada segundo. O usuário pode pausar ou retomar o contador ou configurá-lo para um determinado valor.
O contador é armazenado na memória do servidor. As alterações em uma sessão do navegador serão propagadas para todas as outras sessões abertas.
Server Sent Events é uma API da Web que permite enviar mensagens de um servidor para JavaScript usando HTTP Streams.
Esta não é a única maneira de enviar mensagens de um servidor, mas é certamente fácil e também bastante elegante.
O código Javascript que consome os eventos enviados pelo servidor está no arquivo stream.js e tem a seguinte aparência:
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;
}
}
Este repositório contém um pequeno aplicativo da web independente que pode ser usado como referência ou como código padrão, para usar eventos enviados pelo servidor com backend ASP.Net Core.
A implementação do endpoint de streaming HTTP pode ser encontrada em CounterController.cs e tem a seguinte aparência. É adaptado desta resposta do 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();
}
}
O estado (contador) é armazenado no serviço singleton PersistentCounter.
O serviço aciona um evento sempre que o valor do contador é atualizado. O controlador assina este evento e envia o novo valor ao cliente após cada alteração.
Para executar a aplicação basta digitar os seguintes comandos na pasta principal do repositório:
dotnet build
dotnet run
Certifique-se de ter instalado o SDK do .NET 5 antes.
Abra um navegador e navegue até https://localhost:5001 .
Você receberá um erro de certificado, pois não estou usando um certificado registrado válido.
A seguir estão apenas algumas informações básicas que fornecem algum contexto. Você não precisa lê-lo para entender o código.
Este repositório é uma pequena parte de uma prova de conceito sobre como portar um aplicativo de desktop existente para um aplicativo da web.
Usar ASP.Net para frontend provavelmente seria a maneira mais fácil de fazer isso. Porém, gosto muito do React/Redux para desenvolvimento web e também tenho mais experiência com ele do que com ASP. Então decidi usar ASP para REST Backend e React para frontend.
O aplicativo idiomático .Net faz um grande uso do padrão de evento.
Minha ideia é escrever algum tipo de middleware, que assine todos os eventos produzidos dentro do aplicativo, serialize-os para JSON e envie-os para o cliente usando Server Sent Events .
O cliente reagirá aos eventos despachando algumas ações Redux, que atualizarão o estado do frontend.
O back-end exporá os endpoints REST para todas as outras interações com o front-end. Nada de especial nisso.
O middleware desempenhará a mesma função que o serviço singleton PersistentCounter neste repositório.
Este repositório usa apenas JavaScript simples. Sem reação ou redux. Meu objetivo aqui é apenas avaliar o envio de mensagens por meio de fluxos HTTP. O frontend não é relevante.
