programación de aplicaciones distribuidajsdelacruz.16mb.com/materialpad/finales/final...
Post on 20-Oct-2018
227 Views
Preview:
TRANSCRIPT
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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?
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
9
Cree una aplicación ASP.NET C #, de .NET Framework 4.5, con el nombre de
“SignalRChat”, y haga clic en OK.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
10
Paso 3: Seleccionar plantilla de proyecto MVC, y haga clic en Autenticación de cambio
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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”.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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:
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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…
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
20
Poner el nombre Chat a la vista.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
21
Paso 13: Sustituir el contenido de Chat.cshtml con el siguiente código.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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
PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA SignalR con ASP.NET MVC 5
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.
top related