CHAT CON SIGNALR

¿QUÉ ES SIGNALR Y CUÁL ES SU FUNCIONALIDAD?

SignalR de ASP.NET es una biblioteca para los desarrolladores que simplifica el proceso de agregar funcionalidad web en tiempo real a las aplicaciones como bien puede ser un chat cliente servidor.

INSTALACIÓN EN UN PROYECTO

Para poder implementarlo esta librería en nuestro proyecto deberemos crearnos un proyecto desde cero de ASP .NET Core Web App, una vez creado el proyecto con clic derecho sobre el proyecto iremos al apartado donde pone Add, y dentro de este pulsaremos en Client-Side Library…

Tras pulsarlo nos saldrá la siguiente pantalla en la cual deberemos colocar los datos correctos.

En Providers deberemos añadir que somos de tipo unpkg, y en el apartado de Library deberemos añadir el siguiente texto: ​@microsoft/signalr@6.0.6
Tras añadir el primero que nos salga pulsaremos en install.

Si después de añadir la librería queremos ver donde se encuentra iremos a la carpeta wwwroot y dentro de lib encontraremos una carpeta llamada Microsoft, ahí encontraremos la librería añadida y todos los datos de esta.

A continuación deberemos ir a la clase Program.cs para poder añadir lo necesario que hará funcional la librería en nuestro proyecto.

Añadiremos un builder.Services.AddSignalR() debajo de la creación del builder que estará creado de antemano.

Después crearemos una clase llamada ChatHub.cs dentro de nuestro proyecto, a esta clase deberemos ponerla que es de tipo :Hub, esto añadirá el siguiente using:

using Microsoft.AspNetCore.SignalR;

En esta clase habrá dos métodos:

• El primero llamado SendMessage a la cual le pasamos tres valores, el nombre del usuario, el mensaje que envía y el id de la sala en la que se encuentra, lo añadiremos a un .Group que nos permitirá enviar un mensaje de forma asíncrona a un grupo determinado.
• El segundo será AddToGroup al cual le enviaremos el nombre de la sala y lo único que hará será añadir a una persona a una sala.

Tras añadir esta clase con sus métodos volveremos a Program.cs y añadiremos encima de app.run(); un nuevo código:

app.MapHub<ChatHub>(«/Chats»);

Esto hará un contenedor de clave-valor que recorra ChatHub y muestre los datos en Chats.

Una vez hemos añadido lo anterior iremos a la carpeta Controllers dentro del proyecto y pulsando sobre ella con clic derecho añadiremos un nuevo Controller al cual llamaremos ChatController.cs

Dentro de ChatController.cs crearemos un Dictionary el cual también añade datos tipo clave-valor. 

En este Dictionary añadiremos una serie de datos al cual le daremos un id y un nombre, el id se relacionara con la clave y el nombre con el valor.

También añadiremos dos Vistas nuevas una llamada ListaChats() la cual mostrara una lista del Dictionary anteriormente creado y otra llamada Chat() a la cual le pasaremos el id del chat o la sala , esta Vista mostrara los mensajes que se recibirá en esa sala y la persona que lo ha enviado.

Después deberemos crear las vistas anteriormente añadidas en el ChatController.cs, pero esta vez dentro de la carpeta de Views que se encuentra dentro del proyecto, primero crearemos una carpeta dentro de Views que se llame igual que el Controller es decir, Chat , dentro de la carpeta Chat añadiremos ambas vistas , pulsando clic derecho sobre esta, iremos a Add y a View…, elegiremos la primera opción y le deberemos de dar el mismo nombre que tenia la vista dentro de ChatController.cs, es decir las llamaremos Chat.cshtml y ListaChats.cshtml.

Dentro de la vista de ListaChats.cshtml añadiremos el @model de Dictionary  y recorreremos con un foreach del Model los datos que contiene Dictionary.
Le añadiremos una ruta que nos lleve a la vista de Chat.cshtml a la cual deberemos pasarle el asp-route-idChat para que recoja el id de la sala en la que nos vamos a encontrar.

Dentro de la vista de Chat.cshtml añadiremos un @model de int y añadiremos una interfaz de formulario que permita al usuario añadir su nombre y el mensaje que quiere enviar.

Una vez terminada la parte visual añadiremos el siguiente script para poder funcionar con la librería de SignalR:
<script src=»~/lib/microsoft/signalr/dist/browser/signalr.js»></script>

Debajo añadiremos una sección de Scripts a la cual le añadiremos código JavaScript para las funcionalidades.

• Deberemos añadir la conexión a SignalR que se unirá con el Hub que esta en /Chats dentro de Programs.cs.
• Nos uniremos a un grupo correspondiente usando AddToGroup con el nombre del grupo que se pasa como @Model.
• Cuando hagamos clic en el botón de «btnEnviar», se captura el mensaje y el usuario, y se envía al servidor con SendMessage.
• Por ultimo recibiremos el mensaje, el cliente escucha nuevos mensajes a través de RecibirMensaje y los muestra en una lista de («#Mensajes») en tiempo real.

Por ultimo añadiremos Program.cs dentro de app.MapControllerRoute la siguiente ruta dentro de pattern: 

pattern: «{controller=Chat}/{action=ListaChats}/{id?}»).WithStaticAssets();

Con esto nos aseguraremos que al arrancar la pagina se vea de primeras la lista de salas que tenemos.

RESULTADO

Como resultado veremos que si entramos varias veces en la misma pagina, desde pestañas diferentes, y nos posicionamos en salas diferentes, comprobaremos que los mensajes solo serán recibidos en esa sala, es decir si el usuario Juan envía un mensaje en el GrupoPueblo, solo se vera ese mensaje dentro de esa sala.

Espero que os haya sido útil al explicación de como implementar SignalR en vuestros proyectos, ¿Creéis que seria interesante implementarla pero con una base de datos que registre usuarios?

Autor/a: Sofia Martínez Gonzáles

Máster: Desarrollo Web Full Stack + MultiCloud

Centro: Tajamar Tech

Año académico: 2024-2025

Código / recursos utilizados / Otros datos de interés: SignalIRChat GitHub Repository