Вы находитесь на странице: 1из 30

SEGOVIA MONICA CELIA

PROGRAMACIN DE APLICACIONES DISTRIBUIDA

PROGRAMACIN DE
APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Una aplicacin de Chat en tiempo real

2016 SEGOVIA MONICA CELIA


Legajo: 35566
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

INTRODUCION

Visual Studio es un completo entorno de desarrollo integrado para crear aplicaciones


sensacionales para Windows, Android y Apple, adems de aplicaciones web y servicios
de nube innovadores. Soporta varios lenguajes, en los que podemos encontrar C#, C++,
HTML y JavaScrip, entre otros.
Este tutorial brindara los conocimientos bsicos para desarrollar una aplicacin web en el
entorno de desarrollo de Visual Studio 2015 para la Web, en el mismo utilizare la
biblioteca ASP.NET SignalR en la ltima plantilla de proyecto MVC 5, tambin se utilizara
JavaScript. La misma es de fcil entendimiento
SignalR, es una biblioteca o marco de comunicacin bidireccional en Tiempo Real basada
en la web, es decir, aade funcionalidad de la web en Tiempo Real para las aplicaciones
de ASP.NET. En sntesis, se utiliza para acceder al cdigo del servidor y actualizar el
contenido a los clientes conectados al instante en lugar del servidor en espera de la
solicitud del cliente.

1
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

MARCO TEORICO

SignalR es un marco de comunicacin bidireccional tiempo real basada en web. Por


tiempo real, se refiere a los clientes a obtener los mensajes que se envan en tiempo real
a medida que el servidor tiene algo que enviar sin que el cliente haga una solicitud para
ello. Y bidireccional ya que tanto el cliente como el servidor pueden enviar mensajes entre
s.
En los trminos ms simples, la forma en que funciona es el cliente es capaz de llamar a
mtodos en el servidor y el servidor del mismo modo es capaz de llamar a mtodos en el
cliente.

Usos tpicos:
Algunos casos en los que SignalR se puede utilizar para que se pueda apreciar mejor la
tecnologa.
Uso de la sala de Chat
Este es un ejemplo donde los usuarios mantienen el envo de mensajes entre s en un
chat.
Difusin
Este es un ejemplo en el que el servidor tiene que transmitir mensajes a los clientes.
Por ejemplo, las actualizaciones de Facebook, Twitter.
Juegos de Internet
Jugadores que juegan un juego en lnea en el que cada jugador hace alguna vez, la
accin por turno.

Historia de la comunicacin en tiempo real y desafos


Para entender estos conceptos se partirn de las siguientes preguntas
Por qu necesitamos una nueva tecnologa para implementar la comunicacin en tiempo
real?

2
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
La razn es debido a la manera en que funciona el protocolo HTTP. HTTP trabaja en un
mecanismo de peticin / respuesta. Por lo que un cliente (tpicamente un navegador web)
realiza una solicitud HTTP al servidor Web y el servidor Web enva una respuesta HTTP
de vuelta al cliente. A menos que el cliente realiza una solicitud al servidor, el servidor no
tiene conocimiento de quienes son sus clientes y por lo que no se puede enviar un
mensaje al cliente. HTTP es un protocolo sin estado, que esencialmente significa que no
se acuerda de qu cliente realiza una solicitud a la misma y la cantidad de veces. Para
cada solicitud HTTP al servidor Web es un uno independiente. As que por estas razones
una comunicacin en tiempo real bidireccional era un desafo que vendra a solucionar
SignalR.
Pero esto no quiere decir que no se tena este tipo de aplicaciones como un sitio de
actualizaciones de noticias deportivas o un sitio de chat antes de SignalR.
A continuacin se tratara de ver algunas tcnicas para lograr la comunicacin en tiempo
real antes de SignalR.

AJAX polling

Se puede observar en la anterior imagen como el cliente hace algunas solicitudes al


servidor en algunos intervalos peridicos de tiempo. De esta manera se mantiene el
cliente actualizado con los ltimos datos. Como podemos ver, cuando el cliente realiza
una solicitud al servidor, no sabemos a ciencia cierta que el servidor tiene algo nuevo para
enviar, de una manera esas solicitudes podran ser innecesarios. Por otro lado, cuando el
servidor tiene algo nuevo para el cliente no puede enviarlo a menos que el cliente realiza
una solicitud, por lo que no se puede llamar exactamente esta comunicacin en tiempo
real.

