Enviando mensajes a grupos en SignalR ASP.NET

SignalR provee una capa de abstracción sobre algunos de los transportes requeridos para hacer aplicaciones de tiempo real. Estas aplicaciones empiezan directamente sobre HTTP pero en caso de que se tenga soporte para Web Sockets, dicha conexión será promovida a que use Web Sockets.

Todas las conexiones son administradas por SignalR y permite transmitir los cambios a todos los clientes conectados como si fuese una sala de chat o en caso de que sea necesario podemos notificar a un cliente específico.

Avanzando un poco mas del pequeño tutorial de chat que nos ofrece Microsoft y siguiendo un poco con la linea de variablenotfound con respecto a los Hubs vamos a mostrar un pequeño ejemplo para enviarle mensajes a diferentes grupos de usuarios.

Primero bajamos SignalR desde nuget
foto1

Creamos una carpeta llamada Hub y creamos la clase Hub
foto2
 

 

 

 

 

Apartir de SignalR 2.0 para iniciar el servicio necesitamos una Clase OWIN:

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(EF_SignalR.Startup))]

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

 

y el código:

   [HubName("MensajeroHub")]
    public class MensajeroHub : Microsoft.AspNet.SignalR.Hub
    {

        //funcion para agregarlo al grupete
        public void AgregarGrupo(int iddelGrupo)
        {
            Groups.Add(Context.ConnectionId, iddelGrupo.ToString());
        }


        public void EnvioMensajeGrupo(string groupName, string message,string tipo)
        {
            Clients.Group(groupName).CallBackMsj(string.Format("Grupo {0}: {1}", groupName, message), tipo);
        }
     
    }

Este es el nombre con que vamos a referenciar nuestro hub en el cliente

 [HubName("MensajeroHub")]

Con esta función vamos a ir agregando a los usuarios a nuestros grupos

public void AgregarGrupo(int iddelGrupo)
        {
            Groups.Add(Context.ConnectionId, iddelGrupo.ToString());
        }

Y con esta función vamos a hacer el push del servidor al cliente

public void EnvioMensajeGrupo(string groupName, string message,string tipo)
        {
            Clients.Group(groupName).CallBackMsj(string.Format("Grupo {0}: {1}", groupName, message), tipo);
        }

Para consumir nuestro Servicio desde el cliente, primero dibujamos un poco la página:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="Scripts/notify.js"></script>
    <script src="Scripts/GsSignalR.js"></script>
    <script src="signalr/hubs"></script>
    
</head>
<body>


<form id="form1" runat="server">


<div>


        
        <asp:CheckBox Text="Grupo 1" id="grupo1" runat="server" />
        <asp:CheckBox Text="Grupo 2" id="grupo2" runat="server" />
        
        <select id="combo">
<option value="warn">Warn</option>
<option value="info">Info</option>
<option value="error">Error</option>
<option value="sucess">Sucess</option>
        </select>
        
        
        <asp:TextBox runat="server" id="txtgrupo1" placeholder="Texto para grupo 1" /> 
        <input type="button" name="btnGrupo1" value="Enviar p/grupo1" id="btnGrupo1" /> 
        
        <asp:TextBox runat="server" id="txtgrupo2" placeholder="Texto para grupo 2" /> 
        <input type="button" name="btnGrupo2" value="Enviar p/grupo2" id="btnGrupo2" />


    </div>


    </form>


</body>
</html>

Cabe mencionar aquí la llamada al Hub autogenerador por SingalR, sin eso no vivimos

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

y el script que nos gestiona el servicio esta acá


$(function () {

    /*CONFIGURACIONES INICIALES  */
    console.log("Inicio del servicio");
    myHub = $.connection.MensajeroHub;
        
    $.connection.hub.start().done(function () {
        console.log("conecta ok");
    })
   .fail(function () {
       console.log("fallo");
   });
    /*CONFIGURACIONES INICIALES  */

       //PUSH DEL SERVIDOR
    myHub.client.callBackMsj = function (message,tipo) {
        console.log(message + " " + tipo);
        $.notify(message,
            {
                position: 'top left',
                className: tipo
            }
         );
    };

   //LLAMADAS AL SERVIDOR***************************
    $("#grupo1").click(function () {
        console.log("agregar a grupo 1");
        //Esta funcion usa CamelCase osea que tiene que ir en minuscula
        myHub.server.agregarGrupo("1");
    });

    $("#grupo2").click(function () {
        console.log("agregar a grupo 2");
        myHub.server.agregarGrupo("2");
    });


    $("#btnGrupo1").click(function () {
        myHub.server.envioMensajeGrupo("1", $("#txtgrupo1").val(), $("#combo").val());
    });

    $("#btnGrupo2").click(function () {
        myHub.server.envioMensajeGrupo("2", $("#txtgrupo2").val(), $("#combo").val());
    });
    //LLAMADAS AL SERVIDOR***************************
});

Como se puede ver en las primeras lineas utilizo el nombre que especifico para el Hub con el tag hubName, aunque podría haber dejado el nombre de la clase, y luego inicio el servicio. Una vez hecho esto, la conexión entre cliente y servidor ya esta establecida.

myHub = $.connection.MensajeroHub;
    $.connection.hub.start().done(function () {
        console.log("conecta ok");
    })
   .fail(function () {
       console.log("fallo");
   });

Cuando el cliente toca uno de los checkbox simplemente realizamos esto para poder agregarlo a un grupo

  //LLAMADAS AL SERVIDOR***************************
    $("#grupo1").click(function () {
        console.log("agregar a grupo 1");
        //Esta funcion usa CamelCase osea que tiene que ir en minuscula
        myHub.server.agregarGrupo("1");
    });

Esto en el servidor

   //funcion para agregarlo al grupete
        public void AgregarGrupo(int iddelGrupo)
        {
            Groups.Add(Context.ConnectionId, iddelGrupo.ToString());
        }

Una vez diferenciados los grupos solamente tenemos que enviarle los mensajes al nombre del grupo correspondiente y SignalR hace el resto por nosotros.

 public void EnvioMensajeGrupo(string groupName, string message,string tipo)
        {
            Clients.Group(groupName).CallBackMsj(string.Format("Grupo {0}: {1}", groupName, message), tipo);
        }

En el cliente usamos notify para que sea mas lindo el mensaje. Notese que para recibir el push el método es Camel Case

  //PUSH DEL SERVIDOR
    myHub.client.callBackMsj = function (message,tipo) {
        console.log(message + " " + tipo);
        $.notify(message,
            {
                position: 'top left',
                className: tipo
            }
         );
    };

 

La interface que hice es bien simple y sirve para identificar a que grupo pertenece un usuario y poder enviarle mensajes. Y mas abajo muestro la misma interface con 2 browser abiertos para ver la diferencia.
foto3

 

 

foto4
 
 
 
 

LINK:
GoogleDrive

Anuncios

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