Introducción a SignalR y el clásico ejemplo de un chat

Introducción

SignalR es un librería open source inicialmente creada por Damian Edwards y David Fowler y que ahora forma parte de la familia de Asp.Net. Mediante SignalR podemos añadir funcionalidad de tipo comunicación en tiempo real entre cliente y servidor, teniendo así una comunicación bidireccional.

Esta disponible mediante NuGet, esta muy integrado con proyectos Asp.net. En pocos pasos mediante su API se puede crear una aplicación web donde desde el lado del servidor se puede invocar funciones declaradas en un cliente javascript en el navegador.



SignalR no solo puede ser utilizado en un entorno servidor Asp.Net y su cliente en javascript, hay otros entornos donde puede ser desarrollado. Mediante OWIN ( Open Web Interface for .NET) se puede crear un servidor self host con cualquier código .NET, desde un servicio windows hasta un proyecto de consola. También se pueden crear clientes con proyectos de la tienda de windows, windows phone, WPF, Silverlight por ejemplo.
En SignalR hay dos apis para la comunicación entre cliente y servidor:

• Comunicación persistente: Api de bajo nivel que permite manejar eventos como connected  y disconnected. 
• Hubs: Api de alto nivel, de uso más sencillo y donde parece magia la comunicación entre el servidor y cliente.

La primera opción de transporte en SignalR es WebSocket si es posible, sino ira probando métodos de transporte más antiguos. La mejor opción de transporte es WebSocket porque realiza una mejor gestión de memoria en servidor y es el único método donde existe una conexión persistente real entre cliente y servidor, las demás opciones lo simulan pero no es real.

Lo bueno es que todo esto lo gestiona SignalR y es transparente para el desarrollador, lo que convierte a SignalR en muy sencillo de utilizar.

El ejemplo más visto con SignalR es un chat, así que no voy a ser menos y vamos a hacer este ejemplo, en futuros post veremos más ejemplos con SignalR.

Ejemplo de un chat

Para el ejemplo de un chat vamos a utilizar Hubs, que crearemos en el proyecto web. Empecemos:

Creamos un proyecto MVC

Ahora mediante NuGet añadimos SignalR, el paquete completo para servidor, donde se incluyen las librerias para levantar el servidor y también la librería para el cliente javascript.

Añadimos una clase Startup, que sera invocada por el motor de SignalR al arrancar la web y que se encarga de mapear las clases hub que hay en la solución y generar dinámicamente el script que se encontrará en /signalR/hubs, que hará de proxie del servidor para el cliente.

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR();
    }
}

Añadimos la clase ChatHub que sera la clase con la que el cliente tendrá comunicación bidireccional.

public class ChatHub : Hub
{
    public void SendMessage(string userName, string message)
    {
        Clients.All.addMessage();
    }
}

La clase Hub tiene un método SendMessage que sera invocado por un cliente javascript, y esta a su vez invoca la función addMessage de todos los clientes conectados. Fijaros que por convención comienza con minúscula el nombre de la función en javascript siguiendo lower camel case.

creamos el controller, con la función Index que nos devuelve la vista.

public class ChatController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Modificamos la configuración de la clase RouteConfig que se ha creado por defecto para que el controller por defecto sea ChatController.

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Chat", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Y finalmente creamos la vista, tenemos la parte html

@{
    ViewBag.Title = "Index";
}


SignalR Chat Example
Username: 

Message: 





Messages

    

y la parte javascript donde reside el código cliente que se comunica con el Hub en servidor.

@section scripts {
    
    
    
}

Donde tenemos la referencia a la libreria javascript de SignalR y al directorio ~/signalr/hubs que genera el motor de SignalR de forma dinámica y donde estará el proxy de nuestro ChatHub. Nos creamos una instancia del proxy y la función que será invocada desde servidor para añadir un nuevo mensaje de un cliente, después se comienza la conexión con el servidor. En la función send se realiza una llamada al método definido en servidor para comunicar un nuevo mensaje y este a su vez invocara la función addMessage de todos los clientes conectados, incluido el mismo cliente que lanza el mensaje inicial.
Fijaros que tanto el hub como la funcion de servidor cuando se utliza desde javascript por convención se utiliza lower camel case.

Con esto hemos terminado el chat de ejemplo

Código fuente

Libros Relacionados

Introducción a ASP.NET SignalR es de Jose M. Aguilar.

• Versión en español
• Versión en ingles

Signalr: Realtime Application Development

• Amazon.com
• Amazon.es
• Amazon.co.uk

Pro ASP.Net Signalr: Real-Time Communication in .Net with Signalr 2.0

• Amazon.com
• Amazon.es
• Amazon.co.uk

SignalR Programming in Microsoft ASP.NET

• Amazon.com
• Amazon.co.uk