Signal R
Signal R
ejemplo de un chat
VIERNES, 6 DE DICIEMBRE DE 2013
Introduccin
SignalR es un librera open source inicialmente creada por Damian Edwards y David
Fowler y que ahora forma parte de la familia de Asp.Net. Mediante SignalR podemos
aadir funcionalidad de tipo comunicacin en tiempo real entre cliente y servidor,
teniendo as una comunicacin bidireccional.
Esta disponible mediante NuGet, esta muy integrado con proyectos Asp.net. En pocos
pasos mediante su API se puede crear una aplicacin web donde desde el lado del
servidor se puede invocar funciones declaradas en un cliente javascript en el navegador.
Comunicacin persistente: Api de bajo nivel que permite manejar eventos como
connected y disconnected.
Ejemplo de un chat
Para el ejemplo de un chat vamos a utilizar Hubs, que crearemos en el proyecto web.
Empecemos:
Creamos un proyecto MVC
Ahora mediante NuGet aadimos SignalR, el paquete completo para servidor, donde se
incluyen las librerias para levantar el servidor y tambin la librera para el cliente
javascript.
Aadimos una clase Startup, que sera invocada por el motor de SignalR al arrancar la
web y que se encarga de mapear las clases hub que hay en la solucin y generar
dinmicamente el script que se encontrar en /signalR/hubs, que har de proxie del
servidor para el cliente.
?
1
2
3
4
5
6
7
Aadimos la clase ChatHub que sera la clase con la que el cliente tendr comunicacin
bidireccional.
?
1
2
3
4
5
6
7
La clase Hub tiene un mtodo SendMessage que sera invocado por un cliente javascript,
y esta a su vez invoca la funcin addMessage de todos los clientes conectados. Fijaros
que por convencin comienza con minscula el nombre de la funcin en javascript
siguiendo lower camel case.
creamos el controller, con la funcin Index que nos devuelve la vista.
?
1
2
3
4
5
6
7
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Chat", action = "Index", id = UrlParam
);
?
1
2
@{
3
ViewBag.Title = "Index";
}
4
5
<h2>
6
SignalR Chat Example</h2>
7
<label>Username: </label>
8
<input id="username">
<label>Message: </label>
9
<input id="message">
10
<input id="send" onclick="send();" type="button" value="Send">
11
12
<div>
13
<h3>
14
Messages</h3>
<ul>
15
</ul>
16
</div>
17
18
y la parte javascript donde reside el cdigo cliente que se comunica con el Hub en
servidor.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@section scripts {
<script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
var chatProxie;
$(document).ready(function () {
chatProxie = $.connection.chatHub;
chatProxie.client.addMessage = function (userName, message) {
$("ul").append("
<li>" + "<span>" + userName + ": </span>" + message + "</li>
")
};
})
$.connection.hub.start();
function send() {
chatProxie.server.sendMessage($("#username").val(), $("#message").va
}
</script>
}
SignalR es una librera de cdigo abierto que permite el envo asncrono y en tiempo
real de datos desde un servidor web a los clientes o navegadores conectados al
mismo. Se trata de un framework desarrollado por el equipo de ASP.NET y su uso es
realmente sencillo como veremos en este artculo, en el que vamos a desarrollar una
aplicacin de chat o mensajera instantnea utilizando esta librera.
Introduccin
La transferencia de informacin en la Web se basa en el envo de peticiones HTTP
entre el navegador y el servidor. El navegador o cliente enva una solicitud, el servidor
la procesa, enva la informacin y cierra la conexin. Estas peticiones pueden devolver
una pgina web completa o parte de la misma, si se utilizan tcnicas AJAX. Pero en
ambos casos, una vez enviados los datos al cliente, el servidor cerrar la conexin.
Esta caracterstica de las transacciones HTTP complica el desarrollo de aplicaciones
en las que es necesario que el servidor se comunique en tiempo real con los clientes,
para informarles de un evento o transferir informacin sin que estos la soliciten. Lo
ms habitual en estos casos es desarrollar mecanismos de polling en el cdigo cliente,
que consisten en interrogar peridicamente al servidor para ver si hay informacin
nueva o se ha producido un evento determinado. Desgraciadamente, cuando el
nmero de clientes es muy elevado esta opcin no es viable por el incremento en el
consumo de ancho de banda y carga de trabajo en el servidor.
SignalR
Como comentbamos al principio, SignalR es una librera desarrollada por el equipo
de ASP.NET, en concreto por David Fowler y Damian Edwars, que permite llevar a
cabo conexiones persistentes entre servidor y cliente de manera sencilla. Se trata de
una abstraccin que oculta la complejidad de estos mecanismos y permite trabajar con
Instalacin
La instalacin de SignalR es realmente fcil si tenemos instalada la extensin del
gestor de paquetes NuGet en Visual Studio 2010. Bastar con seguir los siguientes
pasos:
1. Desde el men Archivo seleccionamos la opcin Nuevo Proyecto. En el
apartado Web elegimos la opcin Aplicacin web vaca de ASP.NET.
2. Una vez creado el proyecto, abriremos la consola de NuGet desde el
men Herramientas -> Library Package Manager -> Package
Manager Console.
3. En la consola escribiremos el siguiente comando: Install-Package
SignalR. Esta instruccin descargar e instalar en el proyecto todos los
componentes necesarios para utilizar SignalR.
4. SignalR trabaja con JSON, motivo por el que es recomendable instalar la
librera json2.js, sobre todo si vamos a trabajar con navegadores web antiguos.
Para instalar este componente ejecutaremos el siguiente comando en la
consola de NuGet: Install-Package json2
Una vez hecho esto tendremos la librera SignalR instalada y lista para su uso en
nuestro proyecto ASP.NET.
Servidor
El siguiente paso es crear una clase servidor cuya funcin ser recibir los mensajes de
los clientes y distribuirlos a los navegadores conectados. Para ello, desde
el explorador de soluciones nos situamos sobre el nombre de nuestro proyecto
y mediante el botn derecho del ratn seleccionamos la opcin Agregar -> Clase.
El cdigo que debemos escribir en esta clase ser:
?
1
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
5
6
using SignalR.Hubs;
7
8
namespace ejemploSignalR
{
10
11
12
13
14
15
}
16
17
Como podemos observar se trata de una clase bastante sencilla que hereda de
SignalR.Hub y cuenta con un nico mtodo denominado enviar. Este mtodo recibe
como parmetro el mensaje de texto enviado por el navegador y lo distribuye al resto
de clientes invocando al mtodo recibir. Este mtodo estar presente en el cdigo
de la pgina que ejecutarn los navegadores conectados como veremos en el
siguiente paso.
Cliente
A continuacin aadiremos la pgina ASP.NET que ejecutarn los navegadores que se
conecten a nuestra aplicacin de chat. Para ello nos situamos otra vez en
el explorador de soluciones y mediante el botn derecho
seleccionamos Aadir -> Nuevo elemento -> WebForms. En el nombre de la
pgina escribiremos default.aspx.
El cdigo HTML de nuestra pgina ASPX ser el siguiente:
?
1
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>prueba SignalR</title>
5
6
7
8
9
10
11
12
13
14
};
15
16
17
$("#enviar").click(function () {
18
if ($("#textomensaje").val() != "") {
19
20
chat.nombre = $("#usuario").val();
21
chat.enviar(mensaje);
22
$("#textomensaje").val("");
23
24
25
});
26
27
28
$.connection.hub.start();
29
});
30
31
32
33
34
35
36
37
</script>
</head>
<body>
<form id="form1" runat="server">
38
39
40
41
42
43
44
45
</div>
</form>
</body>
</html>
46
47
Como podemos ver, todo lo que necesitamos es incluir las libreras jQuery, JSON y
SignalR en el orden adecuado y unas pocas lneas de cdigo Javascript para
establecer la conexin y definir las funciones para el envo y recepcin de mensajes.
No son necesarios mecanismos de polling ni nada parecido: cuando un usuario
escribe un mensaje desde su navegador el servidor lo distribuir al resto de usuarios
llamando a la funcin recibir de cada navegador conectado.
Si ejecutamos el proyecto en Visual Studio y copiamos la URL en un par de pestaas
de nuestro navegador podremos comprobar como funciona la aplicacin de chat
SignalR.
Conclusin
SignalR es una excelente herramienta que facilita enormemente el desarrollo de sitios
web interactivos con actualizaciones de datos en tiempo real. Se trata todava de un
proyecto en desarrollo pero su facilidad de uso y las caractersticas que ya ofrece su
versin preliminar lo hacen altamente recomendable para este tipo de aplicaciones
web.
esmsdnFebruary 5, 20161
0
2
Es posible que alguna vez nos hayamos preguntado cmo construir una
aplicacin web en tiempo real. Lo primero que probablemente haremos ser
realizar una bsqueda en Internet y veremos que existen muchsimas
tecnologas basadas en muchos lenguajes, y no sabremos siquiera por dnde
empezar.
Si ests en una situacin similar, no te preocupes, porque has venido al sitio
adecuado. En este post vamos a ver cmo podemos comenzar a desarrollar una
aplicacin en tiempo real desde cero, sin tener conocimientos previos del tema.
Para ello vamos a utilizar SignalR. No vamos a compararlo con otras tecnologas
que ya existan, ni vamos a ver en qu es mejor o peor que otras. Pero lo que s
te aseguramos es que una vez lo pruebes va a ser difcil que quieras cambiar.
Qu es SignalR?
SignalR es una librera creada para desarrolladores de ASP.NET que facilita el
proceso de aadir funcionalidades en tiempo real a aplicaciones web, es decir,
la capacidad del servidor de enviar informacin al cliente sin tener que esperar
a que el cliente realice una peticin.
Ejemplos de aplicaciones web en tiempo real pueden ser chats, monitorizacin,
aplicaciones colaborativas o incluso juegos.
Y cmo funciona?
SignalR ofrece una API para crear llamadas remotas (RPC) desde el servidor a
funciones Javascript existentes en el cliente. No tenemos que encargarnos de
gestionar la conexin, ya que SignalR lo hace automticamente. Podemos
enviar mensajes a un cliente especfico o a todos los conectados al servidor.
SignalR se basar en Websocket cuando est disponible. Cuando no sea el caso,
utilizar otra tecnologa disponible para funcionalidades en tiempo real, como
puede ser Server Sent Requests, Forever Frame o Ajax long polling. En funcin
del navegador en el que se ejecute la aplicacin, se escoger un mtodo de
transporte u otro, pero es un proceso totalmente transparente para nosotros,
Una vez lo tengamos, tendremos que aadir las libreras necesarias para utilizar
SignalR. Para ello, hacemos click derecho en el proyecto, le damos a Manage
Nuget Packages, buscamos SignalR e instalamos el
paquete Microsoft.AspNet.SignalR, tal como se indica en la imagen.
Una vez hecho esto, vamos a comenzar a crear la parte del servidor.
Lo primero que tendremos que hacer es registrar la ruta que los clientes
utilizarn para conectarse al Hub, que por defecto ser /signalr(puede
cambiarse si fuese necesario). Esto se hace en el fichero Startup.cs (si al crear
el proyecto no se ha generado ninguno, cralo manualmente). Dentro de la
clase Startup, llamaremos a MapSignalR para registrar dicha ruta. El cdigo nos
debe quedar como podemos ver en la siguiente imagen.
En primer lugar, tenemos un listado para almacenar los usuarios que se van a ir
conectando. De cada uno almacenaremos su nombre de usuario y su ID de
conexin.
A continuacin, nos encontramos con los mtodos que expone el
Hub. Connect y Send se llamarn para almacenar los usuarios que se vayan
agregando y para mandar mensajes a todas las personas conectadas
respectivamente.
Por otro lado, el mtodo onDisconnected() es una sobrecarga de uno de los tres
mtodos que ofrece la clase Hub para controlar el ciclo de vida de conexin y
saber cundo un usuario se ha conectado, desconectado o reconectado tras una
prdida temporal de la conexin, que son los siguientes:
OnConnected()
OnDisconnected()
OnReconnected()
Hemos marcado aquellos mtodos que tienen que ver con SignalR.
En primer lugar, debemos comentar que SignalR genera un proxy
automticamente. Esto nos permite simplificar el cdigo que tenemos que
implementar, pero podramos utilizar igualmente SignalR sin proxy. Nosotros
optamos por hacerlo ya que la sintaxis es mucho ms clara.
Lo que hacemos en primer lugar es obtener la referencia al Hub,
mediante $.connection.chatHub. Cabe destacar que el nombre del Hub debe ser
el mismo que hemos creado en el lado del servidor, salvo que utilizamos
lowerCamelCase para el nombre.
A continuacin, definimos los mtodos que tendr el cliente y que podrn ser
llamados desde el servidor. Para ello, se aaden
mediante ref.client.nombreMetodo, donde ref es la referencia al hub
anteriormente obtenida. En nuestro caso hemos definido dos
mtodos, updateUsers y broadcastMessage, que se encargar de mostrar en
pantalla el mensaje que nos mande el servidor.
Aparecer nuestro chat con el nombre de usuario que nos ha pedido. Si ahora
probamos a abrir otra ventana del navegador y abrimos la aplicacin, al
conectarnos veremos cmo se actualiza la lista de usuarios conectados de
ambos navegadores automticamente.
DEFINICIN DE CHAT
Es un trmino adquirido de la lengua inglesa, que significa charla. Es una conversacin
virtual escrita en tiempo real entre dos o ms personas cuyo medio para poder llevarla a
cabo es internet, por lo que las personas pueden estar situadas en distintas ciudades o
pases, la conversacin puede ser tanto pblica como privada. En el chat puedes
conocer a la persona con la que hablas o utilizar un pseudnimo y mantener el
anonimato, adems al mantener el anonimato, por esta razona la informacin que das a
travs del chat es la que la persona quiere, no siendo en todos los casos veraz.
Un mismo chat puede estar conformado por canales de distinta temtica, los cuales son
zonas virtuales, en la que una persona puede acceder y hablar de ese tema con el grupo
que est conectado a dicho canal e incluso mantener conversaciones privadas con
diferentes personas de dicho grupo.
Conocer gente
Como medio de comunicacin para hablar sobre un tema de inters con un
grupo de gente experta
Como medio de comunicacin entre un grupo de trabajo
Con usos didctico:
Se puede usar en cursos a distancia
Para trabajos en grupos
Para practicar idiomas extranjeros comunicndote con personas de otros pases.
Realizar tutoras
etc.
Con el chat se pueden tomar decisiones inmediatas.
TIPOS DE CHATS
Los diferentes tipos de chats se dividen segn la temtica a la que se refieren o su
formato. Aqu se har alusin a esta ltima caracterstica, as pues estos son:
La parte negativa de este tipo de chat es que si se actualiza la pgina con nueva
informacin, est tiene que cargarse por completo. Es un chat muy dependiente de los
navegadores por lo que cada vez se usa menos.
IRC (Internet Relay Chat):
Es el origen de los chats tal y como se conocen hoy en da. Fue creado en 1988.
Permite la interaccin entre dos o ms personas simultneamente por medio de un
canal.
Para su funcionamiento es necesario un programa descargable, como el mIRC. Por
medio de mIRC accedes a un saln virtual o canal de IRC y cada uno de ellos se enfoca a
un tpico especfico.
Una desventaja es que es ms complicado que los chats web ya que en los IRC se
trabaja con scripts o palabras clave para realizar ciertas acciones como listar los canales
de un servidor o unirte a uno de ellos.
Chats comerciales: Este chat se utilizara para que las empresas den
informacin comercial unas a otras o a sus propios clientes. Es un medio efectivo ya
que no se hace esperar la respuesta. Por ejemplo, en una tienda virtual un posible
cliente que se interesa por un artculo y es atendido en ese mismo instante para resolver
unas dudas puede decidirse a comprar ms fcilmente.
Ejemplos de empresas que utilizan este tipo de servicios son LivePerson y Volcano.
ELCHATYSUSELEMENTOS
El chat es una forma sincrnica de comunicacin entre dos o ms personas
por medio del Internet por lo cual es un medio en donde los usuarios a
travs de una red telemtica coinciden en el tiempo y se comunican entre s
mediante texto, audio y/o vdeo. No obstante, la informacin en audio-vdeo
requiere de una codificacin en ficheros de gran tamao que, a su vez,
necesitan velocidades de transmisin suficientes para que la comunicacin
en tiempo real sea aceptable. En este blog se presenta los elementos del
chat como parte activa del proceso y sin los cuales sera imposible disfrutar
de los beneficios que ofrece la tecnologa disponible para ambientes
virtuales de aprendizaje y/o sociales.
IRC(oInternetRelayChat)
Es conocido popularmente como "chat", y se trata de un medio de
comunicacin que permite realizar conversaciones en tiempo real a travs
de Internet. Aunque normalmente se utiliza para conversar "on-line"
tambin sirve para transmitir ficheros. El IRC fue diseado originalmente por
Jarkko Oikarinen en el verano de 1988. Los primeros servidores se
establecieron en Finlandia y, desde all, se propagaron por ms de 60
pases. Las dos primeras redes fueron Efnet y Anet (1990), luego se creara
Undemet (1993) y Dalnet (1994). A finales de 1995 se crea la red IRC
Hispano para los internautas castellano-parlantes. El IRC hace posible que
diferentes internautas se renan, de modo simultneo, en tomo a canales o
temas de conversacin de todo tipo. En estos canales el usuario expresa sus
opiniones de forma escrita y en tiempo real. As pues, para poder utilizar
IRC, los internautas deben estar conectados al mismo tiempo dentro de un
canal y, de este modo, establecer la conversacin con otros usuarios. Los
canales (tambin conocidos por el nombre de grupos, "rooms",
habitaciones, salas, etc.) Son lugares virtuales donde coinciden los
internautas para tratar los temas ms diversos. Algunos canales tienen un
asunto o tpico de conversacin muy especfico, mientras otros
Elementosdeunchat.
Caractersticas de un Chat
C H AT
Caractersticas de un Chat
Agregar un Chat
Permisos de un Chat
Detalles de un Chat
Informes de Chat
Eliminar un Chat
Usos didcticos
Enlaces
Mdulo Chat
Caractersticas