3
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Long Polling

El mecanismo long polling utiliza peticiones HTTP para crear una conexin
pseudopersistente. El servidor, en lugar de procesar la peticin y retornar la respuesta
de forma inmediata, espera hasta que haya disponible algn evento o mensaje a enviar al
cliente; en este momento, lo retorna como respuesta a la peticin original y cierra la
conexin. El cliente, por su parte, procesa esta respuesta y realiza inmediatamente
despus una nueva peticin al servidor, que volver a quedar abierta a la espera de
mensajes, y as sucesivamente.
Dado que utiliza HTTP estndar, es vlida para todo tipo de agentes de usuario, y
bastante amigable para proxy, filtros, firewalls y otros inconvenientes que puede haber por
el camino entre los dos extremos.

Como se puede ver, hay una serie de opciones para poner en prctica una comunicacin
bidireccional entre el cliente y el servidor en tiempo real.
Y en este punto es donde entra en escena SignalR, un conjunto de componentes
desarrollados por miembros del equipo de ASP.NET en Microsoft, que nos abstrae de los
detalles subyacentes y nos ofrece la visin y ventajas de un entorno conectado en el que
podemos comunicar cliente y servidor bidireccionalmente, mediante la creacin de un
tnel entre el cliente y el servidor que es bidireccional en la que el servidor puede enviar
mensajes a sus clientes conectados cada vez que quiera.

SignalR - Conceptualmente
SignalR ofrece una visin a muy alto nivel de la comunicacin entre el servidor y los
mltiples clientes que se encuentren a l conectados.
En realidad las conexiones persistentes no existen, o no tienen por qu existir. Se trata de
una abstraccin creada por SignalR, quien se encargar del trabajo sucio que hay por

4
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
debajo, manteniendo la conexin de los clientes con el servidor mediante distintos
mecanismos denominados transportes, que son el conjunto de tecnologas utilizadas
para mantener crear la conexin continua, o al menos la ilusin de su existencia.
Los protocolos de transporte pueden ser sustituidos de forma transparente sin afectar a
las aplicaciones, que trabajarn aisladas de estos detalles. Los sistemas funcionarn
exactamente igual sea cual sea el transporte utilizado, lo que permite que ste sea
elegido en cada escenario en funcin de la disponibilidad de las tecnologas en ambos
extremos.

Por ejemplo, el transporte WebSockets es capaz de crear una conexin con el servidor y
mantenerla abierta de forma continua, aunque requiere que esta tecnologa est
disponible tanto en el cliente (en el caso de clientes web, es necesario que el navegador
implemente WebSockets) como en el servidor.
Debido a ello, y para asegurar la mxima compatibilidad con los clientes, actualmente se
utiliza por defecto el transporte denominado Long polling, que ya hemos comentado
anteriormente.

A pesar de la relativa complejidad que supondra implementar algo as a mano, nosotros


no tendremos que hacer nada: SignalR se encarga de llevar a cabo todas estas tareas
para ofrecernos la sensacin de estar siempre conectados.
Su componente cliente ser el encargado de realizar las conexiones, mantenerse a la
espera de noticias del servidor, reconectar cuando se reciban eventos o cuando por
cualquier otra causa se haya perdido la conectividad, etc., ofrecindonos una superficie
de desarrollo muy simplificada.

El lado servidor de SignalR, por otra parte, ser el encargado de recibir la conexin y
mantenerla en espera, almacenar los mensajes recibidos, realizar el seguimiento de
clientes conectados, enviar mensajes a travs de un bus interno, etc., y de la misma
forma, ofrecindonos un API bastante simple para implementar nuestros servicios.

Implementacin de servicios con SignalR

