Performancing Metrics

ASP.NET SignalR - \\Brain\Backup

ASP.NET SignalR

Fácil…SignalR es un API para facilitar la comunicación en tiempo real en aplicaciones web

¿Tiempo Real? ¿bidireccional? ¿Web?

Si, como sabes, HTTP es un protocolo de petición respuesta, donde la comunicación se inicia en el lado del cliente cuando hace una petición al servidor. Si en algún momento queremos saber si ha habido cambios en la información que se nos ha mostrado, tenemos que volver a pedir la misma página (recargarla / hacer F5).

Para que el usuario no tenga que refrescar a mano la información y para minimizar la cantidad de información que viaja a través de la red ý tiene que ser interpretada por el navegador, comento brevemente diferentes técnicas

AJAX.  Nos permite hacer peticiones al servidor sin tener que pedir la página completa. Podemos pedir la información desde un script Javascript en la página y añadir la información que nos devuelva el servidor dinámicamente. Mejora mucho la experiencia pero sigue necesitando de iniciativa del cliente para consultar la última información. Hay numerosas librerías que hacen muy sencillas estas peticiones desde Javascript, por ej: JQuery

HTTP Streaming / Reverse AJAX / COMET. Tras una petición del cliente al servidor, aprovechamos y no cerramos la respuesta para poder seguir inyectando información cuando queramos. Funciona, pero no deja de ser una forma de trampear el HTTP tradicional para lograr lo que queremos. y como todo hack conlleva cierta complejidad, tanto para hacerlo como para mantenerlo.

Web Sockets Una especificación bajo el paraguas de HTML5 que permite tener comunicación full duplex entre el servidor y el navegador, de modo que una vez establecida la comunicación, el servidor puede enviar información a los navegadores conectados sin que estos la hayan solicitado.

Entonces SignalR…

SignalR hace 2 cosas.

Por un lado utiliza WebSockets para hacer comunicaciones push del servidor al cliente y habilitar un escenario de web en tiempo real.

Por otro, si por configuración de clientes/servidor websockets no es una opción… el API de SignalR hace fallback a otras tecnologías sin que tengamos que adaptar el código. Ya no será real time web, pero nos abstrae de crear los patrones para otros tipos de comunicación Servidor->Browser

Esta es la cadena de fallback:  websockets –> Server Sent Events –> Forever Frame –> Ajax Long Pooling (xhr)

El API de SignalR está dividida en 2 partes Persistent Connections y Hubs, trabajan a diferente nivel de profundidad, siendo Hubs el que trabaja a un mayor nivel de abstracción. Por ejemplo, en Hubs puedes pasar tipos de datos complejos y funcionar de un modo RPC en las llamadas.

 

Demo de SignalR Hubs paso a paso

En El TechDay (#estechday) vimos una demo sencilla de cómo montar un Chat en SignalR partiendo de una aplicación MVC sencilla (un controlador y una vista). Os detallo el paso a paso por si queréis probarlo vosotros mismos:

Herramientas

Visual Studio 2012

ASP.NET 2012 Fall Update (incluye plantillas de SignalR, si no quieres instalarlo, hay q instalar SignalR con nuget  “Install-Package Microsoft.AspNet.SignalR -pre”)

Proyecto base

Crea un proyecto ASP.NET MVC sencillo, vale con que tenga un controlador y una vista, que compile y ya.

Creando la parte del servidor

Lo primero que hacemos es ponernos sobre el proyecto y botón derecho New Item, añadimos una clase de tipo Hub

image

Esta clase (MyHub1.cs si no has cambiado el nombre) es nuestra parte del servidor, la que se va a encargar de recibir los mensajes y distribuirlos entre todos los clientes conectados al chat. EL código es muy sencillo

image

  • Hub. La magia. Es la clase encargada en el servidor de abstraernos de todo, si miras su definición (F12 sobre la clase)  verás que hay una serie de métodos a los que te puedes suscribir (OnConnected, OnDisconnected, OnReconnected), la posibilidad de trabajar con grupos (IGroupManager)… vamos… cositas divertidas para jugar ^^
  • HubName Determina el nombre que utilizaremos para referenciar al proxy cliente que se conecta con el servidor.
  • EnviarAlChat Es el evento al que llamaremos desde la parte cliente para distribuir el mensaje
  • mostrarMensaje Aquí asumimos el compromiso de implementar este método en la parte cliente. Será el responsable de que el cliente de chat refleje en pantalla el mensaje que recibe del servidor ( con una actualización de otro usuario por ejemplo)

Y ya está el servidor! difícil verdad? ;)

Creando la parte cliente

Para crear el cliente vamos a editar la vista existente en la aplicación MVC, lo primero que vamos a hacer es añadir un par de referencias a scripts en la vista, tras la etiqueta <h2> por ejemplo

image

Importante: El primero de los scripts necesita que JQuery haya sido referenciado previamente. En un proyecto MVC por defecto, JQuery se referencia en la plantilla Shared\_layout.cshtml así que la abrimos y nos aseguramos que JQuery se referencia ANTES del @RenderBody pq si no no encontrará la referencia ;)

image

Ahora solo queda la parte del código cliente.

Primero ponemos algunos controles HTML con los que trabajar…

image

Y añadimos la parte de Javascript para crear el proxy, hacer las llamadas e interactuar con los controles

image

  • $.connection.miChat  Es el proxy que va a gestionar la comunicación con el servidor. Es el HubName que hemos dado anteriormente
  • michat.client.mostrarMensaje Es la función que nos habíamos comprometido a implementar para que pueda ser llamada desde el servidor. Únicamente añade un List Item a una lista HTML y le incluye el mensaje que venga del servidor
  • $(’#bEnviar’).Click Definimos un gestor para el evento click del botón de la página, de modo que regoja el valor de la caja de texto $(‘#tbMensaje’).val() y lo envíe al servidor para que éste lo distribuya entre los clientes conectados michat.server.enviarAlChat(…)
  • enviarAlChat Fíjate que aqui utilizamos notación camelCase aunque en el servidor lo hayamos definido como PascalCase ;)
  • $.connectio.hub.Start() Llamada para que comience la conexión

Probándolo todo

Sólo tenemos que dar a F5 y abrir un par de instancias de navegador para que se comuniquen entre ellas y ver cómo todo funciona

image

Problemas frecuentes:

  • No definir previamente JQuery
  • Confusiones en la notación de JQuery al referenciar los elementos del DOM
  • Confusión en la nomenclatura del hub de servidor y de los métodos
  • Si falla algo vete mirando a ver qué objeto JS esta ‘undefined’ para ver en qué parte puede haberse cometido el error =)

 

Recursos

Página del API http://signalr.net/

Video de intro a SignalR en el BUILD - Building Real-time Web Apps with ASP.NET SignalR

 

Happy hacking!

  David Salgado (@davidsb)

Published 23/11/2012 12:07 por David Salgado
Comparte este post:

Comentarios

# TechDay 2012. El día después: Los materiales de las charlas.

Friday, November 30, 2012 12:48 PM por MSDN España

Lo prometido es deuda, en este post colgaremos los vídeos y los materiales de las charlas para que podáis