Bienvenidos a este post donde veremos como crear un chat en Visual Studio con .net framework y SignalR.

Primero ¿Qué es SignalR? Es una librería que nos permite implementar funcionalidad en tiempo real a nuestro proyecto. Una utilidad que se le da a SignalR es poder crear chats en tiempo real, existen otras formas de usarlo, como por ejemplo un ajedrez donde los jugadores verán los movimientos en tiempo real.

Comencemos:

Primero debemos abrir nuestro Visual Studio y seleccionar «Create new project»

1

Una vez hemos pulsado en «Create new project» nos aparecerá una ventana donde debemos seleccionar el tipo de proyecto que queremos. Seleccionaremos «ASP.Net web application(.Net Framework)»

2

La siguiente ventana que nos saldrá será la de elegir nombre de proyecto, ubicación y versión. Cada uno puede elegir sus preferencias.

3

Por último para terminar la creación del proyecto, en otra ventana debemos elegir el patrón MVC para que nos de las carpetas de las vistas, controladores etcétera ya creadas.

4

Una vez finalizados estos pasos ya nos crearía el proyecto y podríamos empezar a codificar.

Una vez creado el proyecto, el primer paso será irnos a la parte derecha donde tenemos nuestro directorio de carpetas y sobre el proyecto botón derecho y pulsamos en «Manage nugget packages».

5

Una vez dentro de la administración de los paquetes Nugget, pulsamos sobre «Browse» y buscamos SignalR. Debemos instalar el Nugget que veremos en la siguiente imagen.

6

Le daremos a Install en la parte derecha y tardará unos minutos hasta que nos salga una ventana donde le daremos a «Ok» y luego a «Install».

7

Una vez instalado el paquete Nugget se nos crearán unos scripts de SignalR en la carpeta scripts de nuestro directorio.

Ahora debemos crear una clase de tipo «SignalR Hub Class (v2)». Para ello nos posicionamos sobre el proyecto, pulsamos el boton derecho y le damos a Add –> New Item.

8

Dentro de la lista de item que podemos añadir, en el buscador escribimos SignalR y añadimos la clase de tipo «SignalR Hub Class (v2)» .

9

Una vez creada la clase nos vendrá con un método por defecto, lo eliminamos y creamos nuestro propio método que será para enviar mensajes. Le pasamos dos parámetros para recibir el nombre de usuario y el mensaje a enviar. Usaremos la propiedad Clients.All para que los mensajes sean enviados a todos los usuarios conectados al chat y que no solo apunte a un usuario en concreto.

11

Ahora debemos crear otra clase, esta vez de tipo OWIN. que canalizará los componentes especificados en la aplicación. Por lo tanto canalizará SignalR. Para crear esta clase debemos repetir los pasos que hicimos para añadir la clase «SignalR Hub Class (v2)» pero con la diferencia que ahora debemos poner en el buscador de items «OWIN» y añadimos el elemento. Estas clases siempre vienen con un nombre por defecto «startup1».

13

Una vez creada esta clase nos vendrá con un método y una línea comentada dentro de éste. Borramos la línea e inicializamos la canalización con SignalR poniendo la línea que vemos en la siguiente imagen.

15

Ahora ya no necesitamos crear más elementos, nos vamos a nuestra vista Index y ahí será donde incluiremos los scripts y diseñaremos nuestro chat y su funcionalidad.

16

Borramos el contenido de nuestra vista y la dejamos vacía.

17

En este momento tenemos una vista vacía, por lo que habrá que crear nuestro HTML. Creamos uno muy sencillo, es decir una caja de texto, un botón y una caja oculta donde guardaremos el nombre de usuario. Este es nuestro codigo HTML:

18

IMPORTANTE!!! Debemos añadir nuestro Section scripts para poder añadir los scripts de SignalR y que funcione nuestra aplicación. Ahí pondremos los scripts que se nos crearon al instalar el Nugget, y además debemos crearnos otro script para que no haya problemas.

19
El segundo script es el que debemos crearnos manualmente.

Ahora que ya tenemos los scripts vamos a empezar a escribir nuestro con código JQuery.

Nuestro script constará de tres partes y lo dividieremos en colores.

1(Rojo)-Crearemos la conexión con nuestro hub y la guardaremos en una variable y además con append añadiremos la conversación a la página.

2(amarillo)- En esta parte crearemos un prompt y recogeremos el nombre del usuario y lo guardamos debido a que es más fácil identificar luego quien habla, además ponemos un focus en el texto para que sea más fácil escribir.

3(rojo)-La última parte tendrá una función onClick para que al pulsar se envíe el mensaje, recogemos el valor del nombre de usuario y el mensaje y en «chat.server.send» se lo pasamos por parámetro y eso será lo que envíe.

20

Nuestro programa ya estaría finalizado, ahora veremos el resultado.

21

Podemos comunicarnos en la misma red con diferentes personas, primero elegimos el nombre de usuario que queremos en un prompt y luego ya podemos escribir el mensaje y enviarlo. es como un chat grupal por lo tanto aparecerá el mensaje en todos los usuarios.

22

Autor: Roberto Gómez-Monedero Jiménez

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2019-2020

GitHub: Link al proyecto en GitHub

This Post Has One Comment

  1. Luis López Reply

    Buena tarde, me parece bueno el tutorial siendo que ya casí todos lo apuntan a Net Core y abandonaron Net Framework, disculpa tengo una problemática, cuando monto el sitio un servidor con IIS, después de que ingresan como 8 personas distintas, todo el servicio de IIS se cae y no me permite ni ingresar al sitio, ¿Sabes de una configuración extra que se necesite?

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.