SEGOVIA MONICA CELIA PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA PROGRAMACIÓN DE APLICACIONES DISTRIBUIDA Una aplicación de Chat en tiempo real 2016 SEGOVIA MONICA CELIA Legajo: 35566
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. 1
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? 2
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. 3
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 4
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 5
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. 6
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. 7
Paso 2: Cree un nuevo proyecto 8
Cree una aplicación ASP.NET C #, de.net Framework 4.5, con el nombre de SignalRChat, y haga clic en OK. 9
Paso 3: Seleccionar plantilla de proyecto MVC, y haga clic en Autenticación de cambio 10
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. 11
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. 12
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. 13
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. 14
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. 15
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. 16
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. 17
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: 18
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 19
Poner el nombre Chat a la vista. 20
Paso 13: Sustituir el contenido de Chat.cshtml con el siguiente código. 21
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. 22
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. 23
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. 24
25
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. 26
27
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 28
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. 29