Crear un chat con SignalR en ASP.Net Core
¿Te gustaría implementar un chat en tu proyecto de ASP.NET CORE?
Entonces te enseñaré como implementar un chat simple usando SignalR tanto en servidor como en cliente en un proyecto de ASP.NET CORE MVC (Model – View – Controller).
TECNOLOGÍAS
ASP.NET CORE
ASP.NET Core es un Framework web de código abierto y que tiene un mayor rendimiento que ASP.NET. Está desarrollado por Microsoft y su comunidad y tiene la finalidad de compilar aplicaciones modernas conectadas a internet y habilitadas a la nube.
SignalR
SignalR es una biblioteca que tiene la finalidad de poder enviar notificaciones asíncronas del servidor a las aplicaciones del lado de cliente, en otras palabras, el poder usar funcionalidades web en tiempo real y colocar nuevo contenido al instante a los clientes conectados
PROYECTO
Para crear este proyecto, se deberá hacer desde Visual Studio 2019 y elegir «ASP.NET Core Web App (Model-View-Controller)»
Y también tener la versión del Framework a «.NET 5.0 (Current)»
Tras la creación del proyecto, debemos implementar SignalR del lado del Cliente, ya que del lado del servidor ya esta implementado de forma predeterminada, para ello desde el proyecto click derecho -> Add -> Client-Side Library...
Y en la ventana que nos abra, debemos cambiar el Provider a «unpkg», después escribiremos «@microsoft/signalr@6.0.1» que es la versión que he usado en el proyecto. Y por ultimo lo instalamos.
Una vez instalado crearemos una clase en el proyecto llamado «ChatHub«.
Esta clase heredará de «Hub» y usaremos el «using Microsoft.AspNetCore.SignalR«. Además de añadir dos métodos asíncronos que se encargaran de, por una parte enviar el mensaje y la otra se encargará de añadirnos al grupo.
Después de crear la clase ChatHub.cs, debemos configurar el archivo Startup.cs y decirle al proyecto que debe usar SignalR. Para ello en el método «ConfigureServices» añadiremos «services.AddSignalR()«
Y por último, dentro del método «Configure«, en la zona de «app.UseEndpoints» añadiremos un «endpoint» para la ruta de «/Chat» con la clase «ChatHub» que creamos anteriormente.
Después, en la carpeta de Controllers, añadiremos un archivo «Controller…» y lo llamaremos ChatsController.
Después añadiremos un Dictionary que es una colección que nos permite guardar datos en forma de «Clave – Valor«, de esta manera simularemos una tabla de una base de datos que tenga los grupos a los cuales nos conectaremos.
También añadiremos dos métodos que nos retornan un IActionResult, es decir, nos retornará a una vista. En «ListaDeChats()» es donde retornaremos a una vista con la lista del Dictionary para mostrar los grupos y por ultimo en «Chat(int idChat)» recibiremos una Key que habremos seleccionado de la lista de Grupos y retornara una vista con esa misma Key.
Después del controlador, crearemos primero la vista de ListaDeChats(), para ello click derecho en la función -> Add View…
Y seleccionaremos «Razor View – Empty«
IMPORTANTE!!! -> El nombre de archivo debe ser idéntico al nombre del metodo
Tras crear la vista, añadiremos el «@model Dictionary<int, string>» ya que es lo que le mandamos en el controlador a la vista, y después creamos una lista con el @foreach que es un bucle que creara las etiquetas <li> con un enlace al controlador Chats, a la vista Chat y le mandaremos un parámetro llamado idChat.
Después crearemos la vista de Chat de la misma manera que hicimos con ListaDeChats(). Tras crear la vista, añadiremos dos inputs, donde pondremos nuestro nombre y el mensaje, y un botón que se encargará de mandar el mensaje. Además de crear una zona donde se mostrarás los mensajes
Ahora añadiremos el script de SignalR del lado de cliente que instalamos al inicio del proyecto
Además de crear un «@section Scripts» donde crearemos un script para configurar el funcionamiento de SignalR. PRIMERO, debemos crear el objeto de conexión y poner la ruta que pusimos en el endpoint dentro del archivo de «startup.cs«, que en este proyecto era «/Chats«. Después iniciaremos la conexión y mediante el método de «invoke«, llamaremos al método asíncrono llamado «AddToGroup» que habíamos creado en la clase «ChatHub.cs«, para que nos una al grupo que hemos seleccionado en la vista «ListaDeChats«.
SEGUNDO, crearemos el evento click del botón para que cuando pulse, recoja los datos del inputs, que son el nombre de usuario y el mensaje, y los mande al método «SendMessage«, el cual lo llamaremos mediante el método «invoke» que tiene conexión. Después limpiamos el input del mensaje, le hacemos focus y por último, usamos «e.preventDefault()» para que la página no se recargue.
TERCERO, y último paso es decirle a la conexión, que cuando este activo y reciba el mensaje, que cree la etiqueta con los datos que se enviaron anteriormente al pulsar en el botón.
El método «RecibirMensaje» se recibe cuando al pulsar el botón se invoca el método «SendMessage» quién manda este método «RecibirMensaje» con los parámetros de user y mensaje
Lo último que deberás hacer y para poder probarlo es crear un enlace en el archivo «_Layout.cshtml» que esta dentro de la carpeta «Views/Shared«
Autor/a: Braian Oscar Loza Quiroga
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código / recursos utilizados / Otros datos de interés: https://github.com/MsrBrownie06/Posts