5
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
SignalR nos ofrece dos frmulas para trabajar sobre las conexiones que crea con el
servidor:
1- usando conexiones persistentes, es la de ms bajo nivel y proporciona
mecanismos simples para registrar conexiones y desconexiones de clientes y
comunicarse de forma bidireccional con ellos
2- usando hubs, que ofrece una abstraccin an mayor, permitiendo la
comunicacin entre cliente y servidor de forma muy ptima. Esta es la opcin que
convendr utilizar en la mayora de ocasiones, por la potencia que aporta y su
gran comodidad de uso.
En cualquiera de los dos casos, y ya centrndonos en el entorno web ms habitual, donde
el servidor es una aplicacin ASP.NET y los clientes van a ser las pginas o vistas, la
implementacin de servicios consistir en:
En el servidor, crear el servicio con las funcionalidades que nos interese, utilizando
las clases disponibles en el ensamblado SignalR.
En cliente, crear el consumidor del servicio utilizando las clases disponibles en la
biblioteca de scripts jQuery.SignalR.js.
Cada una de las dos frmulas citadas tiene sus particularidades, por lo que se las
estudiara mediante el desarrollo de un ejemplo.

En este contexto se desarrollara una aplicacin de Chat en tiempo real con SignalR, muy
parecida a Facebook. Se va a aadir SignalR a una aplicacin ASP.NET utilizando la
plantilla de proyecto MVC 5 y crear una vista de chat para enviar y recibir mensajes.

6
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

TUTORIAL

Introduccin a SignalR 2 implementando ASP.NET MVC 5

Pre-requisitos:
Visual Studio 2015
.NET 4.5
MVC 5
SignalR versin 2

Secciones:
I. Aplicacin SignalR MVC 5
II. Ejecucin cdigo

I. Aplicacin SignalR MVC 5


En esta seccin se muestra cmo crear una aplicacin ASP.NET MVC 5, aadir la
biblioteca SignalR.

Paso 1: Abra Visual Studio 2015.

7
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Paso 2: Cree un nuevo proyecto

8
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Cree una aplicacin ASP.NET C #, de .NET Framework 4.5, con el nombre de


SignalRChat, y haga clic en OK.

9
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
Paso 3: Seleccionar plantilla de proyecto MVC, y haga clic en Autenticacin de cambio

10
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Paso 4: Seleccione No Authentication (Sin autenticacin) en la dialogo Change


Authentication y haga clic en OK.
Si selecciona una autenticacin diferente para la aplicacin, se crear una clase
Startup.cs automticamente; en este tutorial se abarcara la creacin de la clase
Startup.cs, ms adelante se ver su definicin.

11
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
Paso 5: Abrir Tools | NuGet Packate Manager | Packate Manager Console y ejecutar el
siguiente comando. Este paso le suma al proyecto de un conjunto de archivos de
comandos y referencias de montaje que permiten habilitar la funcionalidad SignalR.

install-package Microsoft.AspNet.SignalR

Una vez finalizado el comando, como se observa en la siguiente imagen, la instalacin de


SignalR se realiz exitosamente.

Paso 6: Se puede ver en el Explorador de soluciones que SignalR se ha sido aadido al


proyecto. Expanda la carpeta Scripts.

12
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Paso 7: En el Explorador de soluciones, haga clic en el proyecto, seleccione Agregar |


Nueva carpeta, y aadir una nueva carpeta con el nombre Hubs.

13
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

SignalR Hub

Paso 8: Haga clic con la carpeta recin creada y aada una clase, para ello, haga clic en
Aadir | Clase.

14
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Seleccione el Visual C # | Web | SignalR, seleccionar del panel central SignalR Hub
Class (v2), y poner a la clase el nombre ChatHub.cs.
Esta clase funcionara como servidor de SignalR que enva mensajes a todos los clientes.

15
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

La API SignalR Hub permite realizar llamadas a procedimiento remoto desde un servidor
a los clientes conectados y de los clientes al servidor. En el cdigo del servidor, se definen
los mtodos que pueden ser llamados por los clientes, y se llama a los mtodos que se
ejecutan en el cliente. En el cdigo del cliente, se definen los mtodos que pueden ser
llamados desde el servidor, y se llama a los mtodos que se ejecutan en el servidor.
SignalR se encarga de todas las tuberas de cliente a servidor.

Paso 9: Reemplace el cdigo de la clase ChatHub con el siguiente cdigo.

16
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
En el cdigo de chat, los clientes llaman al mtodo ChatHub.Send para enviar un mensaje
nuevo. El Hub a su vez enva el mensaje a todos los clientes llamando
Clients.All.addNewMessageToPage.

El mtodo Enviar demuestra varios conceptos del Hub:


1- Declara mtodos pblicos en el Hub de manera que los clientes puedan usarlos.
2- Utiliza la caracterstica de Microsoft.AspNet.SignalR.Hub.Clients para acceder a
todos los clientes conectados a este Hub.
3- Llama a una funcin en el cliente (como el addNewMessageToPage funcin) para
actualizar los clientes.

