[Material WebCast]Ejemplo simple de SignalR y Hub

Hola, ha pasado un tiempo desde el WebCast que di sobre SignalR, pero por temas de tiempo no había podido subir el material. Este es un ejemplo de una charla oficial de SignalR,la que puedes encontrar aquí.

Ahora veamos el ejemplo funcionando antes de ver como se hace:

signalr

En el ejemplo anterior, el browser de la izquierda es mozilla y el de la derecha es chrome, y estoy moviendo el cuadrado sobre mozilla y puedes ver que en tiempo real , se replica la ventana de derecha Sonrisa, este es un ejemplo muy sencillo, pero que deja en claro las potencialidades de SignalR

La construcción: Estructura del Proyecto

La estructura del proyecto es la siguiente:

image

Para agregar SignalR a tu proyecto, recuerda que tienes NuGet buscando Microsoft.AspNet.SignalR:

image

Volviendo al proyecto, realmente la carpeta content no la estoy ocupando, pero si es importante la carpeta Script ya que necesitaremos jquery para utiliza SignalR (por ahora, ya que se viene un cliente que no depende de jquery). También usaremos jqueryUI para el tema del Drag & Drop.

Vamos a agregar una nueva Clase de concentrador SignalR(V2), que es nuestro Hub, le pondré por nombre MoveShapeHub:

image

Luego el código:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

 

namespace Demo

{

[HubName(“moveShape”)]

    public class moveShapeHub : Hub

    {

        public void moveShape(int x, int y)

        {

            Clients.Others.ShapeMoved(x,y);

        }

    }

}

Como puedes ver es mega ultra sencillo, llegarán desde los clientes llamadas a moveShape con las coordenadas x, y para luego ser reenviada a los clientes llamando a la función ShapeMoved de javascript, SI! magia! desde el cliente se llama a la función en el server y desde el server directo al cliente (bueno, no tan directo, pero la implementación de eso es transparente para el desarrollador).

Luego creamos el cliente, veamos el index.html

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

    <title></title>

    <style>

        #shape {

            width: 100px;

            height: 100px;

            background-color: blue;

            cursor: move;

        }

    </style>

</head>

<body>

 

    <div id=”shape”></div>

    <script src=”Scripts/jquery-1.6.4.js”></script>

    <script src=”Scripts/jquery-ui-1.10.4.min.js”></script>

    <script src=”Scripts/jquery.signalR-2.0.2.js”></script>

    <script src=”signalr/hubs”></script>

    <script src=”Scripts/MoveShape.js”></script>

</body>

</html>

Lo anterior generala pantalla con el cuadro que podemos draggear, es por eso que usamos  jquery & jqueryUI, también incluimos la librería de SignalR , “signalr/hubs” es un caso especial, es un script de tipo proxy que lo genera automáticamente SignalR, y hay que agregarlo si estamos trabajando con HUB. Luego el javascript que tiene nuestra lógica de funcionamiento y comunicación con el servidor “MoveShape.js” que lo veremos a continuación:

/// <reference path=”jquery-ui-1.10.4.min.js” />

/// <reference path=”jquery-1.6.4.js” />

/// <reference path=”jquery.signalR-2.0.2.min.js” />

 

$(function () {

 

    var hub = $.connection.moveShape,

        $shape = $(“#shape”);

 

    hub.client.shapeMoved = function (x, y) {

        $shape.css({ left: x, top: y })

    }

 

    $.connection.hub.start().done(function () {

        $shape.draggable({

            drag: function () {

                hub.server.moveShape(this.offsetLeft, this.offsetTop || 0);

            }

 

        });

 

    });

 

});

Esto también es sencillo, pero hay que entenderlo. Antes que todo, hacemos referencia hacia el hub, que es conection.moveShape (que viene de [HubName(“moveShape”)].

Luego tenemos la función que será llamada desde el servidor, (te recuerdas que era shapeMove?), y mediante css le damos la posición, para que “se mueva”.

Finalmente tenemos la función que hace partir a todo esto, una vez que se conecta, y mediante el patrón promise , tenemos que cada vez que se hace drag, llamamos a la función el el servidor que replicará en los clientes las coordenadas Sonrisa.

Descarga el ejemplo!

saludos!
@chalalo

Deja un comentario

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