Programación de aplicaciones distribuidajsdelacruz.16mb.com/materialpad/finales/Final...

SEGOVIA MONICA CELIA

PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA

PROGRAMACIÓN DE

APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5

SEGOVIA MONICA CELIA Legajo: 35566

Una aplicación de Chat en tiempo real

2016

PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5

1

INTRODUCION

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

sensacionales para Windows, Android y Apple, además 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 básicos para desarrollar una aplicación 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, también se utilizara

JavaScript. La misma es de fácil entendimiento

SignalR, es una biblioteca o marco de comunicación bidireccional en Tiempo Real basada

en la web, es decir, añade funcionalidad de la web en Tiempo Real para las aplicaciones

de ASP.NET. En síntesis, se utiliza para acceder al código del servidor y actualizar el

contenido a los clientes conectados al instante en lugar del servidor en espera de la

solicitud del cliente.


2

MARCO TEORICO

SignalR es un marco de comunicación bidireccional tiempo real basada en web. Por

tiempo real, se refiere a los clientes a obtener los mensajes que se envían 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 términos más simples, la forma en que funciona es el cliente es capaz de llamar a

métodos en el servidor y el servidor del mismo modo es capaz de llamar a métodos en el

cliente.

Usos típicos:

Algunos casos en los que SignalR se puede utilizar para que se pueda apreciar mejor la

tecnología.

Uso de la sala de Chat

Este es un ejemplo donde los usuarios mantienen el envío de mensajes entre sí en un

chat.

Difusión

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 línea en el que cada jugador hace alguna vez, la

acción por turno.

Historia de la comunicación en tiempo real y desafíos

Para entender estos conceptos se partirán de las siguientes preguntas

¿Por qué necesitamos una nueva tecnología para implementar la comunicación en tiempo

real?


3

La razón es debido a la manera en que funciona el protocolo HTTP. HTTP trabaja en un

mecanismo de petición / respuesta. Por lo que un cliente (típicamente un navegador web)

realiza una solicitud HTTP al servidor Web y el servidor Web envía 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 comunicación en tiempo real bidireccional era un desafío que vendría a solucionar

SignalR.

Pero esto no quiere decir que no se tenía este tipo de aplicaciones como un sitio de

actualizaciones de noticias deportivas o un sitio de chat antes de SignalR.

A continuación se tratara de ver algunas técnicas para lograr la comunicación 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 periódicos 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 podrían 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 comunicación en tiempo

real.


4

Long Polling

El mecanismo long polling utiliza peticiones HTTP para crear una conexión

“pseudopersistente”. El servidor, en lugar de procesar la petición y retornar la respuesta

de forma inmediata, espera hasta que haya disponible algún evento o mensaje a enviar al

cliente; en este momento, lo retorna como respuesta a la petición original y cierra la

conexión. El cliente, por su parte, procesa esta respuesta y realiza inmediatamente

después una nueva petición al servidor, que volverá a quedar abierta a la espera de

mensajes, y así sucesivamente.

Dado que utiliza HTTP estándar, es válida 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 práctica una comunicación

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 visión y ventajas de un entorno conectado en el que

podemos comunicar cliente y servidor bidireccionalmente, mediante la creación de un

túnel 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 visión a muy alto nivel de la comunicación entre el servidor y los

múltiples clientes que se encuentren a él conectados.

En realidad las conexiones persistentes no existen, o no tienen por qué existir. Se trata de

una abstracción creada por SignalR, quien se encargará del trabajo sucio que hay por


5

debajo, manteniendo la conexión de los clientes con el servidor mediante distintos

mecanismos denominados “transportes”, que son el conjunto de tecnologías utilizadas

para mantener crear la conexión continua, o al menos la ilusión de su existencia.

Los protocolos de transporte pueden ser sustituidos de forma transparente sin afectar a

las aplicaciones, que trabajarán aisladas de estos detalles. Los sistemas funcionarán