Paso 10: Crear una nueva clase llamada Startup.cs.

17
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Cambiar el contenido del archivo a lo siguiente.

Paso 11: Editar la clase HomeController que se encuentra en Controladores /


HomeController.cs y agregue el mtodo siguiente a la clase. Este mtodo devuelve el
Chat en la vista que va a crear en un paso posterior.

Quedando de esta forma:

18
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

SignalR, jQuery y MCV 5

Paso 12: Generar la vista para el mtodo de Chat:


Seleccione la carpeta de Home y haga clic derecho sobre la carpeta, luego elegir Add |
New Scaffolded Item

19
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Poner el nombre Chat a la vista.

20
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

Paso 13: Sustituir el contenido de Chat.cshtml con el siguiente cdigo.

21
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

El archivo de vista Chat.cshtml muestra cmo utilizar la biblioteca SignalR jQuery para
comunicarse con SignalR Hub. Las tareas esenciales en el cdigo son la creacin de una
referencia al proxy generada automticamente por el Hub, declarando una funcin que el
servidor pueda llamar para empujar el contenido a clientes, e iniciar una conexin para
enviar mensajes al Hub.

El cdigo siguiente declara una referencia a un proxy hub.

La clase Hub en el servidor llama a esta funcin para transferir las actualizaciones de
contenido a cada cliente.

El siguiente cdigo muestra cmo abrir una conexin con el Hub. Primero se inicia la
conexin y luego pasa una funcin para controlar el evento, esto se ejecuta cuando se
hace clic en el botn Enviar en la pgina de Chat.

22
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

II. Ejecucin cdigo

Guardar todo el proyecto


Paso 1: Depurar la aplicacin.
Paso 2: En la lnea de direcciones del navegador, aada /home/chat a la URL de la
pgina por defecto para el proyecto. Se carga la pgina de Chat en una instancia del
navegador y solicita un nombre de usuario.

Paso 3: Introduzca un nombre de usuario, clic en Aceptar.

23
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
Paso 4: Copiar la URL desde la barra de direcciones del navegador y usarlo para abrir
dos ms instancias del navegador. En cada instancia del navegador, introduzca un
nombre de usuario nico.

Paso 5: En cada instancia del navegador, aadir un comentario y haga clic en Enviar. Los
comentarios deben mostrar en todas las instancias del navegador.

24
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

25
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5
Nota: Esta aplicacin de chat enva los mensajes a todos los usuarios actuales. Los
usuarios que se unen a la charla ms adelante vern los mensajes agregados desde el
momento de su adhesin.

Paso 6: La siguiente captura de pantalla muestra la aplicacin de chat que se ejecuta en


un navegador.

Visual Studio 2015 tiene incorporado una herramienta de diagnstico, muestra detalles
como ser: uso de CPU, memoria, etc.

26
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

27
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

INSTRUCTIVOS

A continuacin se listaran una serie de recursos donde se puede acceder a los


instructivos para la realizacin de esta aplicacin.

Se cuenta con un video: https://youtu.be/jeOA5tuuzwI donde se detalla cada paso a


seguir, muy explicativo.

Documentacin digital del mismo contenido, para los que prefieran este modo de gua:
https://drive.google.com/file/d/0ByJw-HSlaZFyOW1sR1VhUExVb1k/view?usp=sharing

Versin PDF:
https://drive.google.com/file/d/0ByJw-HSlaZFyWmhjRFJVS1BTeGM/view?usp=sharing

El ejemplo de la Aplicacin Web de Chat SigalR: https://drive.google.com/file/d/0ByJw-


HSlaZFyT3IwSVdia3Mycnc/view?usp=sharing

28
PROGRAMACIN DE APLICACIONES DISTRIBUIDA
SignalR con ASP.NET MVC 5

CONCLUSION

En este tutorial aprendi la adicin de la biblioteca SignalR a una aplicacin ASP.NET


MVC 5, como crear una clase Hub y el uso de la biblioteca jQuery SignalR en una pgina
Web para enviar mensajes, recibir y mostrar actualizaciones desde el Hub, en sntesis,
como actualizar el contenido en los clientes utilizando este marco para la creacin de
aplicaciones web en tiempo real.

29