Tag Archives: SignalR Hub

SignalR Hub

19 Jun

¿Qué es SignalR Hub?

Simplemente, con lo simple que puede ser, SignalR Hub, son un conjunto de librerías que permiten invocar desde javascript al servidor, y lo que es realmente importante, permite al servidor ejecutar funcionalidad javascript, evitando recarga de página, ejecutando la función javascript de todos los clientes.

Uso de SignalR Hub

¿Para qué podemos usar SignalR hub?, el ejemplo que va a encontrar en internet es el típico chat, aunque desde este punto se puede evolucionar a listas de espera con registro en base de datos de la información que requiera la aplicación.

Registro de librerías

Lo recomendable es instalar las librerías necesarias para implementar la solución desde el Administrador de Paquete Nuget, ya que el paquete que descargue estará configurado para su entorno.

Librerías para el uso de SignalR Hub

Desde el administrador de Paquetes Nuget descargue:

  • Microsoft.AspNet.SignalR.Core.dll
  • Microsoft.AspNet.SignalR.SystemWeb.dll
  • Microsoft.Orwin.dll
  • Microsoft.Orwin.Host.SystemWeb.dll
  • Microsoft.Orwin.Security.dll
  • Newtonsoft.Json.dll
  • Owin.dll

Javascript

La descarga de los paquetes anteriores, incluye una serie de ficheros javascript “.js” que habrá que incluir en las páginas en las que queremos implementar las listas de espera o el chat.

Los ficheros .js son:

  • jquery-1.6.4.min.js
  • jquery.signalR-2.2.1.min.js
  • hubs

Dependiendo de la versión descargada por el administrador de paquetes Nuget la numeración de las versiones puede variar.

Si  no esta acostumbrado a trabajar con javascript le diré que el orden es muy importante, así que incluya los ficheros .js en el orden indicado para evitar errores.

Mesa

Como he comentado antes lo bueno de SignalrR Hub es la capacidad de comunicar cliente con servidor y servidor con clientes,

¿Cómo se hace?

Código de la mesa1

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Mesa1.aspx.cs” Inherits=”Mesa1″ %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
http://Scripts/jquery-1.6.4.min.js
http://Scripts/jquery.signalR-2.2.1.min.js
http://signalr/hubs