exactamente igual sea cual sea el transporte utilizado, lo que permite que éste sea

elegido en cada escenario en función de la disponibilidad de las tecnologías en ambos

extremos.

Por ejemplo, el transporte WebSockets es capaz de crear una conexión con el servidor y

mantenerla abierta de forma continua, aunque requiere que esta tecnología 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 máxima 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 supondría implementar algo así a mano, nosotros

no tendremos que hacer nada: SignalR se encarga de llevar a cabo todas estas tareas

para ofrecernos la sensación 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., ofreciéndonos una superficie

de desarrollo muy simplificada.

El lado servidor de SignalR, por otra parte, será el encargado de recibir la conexión y

mantenerla en espera, almacenar los mensajes recibidos, realizar el seguimiento de

clientes conectados, enviar mensajes a través de un bus interno, etc., y de la misma

forma, ofreciéndonos un API bastante simple para implementar nuestros servicios.

Implementación de servicios con SignalR


6

SignalR nos ofrece dos fórmulas para trabajar sobre las conexiones que crea con el

servidor:

1- usando “conexiones persistentes”, es la de más 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 abstracción aún mayor, permitiendo la

comunicación entre cliente y servidor de forma muy óptima. Esta es la opción que

convendrá utilizar en la mayoría de ocasiones, por la potencia que aporta y su

gran comodidad de uso.

En cualquiera de los dos casos, y ya centrándonos en el entorno web más habitual, donde

el servidor es una aplicación ASP.NET y los clientes van a ser las páginas o vistas, la

implementación 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 fórmulas citadas tiene sus particularidades, por lo que se las

estudiara mediante el desarrollo de un ejemplo.

En este contexto se desarrollara una aplicación de Chat en tiempo real con SignalR, muy

parecida a Facebook. Se va a añadir SignalR a una aplicación ASP.NET utilizando la

plantilla de proyecto MVC 5 y crear una vista de chat para enviar y recibir mensajes.


7

TUTORIAL

Introducción a SignalR 2 implementando ASP.NET MVC 5

Pre-requisitos:

Visual Studio 2015

.NET 4.5

MVC 5

SignalR versión 2

Secciones:

I. Aplicación SignalR – MVC 5

II. Ejecución código

I. Aplicación SignalR – MVC 5

En esta sección se muestra cómo crear una aplicación ASP.NET MVC 5, añadir la

biblioteca SignalR.

Paso 1: Abra Visual Studio 2015.


8

Paso 2: Cree un nuevo proyecto


9

Cree una aplicación ASP.NET C #, de .NET Framework 4.5, con el nombre de

“SignalRChat”, y haga clic en OK.


10

Paso 3: Seleccionar plantilla de proyecto MVC, y haga clic en Autenticación de cambio


11

Paso 4: Seleccione No Authentication (Sin autenticación) en la dialogo Change

Authentication y haga clic en OK.

Si selecciona una autenticación diferente para la aplicación, se creará una clase

Startup.cs automáticamente; en este tutorial se abarcara la creación de la clase

Startup.cs, más adelante se verá su definición.


12

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 instalación de

SignalR se realizó exitosamente.

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

proyecto. Expanda la carpeta Scripts.


13

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

Nueva carpeta, y añadir una nueva carpeta con el nombre “Hubs”.


14

SignalR Hub

Paso 8: Haga clic con la carpeta recién creada y añada una clase, para ello, haga clic en

Añadir | Clase.


15

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 envía mensajes a todos los clientes.


16

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 código del servidor, se definen

los métodos que pueden ser llamados por los clientes, y se llama a los métodos que se

ejecutan en el cliente. En el código del cliente, se definen los métodos que pueden ser

llamados desde el servidor, y se llama a los métodos que se ejecutan en el servidor.

SignalR se encarga de todas las tuberías de cliente a servidor.

Paso 9: Reemplace el código de la clase ChatHub con el siguiente código.


17

En el código de chat, los clientes llaman al método ChatHub.Send para enviar un mensaje

