SignalR (I): Comunicación Asíncrona en aplicaciones Web


Tradicionalmente las aplicaciones web funcionan en un modelo sincrono, se realizan peticiones y se espera hasta obtener respuesta.
SignalR posibilita realizar comunicaciones asíncronas sobre aplicaciones web. De esta manera podemos hacer fácilmente una aplicación web interactiva.

SignalR

Esta libreria de javascript ofrece una api de comunicación asíncrona:

  • Que encapsula este tipo de comunicación para navegadores que soportan HTML5 con WebSockets.
  • realiza una implementación de forma transparente para el resto de navegadores

Así mismo soporta dos modos de trabajo:

  • socket : comunicación bidirecional entre cliente y servidor a bajo nivel.
  • hubs: comunicación bidirecional entre cliente y servidor a alto nivel.

Nosotros a lo largo de los artículos, utilizaremos el modo de trabajo con hubs.

Instalación

La librería la tenemos disponible en GitHub desde donde podemos descargarla. Aunque la forma más fácil de instalarla es desde la consola de Nutget, mediante el siguiente comando:
Install-Package Microsoft.AspNet.SignalR
La ultima versión 2.X.X utiliza NET 4.5; si utilizamos una versión anterior de NET debemos instalar una versión anterior; mediante el siguiente comando:
Install-Package Microsoft.AspNet.SignalR -Version 1.2.1

Instalar signalR vía NutGet

Establecer la comunicación en el servidor

En nuestro proyecto hemos de realizar las siguientes acciones:

  1. Añadir las siguientes referencias:
    • SignalR
    • SignalR.Hosting.AspNet
    • SignalR.Hosting.Common
    • Newtonsoft.Json.dll
    • Microsoft.Web.Infrastructure.dll
  2. Añadir una nueva clase que implementa la parte de comunicación del servidor. Esta clase deriva de la clase Hub de SignalR.
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    
    namespace Example.Backoffice.Hubs
    {
        public class BackgroundProcessHub: Hub
        {
            public void TaskProcess()
            {
                Thread.Sleep(4000); //Do the task
                Clients.All.NotifyTaskProcessed("Task processed");
            }
    
        }
    }
    

    En el Hub hemos definido un método de comunicación de Cliente a Servidor TaskProcess y un método de comunicación de Servidor a Cliente NotifyTaskProcessed.

Establecer la comunicación en la parte cliente

En la parte se puede utilizar un cliente NET o Javascript. En nuestro caso utilizamos un cliente Javascript, dado que estamos trabajando en una aplicación Web. En nuestra pagina HTML debemos:

  1. Añadir las librerías de Javascript. SignalR se apoya en jquery que seguramente ya tengamos en nuestro proyecto, sino es el caso también deberíamos añadirla.
    <script type="text/javascript" src="/js/jquery.signalR-1.2.1.min.js"></script>
    <script type="text/javascript" src="/signalr/hubs"></script>
    
  2. Añadir el codigo de conexión al Hub.
    $(function () {
        var backgroundProcessHub = $.connection.backgroundProcessHub;
    
        $.connection.hub.start(function() {
    	backgroundProcessHub.client.taskProcess();
        });
    
        backgroundProcessHub.client.notifyTaskProcessed = function (message) {
    	alert(message);
        };
    });
    

    Iniciamos la conexión con el hub y iniciamos la comunicación con el método taskProcess.
    Posteriormente establecemos una función de callback en notifyTaskProcessed donde recoger la comunicación desde el servidor.

Como funciona

Al cargar la pagina, se llama a la función del hub taskProcess, asincronamente al cabo de 4 segundos nos notifica que la tarea se ha realizado con la función notifyTaskProcessed.

Anuncios
Esta entrada fue publicada en Azure, Desarrollo, SignalR y etiquetada . Guarda el enlace permanente.

2 respuestas a SignalR (I): Comunicación Asíncrona en aplicaciones Web

  1. Pingback: SignalR: Mantener activa siempre la comunicación | Pensando bajo la lluvia

  2. Pingback: Número de usuarios conectados a la Web | Pensando bajo la lluvia

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s