Web Socket SignalR en ASP.NET MVC
ÍNDICE
1. INTRODUCCIÓN
2. CASO PRÁCTICO
2.1. Creación del proyecto
2.2. Instalación del paquete SignalR
2.3. Creación y modificación de archivos
2.4. Ejecución de la aplicación
3. CONCLUSIÓN
1. INTRODUCCIÓN
En este post se va a mostrar cómo usar la biblioteca SignalR en una aplicación web ASP.NET MVC para simplificar la creación de una funcionalidad en tiempo real de la misma abstrayéndonos de usar WebSocket directamente.
Para entender el problema es importante entender qué hace SignalR y en qué tipo de aplicaciones se usa. Esta biblioteca simplifica el proceso de crear aplicaciones web con funcionalidad en tiempo real, es decir, permite crear aplicaciones en las que el servidor puede enviar código instantáneamente a los clientes conectados, gracias a que dicho código se encuentra en el cliente, sin tener que esperar a que un cliente pida nuevos datos.
Además, se puede usar en distintos escenarios como: difusión del servidor (ej: aplicación de indicador de cotización), cliente-a-cliente (ej: aplicación de chat) o tiempo real de alta frecuencia (ej: aplicación de juego en tiempo real).
Para resolver el problema se va a crear una aplicación de chat en tiempo real, la cual mostrará el número de usuarios conectados simultáneamente y la difusión de mensajes que un usuario envía a todo el salón del chat.
2. CASO PRÁCTICO
2.1. Creación del proyecto
1. En Visual Studio, se crea un nuevo proyecto Web de tipo ASP.NET Web Application (.NET Framework). Se le asigna el nombre que se quiera, en este caso, SignalRChat, se le asigna una ubicación que se quiera o la por defecto (C:\Users\[nombreusuario]\source\repos) y clic en de C# que tiene como destino .NET Framework 4.5, asígnele el nombre SignalRChat y haga clic en OK.
2. En la ventana New ASP.NET Web Applicaction – SignalRChat, se selecciona la plantilla MVC y se comprueba que la opción Authentication tenga el valor No Authentication (si no, se cambia a este valor) y clic en OK. Tras ello el proyecto web se creará.
2.2. Instalación del paquete SignalR
3. Para instalar el paquete, clic derecho sobre el nombre del proyecto > seleccionar Manage NuGet Packages… > buscar el paquete con el criterio de búsqueda “signalr” en la pestaña Browse de la ventana NuGet > clic sobre el resultado Microsoft.AspNet.SignalR > clic en el botón Install para iniciar la instalación del paquete.
4. En el proceso de instalación se mostrará los archivos que se van a instalar con el paquete. En la ventana Preview Changes clic en Ok, y después en la ventana License Accepance clic en I Accept. Tras ello, el paquete SignalR está ya instalado.
5. En la ventana Solution Explorer se puede comprobar los archivos instalados: En References aparecen los archivos dll necesarios para SignalR y sus dependencias (Microsoft.AspNet.SignalR.*; Owin.*; Microsoft.Owin.*), y en carpeta Scripts aparecen archivos JavaScript que tiene relación con SignalR.
NOTA: El * representa a varios nombres de archivos que empiezan con el mismo texto precedente.
2.3. Creación y modificación de archivos
Creación de la clase “ChatHub.cs” de tipo SignalR HubClass (v2)
6. Dentro del proyecto se crea una carpeta llamada Hubs porque en un proyecto web se puede tener varios que realizan una determinada funcionalidad para distintas vistas (archivos .cshtml), en este caso, solo habrá uno. Tras ello, dentro de la carpeta se crea la clase ChatHub.cs, para lo cual clic derecho en la carpeta > se selecciona Add > New Item… > dentro de la ventana Add New Item se selecciona Web > SignalR > SignalR HubClass (v2) y se le pone el nombre > clic en Add.
La clase ChatHub.cs permitirá al servidor actuar como un hub (concentrador), es decir, conectar varios clientes entre sí.
7. En la clase, se modifica el método por defecto y sin parámetros llamado Hello(), cuyo contenido es: Clients.All.hello();. Lo que se va a modificar de este método es: el nombre; agregarle parámetros (según lo que se quiera hacer con él al llamarlo), y el contenido (solo el nombre del método dinámico contenido en el mismo, pudiendo llamarse como se quiera, incluso como el método que lo contiene, pero empezando con minúscula).
SignalR. Código de la clase «ChatHub.cs»
Creación de la clase “Startup.cs” de tipo OWIN Startup class
8. Dentro del proyecto se crea la clase Startup.cs, para lo cual clic derecho sobre le proyecto > New Item… > dentro de la ventana Add New Item se selecciona Web > General > OWIN Startup class y se le pone el nombre > clic en Add.
SignalR. Creación de la clase «Startup.cs»
La clase Startup.cs inicia el mapeo del hub(s) existentes, en este proyecto web solo hay uno. En otras palabras, esta clase va a iniciar el hub(s) al arrancar la aplicación.
SignalR. Código de la clase «Startup.cs»
Modificación de controlador “HomeController.cs”
9. En Solution Explorer, seleccionar la carpeta Controller > HomeController.cs.
10. En el Controlador, se crea un método de tipo ActionResult llamado Chat(), el cual será el encargado de controlar las acciones que ocurran en la Vista del mismo nombre que se creará en pasos posteriores.
NOTA: hay que abstraerse de que en el controlador están métodos por defecto que controlan las respectivas vistas del mismo nombre, ya que no son importantes para el presente proyecto web.
Creación de la vista “Chat.cshtml”
11. En el propio controlador, seleccionar el nombre del método > Add View… > se deja las opciones que vienen por defecto > clic en Add para crear la vista Chat.cshtml.
12. En la vista se añade el siguiente código:
Opcional: Establecimiento de la vista que se va a mostrar al ejecutar la aplicación
13. De manera opcional y sin influencia en la creación de la aplicación web de chat, se puede establecer la vista que se quiere que por defecto se abra al ejecutar la aplicación. Para ello, seleccionar la carpeta App_Start > RouteConfig.cs y modificar el método MapRoute(). En este método se cambia el parámetro defaults poniendo en action el valor “Chat”, tal y como se muestra a continuación:
NOTA: Si no se hace el paso opcional, se tiene que introducir en la URL del navegador la ruta para poder ejecutar la vista de la aplicación.
2.4. Ejecución de la aplicación
14. Para ejecutar la aplicación, se debe estar sobre la vista y pulsar la tecla F5 o hacer clic en el botón de ejecución IIS Express (NombreNavegador).
15. Abrir el número de pestañas del navegador que se quiera, poniendo la URL de la vista en cada una de ellas. En este caso se va a abrir 4 usuarios a la vez: ANDRES, KEVIN, FEDERICO Y FLOR.
16. Escribir mensajes en el cuadro de texto de cada pestaña de navegador por cada usuario conectado.
SignalR. Ejecución de la aplicación: intercambio de mensajes entre usuarios
Como se puede apreciar, a medida que los usuarios se van conectando, el contador de usuarios de va incrementado en cada una de las ventanas, y si se cerrara una ventana, el contador se actualiza disminuyendo su valor.
Además, se observa la funcionalidad propia del chat, es decir, que cuando un usuario escribe algo, los demás lo ven. Si un usuario se conecta al chat (al abrir una nueva pestaña del navegador), este no podrá ver los mensajes anteriores entre los demás usuarios.
3. CONCLUSIÓN
En resumen, SignalR es un framework de ASP.NET que hace que trabajar con WebSockets en aplicaciones web sea más fácil para el programador. Aunque esta aplicación de chat es sencilla, es muy útil para entender cómo funciona SignalR. No obstante, existe en la web de Microsoft SignalR otros casos de uso como una aplicación de un juego sencillo o una aplicación de indicador de cotización que son interesantes llevarlos a cabo pero tienen mayor dificultad.
Entre los problemas que te puedes encontrar al resolver este tutorial están: la referencia de archivos en MVC o las llamadas a métodos. En el primer caso, porque desde el archivo _Layout.cshtml a @section scripts {…} de la vista Chat.cs si no usas section scripts y pones directamente la referencia al archivo script externo de SignalR “~/Scripts/jquery.signalR-2.4.0.min.js”, no va a funcionar. Este script se tiene que cargar después del archivo jQuery principal “jquery-[version].js”, el cual esta referenciado a su vez en _Layout.cshtml.
En el segundo caso, porque desde el hub ChatHub.cs la llamada a los métodos jQuery definidos en nuestro script personalizado se realizan en minúscula, y desde nuestro jQuery la llamada a métodos C# del hub se realiza también en minúscula, aunque estecen definidos en mayúscula, lo cual puede confundir.
Espero que el seguimiento de este post os ayude a entender el tema y podáis profundizar en el mismo. ¡Saludos y hasta la próxima!
Autor: Andrés Marcelo Sánchez Luzuriaga
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019
Código / recursos utilizados / Otros datos de interés: GitHub / Tutorial SignalR y MVC, hdeleon.net
Redes Sociales: LinkedIn