nuevo. El Hub a su vez envía el mensaje a todos los clientes llamando

Clients.All.addNewMessageToPage.

El método Enviar demuestra varios conceptos del Hub:

1- Declara métodos públicos en el Hub de manera que los clientes puedan usarlos.

2- Utiliza la característica de Microsoft.AspNet.SignalR.Hub.Clients para acceder a

todos los clientes conectados a este Hub.

3- Llama a una función en el cliente (como el addNewMessageToPage función) para

actualizar los clientes.

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


18

Cambiar el contenido del archivo a lo siguiente.

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

HomeController.cs y agregue el método siguiente a la clase. Este método devuelve el

Chat en la vista que va a crear en un paso posterior.

Quedando de esta forma:


19

SignalR, jQuery y MCV 5

Paso 12: Generar la vista para el método de Chat:

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

New Scaffolded Item…


20

Poner el nombre Chat a la vista.


21

Paso 13: Sustituir el contenido de Chat.cshtml con el siguiente código.


22

El archivo de vista Chat.cshtml muestra cómo utilizar la biblioteca SignalR jQuery para

comunicarse con SignalR Hub. Las tareas esenciales en el código son la creación de una

referencia al proxy generada automáticamente por el Hub, declarando una función que el

servidor pueda llamar para empujar el contenido a clientes, e iniciar una conexión para

enviar mensajes al Hub.

El código siguiente declara una referencia a un proxy hub.

La clase Hub en el servidor llama a esta función para transferir las actualizaciones de

contenido a cada cliente.

El siguiente código muestra cómo abrir una conexión con el Hub. Primero se inicia la

conexión y luego pasa una función para controlar el evento, esto se ejecuta cuando se

hace clic en el botón Enviar en la página de Chat.


23

II. Ejecución código

Guardar todo el proyecto

Paso 1: Depurar la aplicación.

Paso 2: En la línea de direcciones del navegador, añada /home/chat a la URL de la

página por defecto para el proyecto. Se carga la página de Chat en una instancia del

navegador y solicita un nombre de usuario.

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


24

Paso 4: Copiar la URL desde la barra de direcciones del navegador y usarlo para abrir

dos más instancias del navegador. En cada instancia del navegador, introduzca un

nombre de usuario único.

Paso 5: En cada instancia del navegador, añadir un comentario y haga clic en Enviar. Los

comentarios deben mostrar en todas las instancias del navegador.


25


26

Nota: Esta aplicación de chat envía los mensajes a todos los usuarios actuales. Los

usuarios que se unen a la charla más adelante verán los mensajes agregados desde el

momento de su adhesión.

Paso 6: La siguiente captura de pantalla muestra la aplicación de chat que se ejecuta en

un navegador.

Visual Studio 2015 tiene incorporado una herramienta de diagnóstico, muestra detalles

como ser: uso de CPU, memoria, etc.


27


28

INSTRUCTIVOS

A continuación se listaran una serie de recursos donde se puede acceder a los

instructivos para la realización de esta aplicación.

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

seguir, muy explicativo.

Documentación digital del mismo contenido, para los que prefieran este modo de guía:

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

Versión PDF:

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

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

HSlaZFyT3IwSVdia3Mycnc/view?usp=sharing

https://youtu.be/jeOA5tuuzwI

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

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

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

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


29

CONCLUSION

En este tutorial aprendió la adición de la biblioteca SignalR a una aplicación ASP.NET

MVC 5, como crear una clase Hub y el uso de la biblioteca jQuery SignalR en una página

Web para enviar mensajes, recibir y mostrar actualizaciones desde el Hub, en síntesis,

como actualizar el contenido en los clientes utilizando este marco para la creación de

aplicaciones web en tiempo real.

Programación de aplicaciones distribuidajsdelacruz.16mb.com/materialpad/finales/Final...

Documents

Transcript of Programación de aplicaciones distribuidajsdelacruz.16mb.com/materialpad/finales/Final...