Crear un Web Chat en C# con SignalR

Para el siguiente ejemplo utilizare la librería SignalR que facilita funcionalidades en tiempo real a las aplicaciones.

La funcionalidad de SignalR es insertar información en tiempo real que será visualizada por el resto de los usuarios que estén conectados a la aplicación, SignalR utiliza el transporte WebSocket y se ajusta dependiendo los requerimiento del sistema de los clientes.

Para el ejemplo utilizaremos OWIN (Interface Web Abierta para Net) que se encuentra dentro del proyecto Katana que aunque es de código abierto son creados y publicados por Microsoft.

Para realizar el enlace crearemos una clase HUB, que es un canal del más alto nivel de la API de SignalR que permite la conexión entre cliente y servidor enviado parámetros fuertemente tipados en los métodos.

Puedes ver el ejemplo funcionando: Mi Chat

Crearemos un proyecto Web para C#.

Seleccionaremos el template vacío.

Agregaremos la librería SignalR en Manage NuGet Packages.

Buscaremos e instaremos la librería Microsoft.AspNet.SignalR.

Adicionamos un nuevo Item.

Seleccionamos Web/SignalR/SignalR Hub Class (v2) y teclearemos el nombre miChatHub.cs.

Dentro de la clase verificaremos que se encuentra la librería Microsoft.AspNet.SignalR.

Creamos la función publica Send con los parámetros nombre y mensaje, también incluiremos el parámetro fecha que almacenara el facha y hora en que se teclee el mensaje.

Adicionaremos un nuevo Item Web/General/OWIN Startup Class, teclearemos el nombre Startup.cs.

Dentro de la clase OWIN teclearemos app.MapSignalR().

Ahora creamos un Web Form que será la pantalla inicial, teclearemos el nombre miChat.aspx.

Seleccionaremos la Web Form y la grabamos como Set As Start Page, para que cuando ejecutemos nuestra aplicación se muestre la Web Form.

El diseño de la Web Form puede ser de la siguiente manera.

Incluiremos las referencias de Jquery, SignalR y Bootstrap (para el diseño), agregaremos la siguiente función donde llamara el nombre, fecha y mensaje que teclearemos en la clase SignalR Hub Class (v2), el objeto TextBox_muestra deberá estar como ReadOnly=true ya que solo se mostrara para que el nombre del usuario sea tecleado.

El resto del código es solo para el acomodo de los botones y cajas del texto.

Tendremos un ID llamado "lista_mensajes" que será donde se visualizaran todos los mensaje en forma lista que teclearan los usuarios conectados.

El código en el botón ingresar solo validara que no este vació el nombre y enviara el contenido del TextBox_nombre a TextBox_muestra, ocultara el panel donde se solicita el nombre y mostrara el panel donde se deberán teclear los mensajes.

Ejecutamos la aplicaciones y abrimos varios ventanas del navegador web con la misma URL, nos logueamos con nombre diferentes y presionamos el botón ingresar.

Tecleamos mensajes en todas la ventanas de los navegadores y visualizaremos en cada navegador los mensaje de los diferentes usuarios en tiempo real.