//Funciones para que el servidor conecte con el cliente
$(function () {
var turno = $.connection.turno;

//Método por el que contacta el servidor.
$.connection.hub.start().done(function () {

//ejecuta primero el javascript, con lo que el visitante no se ha establecido.
$(“#btnSiguiente”).click(function () { turno.server.siguiente(1); });

// Actualiza la lista de espera
$(“#btnActualiza”).click(function () { turno.server.cargaListaEspera(1); });
});

})

</head>
<body>
<form id=”form1″ runat=”server”>

Atendiendo a:

Observaciones:

</form>
</body>
</html>

Con esto ya tendríamos la primera mesa que atendería la lista de espera.

Registro de visitas

Creamos un aspx 

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Inscribir.aspx.cs” Inherits=”Inscribir” %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Registro de visitas.</title>
http://Scripts/jquery-1.6.4.min.js
http://Scripts/jquery.signalR-2.2.1.min.js
http://signalr/hubs

$(function () {

var turno = $.connection.turno;

//Invocacíon al servidor.
$.connection.hub.start().done(function () {
$(“#usuario”).val(“”);

$(“#sendButton”).click(function () {

turno.server.inscribir($(“#ddlAsunto”).val() + “@” + $(“#usuario”).val());

$(“#usuario”).val(“”);
});
});
});

</head>
<body>
<form id=”form1″ runat=”server”>

Registro de visitas
Visita

Haga click con el ratón en la caja y escriba el nombre con el que será llamado para ser atendido.


Asunto




Seleccione el asunto a tratar.
Inscribirse

<textarea id=”lista1″ style=”visibility: hidden;”></textarea>
<textarea id=”lista2″ style=”visibility: hidden;”></textarea>
<textarea id=”lista3″ style=”visibility: hidden;”></textarea>

</form>
</body>
</html>

CodeBehind del registro de visitas

En el load de la página cargamos el dropDownList con los asuntos que se tratan en las mesas.

Pantalla de Turnos

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Turno</title>
http://Scripts/jquery-1.6.4.min.js
http://Scripts/jquery.signalR-2.2.1.min.js
http://signalr/hubs

function CargarLista(lista) {
var listaCargada = “”;

// El primero no se coge ya que pasa a Atendido
for (var i = 0; i
</head>
<body>
<form id=”form1″>
<input type=”button” id=”test” />
<table border=”0″ cellpadding=”5″ cellspacing=”0″>
<tr>
<td width=”20%”><h1>Mesa 1:</h1></td>
<td width=”20%”><h1>Mesa 2:</h1></td>
<td width=”20%”><h1>Mesa 3:</h1></td>
<td width=”40%”><h1>Su Turno</h1></td>
</tr>
<tr>
<td valign=”top”><input type=”text” id=”Mesa1Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;”/></td>
<td valign=”top”><input type=”text” id=”Mesa2Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;”/></td>
<td valign=”top”><input type=”text” id=”Mesa3Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;”/></td>
<td valign=”top” rowspan=”5″><textarea id=”lista” style=”font-size:large; width:100%; height:650px;”></textarea></td>
</tr>
<tr>
<td width=”20%”><h1>Mesa 4:</h1></td>
<td width=”20%”><h1>Mesa 5:</h1></td>
<td width=”20%”><h1>Mesa 6:</h1></td>
</tr>
<tr>
<td valign=”top”><input type=”text” id=”Mesa4Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;” /></td>
<td valign=”top”><input type=”text” id=”Mesa5Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;” /></td>
<td valign=”top”><input type=”text” id=”Mesa6Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;” /></td>
</tr>
<tr>
<td><h1>Mesa 7:</h1></td>
<td><h1>Mesa 8:</h1></td>
<td><h1></h1></td>
</tr>
<tr>
<td valign=”top”><input type=”text” id=”Mesa7Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;”/></td>
<td valign=”top”><input type=”text” id=”Mesa8Usuario” style=”font-family:Arial, Helvetica, sans-serif; font-size:x-large; color: orange; border-width:0;”/></td>
<td></td>
</tr>
</table><br />
<footer style=”font-size:xx-small;”>Informática El Tesoro, desarrollado por Grupo I.C.A.</footer>
</form>
</body>
</html>

Entidades indispensables

Necesitaremos dos:

Startup.cs

using Microsoft.Owin;
using Owin;

//[assembly: OwinStartup(typeof(Startup))]
[assembly: OwinStartup(typeof(SignalRHub.Startup))]

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

La entidad que contiene los métodos a invocar desde el cliente

using System;
using System.Collections.Generic;
using Microsoft.AspNet.SignalR;
using Turnos.Entidades;
using Turnos.BL;
using Turnos.Tipos;

namespace SignalRHub
{

public class Turno : Hub
{

public void cargaListaEspera(Int16 idMesaAsunto)
{
obtenerLista(idMesaAsunto, Tipos.Origen.Actualiza);
}

/// <summary>
/// Registra en BBDD el nuevo visitante
/// </summary>
/// <param name=”cadena”></param>
public void inscribir(string cadena)
{
// volcamos valores de mesa y visitante en una entidad Turno
Visita nuevo = new Visita();
nuevo.IdAsunto = short.Parse(cadena.Split(‘@’)[0]);
nuevo.Visitante = cadena.Split(‘@’)[1];
// añadimos la hora de inscripcion – entrada
nuevo.HoraEntrada = System.DateTime.Now;
// registramos datos
VisitaControlador.Insertar(nuevo);
// Actualizamos la lista de espera de turnos.
actualizaListaTurnos();
}

/// <summary>
/// Recarga la lista de espera.
/// </summary>
public void siguiente(Int16 idMesa)
{
Visita siguiente = VisitaControlador.ObtenerSiguiente(idMesa);

// Devolvemos la lista
obtenerLista(idMesa, Tipos.Origen.Siguiente);
}

 

/// <summary>
/// Actualiza la lista de espera de turnos.
/// </summary>
public void actualizaListaTurnos()
{
List<Visita> lista = VisitaControlador.ObtenerListaEspera();

string ListaMontada = string.Empty;

bool primero = true;
string separador = string.Empty;
foreach (Visita item in lista)
{
if (!primero)
{
separador = “#”;
}

List<Mesa> Mesas = MesaAsuntoControlador.Obtener_Mesas(item.IdAsunto);

string strMesa = string.Empty;
foreach (Mesa itemMesa in Mesas)
{
strMesa += itemMesa.Denominacion + ” “;
}

if (string.IsNullOrEmpty(separador))
{
ListaMontada = item.Id + ‘@’.ToString() + item.Visitante + ” => ” + strMesa;
}
else
{
ListaMontada += separador + item.Id + ‘@’.ToString() + item.Visitante + ” => ” + strMesa;
}
primero = false;
}

Clients.All.ActualizaListaTurnos(ListaMontada);
}

/// <summary>
/// Obtiene la lista de espera de la mesa recibida por parámetro.
/// </summary>
/// <param name=”idMesaAsunto”></param>
private void obtenerLista(Int16 idMesa, Tipos.Origen origen)
{

//Tipos.Origen accionOrigen = Tipos.ConversorIntOrigen(origen);
Tipos.Origen accionOrigen = origen;

// actualizamos la lista de mesas
List<Visita> lista = VisitaControlador.ObtenerListaEspera(idMesa);
// montamos cadena con el id y el visitante, para devolver como cadena.
var listaEnvio = MontarCadena(lista);
// actualizamos la lista genérica
List<Visita> listaGenerica = VisitaControlador.ObtenerListaEspera();
// montamos cadena con el id y el visitante, para devolver como cadena.
var listaCompleta = MontarCadena(listaGenerica);

// Actualizamos la lista genérica: En Turno.html llamar al siguiente.
Clients.All.ActualizaListaTurnos(listaCompleta);

// enviamos la lista de espera completa para la mesa.
switch (idMesa)
{
case 1:
switch (accionOrigen)
{

case Tipos.Origen.Siguiente: // Pulsado botón Siguiente.
// Actualizamos la lista de espera de la mesa 1: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa1Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}

break;
case 2:
switch (accionOrigen)
{
case Tipos.Origen.Siguiente: // Pulsado botón Siguiente,
// Actualizamos la lista de espera de la mesa 2: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa2Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}

break;
case 3:
switch (accionOrigen)
{
case Tipos.Origen.Siguiente: // Pulsado botón Siguiente,
// Actualizamos la lista de espera de la mesa 3: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa3Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}
break;
case 4:
switch (accionOrigen)
{
case Tipos.Origen.Siguiente: // Pulsado botón Siguiente,
// Actualizamos la lista de espera de la mesa 3: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa4Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}
break;
case 5:
switch (accionOrigen)
{
case Tipos.Origen.Siguiente: // Pulsado botón Siguiente,
// Actualizamos la lista de espera de la mesa 3: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa5Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}
break;
case 6:
switch (accionOrigen)
{
case Tipos.Origen.Siguiente: // Pulsado botón Siguiente,
// Actualizamos la lista de espera de la mesa 3: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa6Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}
break;
case 7:
switch (accionOrigen)
{
case Tipos.Origen.Siguiente: // Pulsado botón Siguiente,
// Actualizamos la lista de espera de la mesa 3: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa7Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}
break;
case 8:
switch (accionOrigen)
{
case Tipos.Origen.Siguiente: // Pulsado botón Siguiente,
// Actualizamos la lista de espera de la mesa 3: En Turno.html.
Visita actual = VisitaControlador.ObtenerAtendido(idMesa);
Clients.All.TurnoMesa8Siguiente(actual.Id.ToString() + ‘@’ + actual.Visitante);
break;
case Tipos.Origen.Actualiza: // Actualiza lista de espera en la mesa.
Clients.All.ActualizaListaEspera(listaEnvio);
break;
}
break;
default:
break;
}
}

 

/// <summary>

/// Monta la cadena a enviar a cliente con el Id, visistante y mesas.
/// </summary>
/// <param name=”lista”></param>
/// <returns></returns>
private string MontarCadena(System.Collections.Generic.List<Visita> lista)
{
string ListaMontada = string.Empty;

bool primero = true;
string separador = string.Empty;
foreach (Visita item in lista)
{
if (!primero)
{
separador = “#”;
}

List<Mesa> Mesas = MesaAsuntoControlador.Obtener_Mesas(item.IdAsunto);

string strMesa = string.Empty;
foreach (Mesa itemMesa in Mesas)
{
strMesa += itemMesa.Denominacion + ” “;
}

if (string.IsNullOrEmpty(separador))
{
ListaMontada = item.Id + ‘@’.ToString() + item.Visitante + ” => ” + strMesa;
}
else
{
ListaMontada += separador + item.Id + ‘@’.ToString() + item.Visitante + ” => ” + strMesa;
}
primero = false;
}
return ListaMontada;
}

}
}

 

Anuncios
La que has liado

Fotografiar con palabras, nuestro momento, nuestra época. Del 1.1 al 2.0

TERZERO

Pio Baroja

El árbol inútil

Blog de cuentos, libros y mala poesía

Lo que de verdad importa

somos dueños de nuestro destino, inventores de nuestro futuro y nuestra felicidad...

Frikstation

Pasión por el mundo de la televisión, el cine, los videojuegos y su merchandising.

A %d blogueros les gusta esto: