Comunicación en Tiempo Real - SignalR NetCore(Backend) con Ionic-vue(Frontend) - Parte I

En esta oportunidad estaremos aprendiendo como poder crear aplicaciones que se puedan comunicar en tiempo real desde el backend y el fronted.

Para este ejemplo Desarrollaremos una Api usando Net Core 5, para la persistencia de datos estaremos usando una Base de datos SQLite y del lado del Frontend estaremos usando Ionic-vue para consumir la api y poder actualizar la información en tiempo real usando  SignalR.

Esta será la primera parte en la cual estaremos realizando el backend.

Lo primero que aremos será crear un nuevo proyecto en visual studio tipo ASP.NET CORE Web Api al cual nombrare Products.Api

 Elegimos la plataforma .NET 5.0

Lo siguiente que aremos será instalar los siguientes paquetes Nuget para poder usar EF con SQLite

dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.EntityFrameworkCore.Tools

Crearemos nuestra clase modelo que representa nuestra tabla en  sqlite. Así que creamos una carpeta Models y dentro de esta creemos una clase llama Product

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public Decimal Price { get; set; }
    }

Siempre dentro de la carpeta Models creemos nuestra clase context que nos servirá para poder generar nuestra db

    public class ProductContext : DbContext
    {
        public DbSet<Product> Products { get; set; }

        public ProductContext(DbContextOptions<ProductContext> options) : base(options)
        {

        }
    }

Dentro del archivo appsettings.json crearemos un ConnectionStrings e indicamos el nombre que tendrá nuestro db

  "ConnectionStrings": {
    "AppConnection": "DataSource=products.db;"
  },

Registramos el contexto en la clase Startup en el método ConfigureServices.

           services.AddDbContext<ProductContext>(options =>
                options.UseSqlite(Configuration.GetConnectionString("AppConnection")));

Creamos la migración inicial(deben tener instalado el cli de netcore dotnet tool install --global dotnet-ef)

Generamos la db

Configuremos SignalR crea una carpeta llamada Hubs y dentro crea una clase llamada ProductHub

    public class ProductHub : Hub
    {
        public async Task SendMyEvent()
        {
            await Clients.All.SendAsync("MyEvent");
        }
    }

Nuevamente en la clase Startup en el método ConfigureServices agregamos el servicio de SignalR 

services.AddSignalR();

Siempre en la clase Startup pero en el método Configure agregamos la configuración de SignalR, y también aprovechemos y agregamos la configuración de los cors.

            // global cors policy
            app.UseCors(x => x
                .AllowAnyMethod()
                .AllowAnyHeader()
                .SetIsOriginAllowed(origin => true) // allow any origin
                .AllowCredentials()); // allow credentials

            app.UseAuthorization();

            //endpoint hub signalR
            app.UseEndpoints(endpoints => endpoints.MapHub<ProductHub>("/product-hub"));

Creamos un controlador Product 

    [Route("api/[controller]")]
    [ApiController]
    public class ProductController : ControllerBase
    {
        private readonly ProductContext _context;
        private readonly IHubContext<ProductHub> _hubContext;

        public ProductController(ProductContext context, IHubContext<ProductHub> hubContext)
        {
            _context = context;
            _hubContext = hubContext;
        }

        [HttpGet]
        public async Task<ActionResult<List<Product>>> Get()
        {

            return await _context.Products.ToListAsync();
        }
        [HttpPost]
        public async Task<ActionResult> Post(Product product)
        {
            _context.Products.Add(product);
            await _context.SaveChangesAsync();
            await _hubContext.Clients.All.SendAsync("NewProduct", product);

            return Ok(product);
        }
    }

Como podrán notar es un controlador simple que solo cuenta con 2 peticiones una petición Get que obtendrá todos los productos y otra petición Post que agregara productos y dentro de esta hacemos uso de la clase Hub que creamos anteriormente y haciendo uso del método SendAsync que nos proporciona la librería de SignalR le pasamos el nombre del método(NewProduct) que usaremos en el frontend para obtener la información en tiempo real del producto agregado(product)

Nuestra api con signalr esta lista

puedes descargar el código desde este repositorio

En el próximo articulo estaremos creando el frontend y consumiendo la api.

si quieren donarme para una café lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador...