Aplicaciones en .NET con SignalR

  • RSS
  • Add To My MSN
  • Add To Windows Live
  • Add To My Yahoo
  • Add To Google

Statistics

  • Entries (69)
  • Comments (98)
Posted by Pavel Espitia Friday, December 14, 2012 7:56:00 AM

En la actualidad con la llegada de nuevas tecnologías como los WebSockets y los entornos de programación como Node.JS las aplicaciones en tiempo real, asíncronas, multi usuario y altamente escalables son una gran necesidad, sin embargo en cuanto a aplicaciones desarrolladas en tecnologías anteriores esto solo era posible en una pequeña parte y el proceso era largo y tedioso, hoy en día existen librerias como SignalR que permiten que nuestras aplicaciones en .NET cumplan estos requisitos mencionados anteriormente, sin mas veremos como crear una aplicación web para chatear usando SignalR y algo de magia !.

1. Iniciamos creando un nuevo proyecto ASP.NET Empty Web Application y Framework 4.5

 

 
 


 2. En el proyecto añadimos un nuevo item, en este caso será una página HTML la cual llamaremos Index

 

 

 

 

 

 

 

 

 

3. Hacemos click derecho en el proyecto, buscamos el administrador de paquetes de NuGet y hacemos click en el

 

 

 

 

 

 

 

 

 

 

4. En este punto buscamos el paquete Microsoft.AspNet.SignalR algo importante a tener en cuenta es cambiar la opción donde dice Stable Only a Include Prerelease, seleccionamos el paquete y damos click en Install

 

 

 

 

 

 

 

 

 

 

Aceptamos la licencia en este punto

 

 

 

 

 

 

 

 

 

 

 

 

5. Cuando se completa la instalación del paquete ya vemos los archivos necesarios en la carpeta Scripts y mas referencias agregadas

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. En este punto vamos a crear una clase que herede de la clase Hub de SignalR, esta clase va a ser la encargada de la comunicación entre clientes y servidor.
Agregamos una clase llamada Chat, le añadimos un using a Microsoft.AspNet.SignalR.Hubs y hacemos que la clase herede de Hub.
Creamos un método con un parámetro, en nuestro caso el método se llama sendMessage y tiene un parámetro de tipo string llamado message, este método va a ser el encargado de distribuir el mensaje a todos los clientes.
En el método que creamos para distribuir el mensaje se va a usar la clase Clients de SignalR, de esta manera podemos distribuir el mensaje a todos los clientes, a un grupo en especifico o a varias opciones que trae por defecto, en nuestro caso el mensaje va a ser para todos los clientes entonces usamos Clients.All y al ser este un objeto de tipo dynamic de .NET podemos añadirle propiedades o métodos en tiempo de ejecución en vez de tiempo de ejecución (Mas información de dynamic http://bit.ly/Xh19z5 ), nuestro método se va a llamar AddMessage y recibe el parámetro message, cuando finalicemos nuestra clase debe verse de la siguiente forma:

 

 

 

 

 

 

 

 

 

Nota: el nombre del método por alguna razón que desconozco tiene que iniciar con minúscula, intenté varias veces llamándolo SendMessage y no funcionaba. (se agradece si alguien sabe porqué :P )


7. Ya teniendo la manera como el servidor va a transmitir la información o en nuestro caso un mensaje vamos a ver como trabajar con la parte del cliente para recibir y enviar mensajes.
En la página Index.html que creamos anteriormente añadimos un control input de tipo texto, otro input de tipo botón y una lista no ordenada (UL)

<input type="text" id="msg" value=" " />
<input type="button" id="send" value="send" />
<ul id="message"></ul>

después de esto añadimos añadimos una referencia a jQuery y a la libreria de javascript de SignalR, adicional agregamos una referencia a signalR/hubs que es donde nuestra aplicación crea un script según los hubs creados

<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-1.0.0-alpha2.min.js"></script>
<script src="signalR/hubs"></script>

despues de esto añadimos el siguiente texto donde le decimos a SignalR como trabajar con el cliente

<script>
$(function () {
//Conexion con el ID de nuestr Hub (clase)
var chat = $.connection.chat;
/*Como va a manejar la ejecución del método AddMessage que creamos en nuestra clase Chat
se usa client para saber que se va a usar del lado del cliente (en la clase Chat
usamos Clients)*/
chat.client.AddMessage = function (message) {
$('#message').append('<li>' + message + '</li>');
};
/*Cuando se inicia la conexión y está lista para usarse (done) le decimos que en el click
del botón send ejecute el método SendMessage y su parámetro va a ser el valor
del campo de texto msg*/
$.connection.hub.start().done(function () {
$('#send').click(function () {
chat.server.sendMessage($('#msg').val());
});
});
});
</script>

Nuestra página html en estos momentos debe estar de la siguiente manera:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="text" id="msg" value=" " />
<input type="button" id="send" value="send" />
<ul id="message">
</ul>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-1.0.0-alpha2.min.js"></script>
<script src="signalR/hubs"></script>
<script>
$(function () {
//Conexion con el ID de nuestr Hub (clase)
var chat = $.connection.chat;
/*Como va a manejar la ejecución del método AddMessage que creamos en nuestra clase Chat
se usa client para saber que se va a usar del lado del cliente (en la clase Chat
usamos Clients)*/
chat.client.AddMessage = function (message) {
$('#message').append('<li>' + message + '</li>');
};
/*Cuando se inicia la conexión y está lista para usarse (done) le decimos que en el click
del botón send ejecute el método SendMessage y su parámetro va a ser el valor
del campo de texto msg*/
$.connection.hub.start().done(function () {
$('#send').click(function () {
chat.server.sendMessage($('#msg').val());
});
});
});
</script>
</body>
</html>

En este punto ejecutamos la aplicación y podemos probar el envío de mensajes, para ver mejor la funcionalidad podemos abrir dos navegadores distintos y empezar a usar la aplicación.


Siguiendo el concepto de tiempo real del chat podemos empezar a pensar en muchas más aplicaciones que aprovechen al máximo esta característica.

Notas del post:
1. Al inicio se pueden enredar con algunas cosas como por ejemplo el nombre del método que debe iniciar en minúscula, pero es bastante fácil siguiendo este post.
2. La versión actual de SignalR es PreRelease por lo tanto puede que cambien muchas cosas que se muestran acá, este post se hizo con la versión 1.0.0-alpha2


Saludos !.

 

Post original en http://bit.ly/XhnOLI

View User Profile for Pavel Espitia

Comments

Comments are closed on this post.