Aplicación ASP.NET Core en tiempo real con SignalR
SignalR es una biblioteca para desarrolladores ASP.NET que simplifica el proceso de agregar funcionalidad web en tiempo real a las aplicaciones. La funcionalidad web en tiempo real es la posibilidad de que el código de servidor inserte el contenido en los clientes conectados al instante a medida que este disponible, en lugar de que el servidor espere a que un cliente solicite nuevos datos.
Para poner en practica el uso que podemos hacer de SignalR, realizaremos una aplicación de chat simple en el que nos comunicaremos en tiempo real entre dos exploradores distintos:
En primer lugar crearemos un nuevo proyecto que será:
– ASP.NET Core Web Application (C#).
– Utilizaremos la plantilla MVC (Model-View-Controller).
– Le daremos el nombre que queramos que tenga nuestro proyecto.
Una vez hemos creado el proyecto, en el explorador de soluciones, agregaremos una nueva biblioteca del lado cliente (Add Client-Side Library) con la configuración que vemos a continuación:
Después de que se añadan los archivos correspondientes que nos proporciona Microsoft de SignalR, crearemos una carpeta llamada Hubs, donde tendremos la clase ChatHub con el siguiente código:
La herencia Hub se encarga de administrar las conexiones, los grupos y la mensajeria.
El metodo se encarga de enviar el mensaje a todos los clientes conectados. Podremos ver como lo hace mas adelante…
En la carpeta Model, añadiremos la clase Mensaje con el siguiente código:
A continuación, lo siguiente que configuraremos será el Startup.cs, tendremos que añadir las siguientes dos líneas de código:
– En ConfigureServices añadiremos: services.AddSignalR() . Para ello tendremos que añadir el using SignalRChat.Hubs.
– Donde se encuentran los EndPoints, añadiremos el siguiente: endpoints.MapHub<ChatHub>(«/chathub»).
Lo próximo será añadir en wwwroot/js un nuevo archivo llamado chat.js con el siguiente código:
Este código que acabamos de añadir crea una conexión, agrega al botón enviar un controlador que envía mensajes a chathub y agrega al objeto de conexión un controlador que recibe mensajes desde chathub y los agrega a la lista que motrará todos.
Para finalizar crearemos la vista con dos input para recoger el usuario y el mensaje a mandar, un botón para enviar el mensaje y la lista para mostrar todos los mensajes:
Con esto ya tendremos la aplicación preparada para ejecutar y probar. Si abrimos esta desde dos navegadores podremos simular un chat en tiempo real tal y como queríamos conseguir:
Autor/a: Javier Ruano Manzanares
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Código / recursos utilizados / Otros datos de interés: https://github.com/JaviRM17/PostSignalR/tree/master/PostSignalR