asp net server events example
1.0.0
Un pequeño ejemplo sobre el uso de eventos enviados del servidor HTML en una API web central de ASP.Net.
La aplicación es un contador que aumenta automáticamente cada segundo. El usuario puede pausar o reanudar el contador, o configurarlo en un valor determinado.
El contador se almacena en la memoria del servidor. Los cambios en una sesión del navegador se propagarán a todas las demás sesiones abiertas.
Server Sent Events es una API web que le permite enviar mensajes desde un servidor a JavaScript mediante secuencias HTTP.
Esta no es la única forma de enviar mensajes desde un servidor, pero ciertamente es fácil y también bastante elegante.
El código Javascript que consume los eventos enviados por el servidor se encuentra en el archivo stream.js y tiene el siguiente aspecto:
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 repositorio contiene una pequeña aplicación web independiente que se puede usar como referencia o como código repetitivo, para usar eventos enviados por el servidor con el backend ASP.Net Core.
La implementación del punto final de transmisión HTTP se puede encontrar en CounterController.cs y tiene el siguiente aspecto. Está adaptado de esta respuesta de 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();
}
}
El estado (contador) se almacena en el servicio singleton PersistentCounter.
El servicio desencadena un evento cada vez que se actualiza el valor del contador. El controlador se suscribe a este evento y envía el nuevo valor al cliente después de cada cambio.
Para ejecutar la aplicación simplemente escriba los siguientes comandos en la carpeta principal del repositorio:
dotnet build
dotnet run
Asegúrese de haber instalado el SDK de .NET 5 antes.
Abra un navegador y navegue hasta https://localhost:5001 .
Recibirá un error de certificado, ya que no estoy usando un certificado registrado válido.
Lo siguiente es sólo alguna información general que proporciona algo de contexto. No es necesario leerlo para comprender el código.
Este repositorio es una pequeña parte de una prueba de concepto sobre cómo migrar una aplicación de escritorio existente a una aplicación web.
Usar ASP.Net para la interfaz probablemente sería la forma más sencilla de hacerlo. Sin embargo, me gusta mucho React/Redux para el desarrollo web y también tengo más experiencia con él que con ASP. Entonces decidí usar ASP para el backend REST y usar React para el frontend.
La aplicación Idiomatic .Net hace un gran uso del patrón de eventos.
Mi idea es escribir algún tipo de middleware, que se suscriba a todos los eventos producidos dentro de la aplicación, los serialice en JSON y los envíe al cliente mediante Server Sent Events .
El cliente reaccionará a los eventos enviando algunas acciones de Redux, que actualizarán el estado de la interfaz.
El backend expondrá los puntos finales REST para todas las demás interacciones con el frontend. No hay nada especial en eso.
El middleware desempeñará el mismo papel que el servicio singleton PersistentCounter en este repositorio.
Este repositorio utiliza sólo JavaScript básico. Sin reaccionar ni Redux. Mi propósito aquí es solo evaluar el envío de mensajes a través de flujos HTTP. La interfaz no es relevante.
