Laboratorio práctico: Aplicaciones web en tiempo real con SignalR

por el equipo de Web Camps

Advertencia

Esta documentación no se aplica a la última versión de SignalR. Eche un vistazo a SignalR de ASP.NET Core.

Descarga del kit de entrenamiento de Web Camps, versión de octubre de 2015

Las aplicaciones web en tiempo real presentan la capacidad de insertar contenido del lado servidor en los clientes conectados según va ocurriendo, en tiempo real. Para los desarrolladores de ASP.NET, ASP.NET SignalR es una biblioteca que permite aportar funcionalidad web en tiempo real a sus aplicaciones. Aprovecha varios transportes y selecciona automáticamente el mejor disponible, en función de las mejores opciones disponibles tanto para el cliente como para el servidor. Aprovecha WebSocket, una API HTML5 que permite la comunicación bidireccional entre el explorador y el servidor.

Además, SignalR ofrece una API sencilla de alto nivel para efectuar RPC de servidor a cliente (llamar a funciones de JavaScript en los exploradores de los clientes desde código .NET del lado servidor) en la aplicación de ASP.NET, así como para agregar enlaces útiles para la administración de conexiones, como eventos de conexión o desconexión, conexiones de agrupación y autorización.

SignalR es una abstracción sobre algunos de los transportes necesarios para llevar a cabo el trabajo en tiempo real entre el cliente y el servidor. Una conexión de SignalR se inicia como HTTP y, a continuación, asciende a una conexión WebSocket, si está disponible. WebSocket es el transporte ideal para SignalR, ya que hace el uso más eficaz de la memoria del servidor, tiene la menor latencia y presenta las características más subyacentes (como la comunicación dúplex completa entre el cliente y el servidor), pero también tiene los requisitos más estrictos: WebSocket requiere que el servidor use Windows Server 2012 o Windows 8, junto con .NET Framework 4.5. Si no se cumplen estos requisitos, SignalR intentará usar otros transportes para efectuar sus conexiones (como los sondeos largos de Ajax).

La API de SignalR contiene dos modelos para comunicarse entre clientes y servidores: conexiones persistentes y concentradores. Una conexión representa un punto de conexión simple para enviar mensajes de un solo destinatario, agrupados o de difusión. Un concentrador es una canalización de alto nivel basada en la API de conexión que permite que el cliente y el servidor llamen a métodos directamente entre ellos.

SignalR Architecture

Todos los fragmentos de código y código de ejemplo se incluyen en el kit de formación de Web Camps (versión de octubre de 2015), disponible en https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. Tenga en cuenta que el vínculo de instalación de esa página ya no funciona; como alternativa, use uno de los vínculos en la sección de recursos.

Información general

Objetivos

En este laboratorio práctico, aprenderá a:

  • enviar notificaciones desde el servidor al cliente mediante SignalR;
  • escalar horizontalmente la aplicación SignalR mediante SQL Server.

Requisitos previos

Se requiere lo siguiente para completar este laboratorio práctico:

Configuración

Para ejecutar los ejercicios en este laboratorio práctico, primero deberá configurar el entorno.

  1. Abra la ventana del explorador de Windows y vaya a la carpeta Source del laboratorio.
  2. Haga clic con el botón derecho en Setup.cmd y seleccione Ejecutar como administrador para iniciar el proceso de instalación que configurará el entorno e instalará los fragmentos de código de Visual Studio para este laboratorio.
  3. Si se muestra el cuadro de diálogo Control de cuentas de usuario, confirme la acción para continuar.

Nota:

Asegúrese de que ha comprobado todas las dependencias de este laboratorio antes de ejecutar la instalación.

Uso de los fragmentos de código

A lo largo del documento de laboratorio, se le pedirá que inserte bloques de código. Para mayor comodidad, la mayoría de este código se proporciona como fragmentos de código de Visual Studio, a los que puede acceder desde Visual Studio 2013 para evitar tener que agregarlo manualmente.

Nota:

Cada ejercicio va acompañado de una solución inicial ubicada en la carpeta Begin del ejercicio que le permite seguir cada ejercicio independientemente de los demás. Tenga en cuenta que los fragmentos de código que se agregan durante un ejercicio faltan en estas soluciones iniciales y es posible que no funcionen hasta que haya completado el ejercicio. Dentro del código fuente de un ejercicio, también encontrará una carpeta End que contiene una solución de Visual Studio con el código que resulta de completar los pasos del ejercicio correspondiente. Puede usar estas soluciones como guía si necesita ayuda adicional a medida que trabaja en este laboratorio práctico.


Ejercicios

Este laboratorio práctico incluye los siguientes ejercicios:

  1. Tareas con datos en tiempo real mediante SignalR
  2. Escalado horizontal mediante SQL Server

Tiempo estimado para completar este laboratorio: 60 minutos

Nota:

Cuando inicie Visual Studio por primera vez, debe seleccionar una de las colecciones de configuración predefinidas. Cada colección predefinida está diseñada para coincidir con un estilo de desarrollo determinado y determina los diseños de ventana, el comportamiento del editor, los fragmentos de código de IntelliSense y las opciones del cuadro de diálogo. Los procedimientos de este laboratorio describen las acciones necesarias para realizar una tarea determinada en Visual Studio al usar la colección Configuración de desarrollo general. Si elige una colección de configuraciones diferente para el entorno de desarrollo, puede haber diferencias en los pasos que debe tener en cuenta.

Ejercicio 1: tareas con datos en tiempo real mediante SignalR

Aunque el chat es el ejemplo más utilizado, puede hacer mucho más con las funciones web en tiempo real. Cada vez que un usuario actualiza una página web para ver nuevos datos, o cuando la página ejecuta sondeos largos para recuperar nuevos datos, puede utilizarse SignalR.

SignalR admite funciones de push o difusión de servidor; controla la administración de conexiones automáticamente. En las conexiones HTTP clásicas para la comunicación de cliente-servidor se vuelve a establecer la conexión para cada solicitud; en cambio, SignalR ofrece una conexión persistente entre el cliente y el servidor. En SignalR, el código de servidor llama a un código de cliente en el explorador mediante llamadas a procedimiento remoto (RPC), en lugar del modelo de solicitud-respuesta que conocemos hoy.

En este ejercicio, configurará la aplicación Geek Quiz para usar SignalR y mostrar el panel de estadísticas con las métricas actualizadas sin tener que actualizar la página entera.

Tarea 1: Exploración de la página de estadísticas de Geek Quiz

En esta tarea, examinará la aplicación y comprobará cómo se muestra la página de estadísticas y cómo puede mejorar la forma en que se actualiza la información.

  1. Abra Visual Studio Express 2013 para Web y abra la solución de GeekQuiz.sln ubicada en la carpeta Source\Ex1-WorkingWithRealTimeData\Begin.

  2. Presione F5 para ejecutar la solución. La página Iniciar sesión debería aparecer en el explorador.

    Running the solution

    Ejecución de la solución

  3. Haga clic en Registro, en la esquina superior derecha de la página, para crear un nuevo usuario en la aplicación.

    Register link

    Enlace de registro

  4. En la página de registro, escriba un nombre de usuario y una contraseña; a continuación, haga clic en Registrar.

    Registering a user

    Registro de un usuario

  5. La aplicación registra la nueva cuenta y el usuario se autentica y se redirige de nuevo a la página principal, que muestra la primera pregunta del cuestionario.

  6. Abra la página de estadísticas en una nueva ventana; coloque la página principal y la página de estadísticas en paralelo.

    Side-by-side windows

    Ventanas en paralelo

  7. En la página principal, haga clic en una de las opciones para responder a la pregunta.

    Answering a question

    Responder a una pregunta

  8. Después de hacer clic en uno de los botones, debería aparecer la respuesta.

    Question answered correct

    Pregunta respondida correctamente

  9. Observe que la información que aparece en la página de estadísticas está obsoleta. Actualice la página para ver los resultados actualizados.

    Statistics page

    Página de estadísticas

  10. Regrese a Visual Studio y detenga la depuración.

Tarea 2: Agregar SignalR a Geek Quiz para mostrar gráficos en línea

En esta tarea, agregará SignalR a la solución y enviará actualizaciones a los clientes automáticamente cuando se envíe una nueva respuesta al servidor.

  1. En el menú Herramientas de Visual Studio, seleccione Administrador de paquetes NuGet y, a continuación, haga clic en Consola del Administrador de paquetes.

  2. En la ventana Consola del Administrador de paquetes, ejecute el siguiente comando:

    Install-Package Microsoft.AspNet.SignalR
    

    SignalR package installation

    Instalación de paquete SignalR

    Nota:

    Al instalar paquetes NuGet de SignalR, versión 2.0.2, desde una nueva aplicación MVC 5, deberá actualizar manualmente los paquetes OWIN a la versión 2.0.1 (o superior) antes de instalar SignalR. Para ello, puede ejecutar el siguiente script en la consola del administrador de paquetes:

    get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
    

    En una versión futura de SignalR, las dependencias de OWIN se actualizarán automáticamente.

  3. En el Explorador de soluciones, expanda la carpeta Scripts y observe que los archivos js de SignalR se han agregado a la solución.

    SignalR JavaScript references

    Referencias de JavaScript de SignalR

  4. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto GeekQuiz, seleccione Agregar | Nueva carpeta, y nómbrela como Hubs.

  5. Haga clic con el botón derecho en la carpeta Hubs y seleccione Agregar | Nuevo elemento.

    Add new item

    Agregar nuevo elemento

  6. En el cuadro de diálogo Agregar nuevo elemento, seleccione el nodo Visual C# | Web | SignalR en el panel izquierdo, seleccione SignalR Hub Class (v2) en el panel central, asigne al archivo el nombre StatisticsHub.cs y haga clic en Agregar.

    Add new item dialog box

    Cuadro de diálogo «Agregar nuevo elemento»

  7. Sustituya el código en la clase StatisticsHub por el código siguiente:

    (Fragmento de código: RealTimeSignalR - Ex1 - StatisticsHubClass)

    namespace GeekQuiz.Hubs
    {
        using Microsoft.AspNet.SignalR;
    
        public class StatisticsHub : Hub
        {
        }
    }
    
  8. Abra Startup.cs y agregue la línea siguiente al final del método de configuración.

    (Fragmento de código: RealTimeSignalR - Ex1 - MapSignalR)

    public void Configuration(IAppBuilder app)
    {
        this.ConfigureAuth(app);
        app.MapSignalR();
    }
    
  9. Abra la página StatisticsService.cs dentro de la carpeta de servicios y agregue las siguientes directivas using.

    (Fragmento de código: RealTimeSignalR - Ex1 - UsingDirectives)

    using Microsoft.AspNet.SignalR;
    using GeekQuiz.Hubs;
    
  10. Para notificar a los clientes conectados las actualizaciones, primero se recupera un objeto de contexto para la conexión actual. El objeto Hub contiene métodos para enviar mensajes a un solo cliente o difundir a todos los clientes conectados. Agregue el método siguiente a la clase StatisticsService para transmitir los datos de estadísticas.

    (Fragmento de código: RealTimeSignalR - Ex1 - NotifyUpdatesMethod)

    public async Task NotifyUpdates()
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>();
        if (hubContext != null)
        {
             var stats = await this.GenerateStatistics();
             hubContext.Clients.All.updateStatistics(stats);
        }
    }
    

    Nota:

    En el código anterior, usa un nombre de método arbitrario para llamar a una función en el cliente (es decir, updateStatistics). El nombre del método que especifique se interpreta como un objeto dinámico, lo que significa que no hay ninguna validación en tiempo de compilación ni IntelliSense. Se evalúa la expresión en tiempo de ejecución. Cuando se ejecuta la llamada al método, SignalR envía el nombre del método y los valores de parámetro al cliente. Si el cliente tiene un método que coincide con el nombre, se llama a ese método y los valores de parámetro se pasan a él. Si no se encuentra ningún método coincidente en el cliente, no se genera ningún error. Para más información, consulte la guía de API Hubs de SignalR de ASP.NET.

  11. Abra la página TriviaController.cs dentro de la carpeta de controladores y agregue las siguientes directivas using.

    using GeekQuiz.Services;
    
  12. Agregue el siguiente código destacado al método de acción Post:

    (Fragmento de código: RealTimeSignalR - Ex1 - NotifyUpdatesCall)

    public async Task<IHttpActionResult> Post(TriviaAnswer answer)
    {
        if (!ModelState.IsValid)
        {
             return this.BadRequest(this.ModelState);
        }
    
        answer.UserId = User.Identity.Name;
    
        var isCorrect = await this.StoreAsync(answer);
    
        var statisticsService = new StatisticsService(this.db);
        await statisticsService.NotifyUpdates();
    
        return this.Ok<bool>(isCorrect);
    }
    
  13. Abra la página Statistics.cshtml dentro de carpeta Vistas | Inicio. Busque la sección Scripts y agregue las siguientes referencias de script al principio de la sección.

    (Fragmento de código: RealTimeSignalR - Ex1 - SignalRScriptReferences)

    @section Scripts {
        @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
        @Scripts.Render("~/signalr/hubs");
        ...
    }
    

    Nota:

    Cuando agregue SignalR y otras bibliotecas de scripts a su proyecto de Visual Studio, es posible que el administrador de paquetes instale versiones de los archivos de script de SignalR más recientes que las versiones mostradas en este tema. Asegúrese de que la referencia a scripts de su código coincida con las versiones de las bibliotecas de scripts instaladas en su proyecto.

  14. Agregue el siguiente código destacado para conectar el cliente al concentrador de SignalR y actualizar los datos de estadísticas cuando se reciba un nuevo mensaje desde el concentrador.

    (Fragmento de código: RealTimeSignalR - Ex1 - SignalRClientCode)

    @section Scripts {
        ...
        <script>
            ...
    
            var connection = $.hubConnection();
            var hub = connection.createHubProxy("StatisticsHub");
            hub.on("updateStatistics", function (statistics) {
                    statisticsData = statistics;
                    $("#correctAnswersCounter").text(statistics.CorrectAnswers);
                    $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers);
    
                    showCharts(statisticsData);
              });
    
            connection.start();
        </script>
    }
    

    En este código, va a crear un proxy de concentrador y registrar un controlador de eventos para escuchar los mensajes enviados por el servidor. En este caso, escuchará los mensajes enviados a través del método updateStatistics.

Tarea 3: ejecución de la solución

En esta tarea, ejecutará la solución para comprobar que la vista de estadísticas se actualiza automáticamente mediante SignalR después de responder a cada nueva pregunta.

  1. Presione F5 para ejecutar la solución.

    Nota:

    Si aún no ha iniciado sesión en la aplicación, inicie sesión con el usuario que creó en la tarea 1.

  2. Abra la página de estadísticas en una nueva ventana; coloque la página principal y la página de estadísticas en paralelo, igual que en la tarea 1.

  3. En la página principal, haga clic en una de las opciones para responder a la pregunta.

    Answering another question

    Responder a otra pregunta

  4. Después de hacer clic en uno de los botones, debería aparecer la respuesta. Observe que la información de estadísticas de la página se actualiza automáticamente después de responder a la pregunta con la información actualizada, sin tener que actualizar la página entera.

    Statistics page refreshed after answer

    Página de estadísticas actualizada después de la respuesta

Ejercicio 2: escalado horizontal mediante SQL Server

Por lo general, al escalar una aplicación web, se puede elegir entre opciones de escalado vertical y escalado horizontal. Escalar verticalmente significa usar un servidor mayor con más recursos (CPU, RAM, etc.), mientras que escalar horizontalmente significa agregar más servidores para controlar la carga. El problema con esta última opción es que los clientes se pueden enrutar a distintos servidores; un cliente conectado a un servidor no recibirá mensajes enviados desde otro servidor.

Puede resolver estos problemas mediante un componente denominado backplane, para poder reenviar mensajes entre servidores. Si se habilita un backplane, cada instancia de aplicación envía mensajes al backplane y este los reenvía a las demás instancias de aplicación.

Actualmente existen tres tipos de backplanes para SignalR:

  • Windows Azure Service Bus. Service Bus es una infraestructura de mensajería con la que los componentes pueden enviar mensajes acoplados de forma flexible.
  • SQL Server. El backplane de SQL Server escribe mensajes en tablas SQL. El backplane usa Service Broker para una mensajería eficaz; sin embargo, también funciona aunque Service Broker no esté habilitado.
  • Redis. Redis es un almacén de clave-valor en memoria. Redis admite un patrón de publicación/suscripción ("pub/sub") para enviar mensajes.

Cada mensaje se envía a través de un bus de mensajes. Un bus de mensajes implementa la interfaz IMessageBus, que ofrece una abstracción de publicación/suscripción. Los backplanes sustituyen el IMessageBus predeterminado por un bus diseñado para el backplane en cuestión.

Cada instancia del servidor se conecta al backplane a través del bus. Cada mensaje que se envía llega al backplane y este, a su vez, lo envía a cada servidor. Cuando un servidor recibe un mensaje del backplane, almacena el mensaje en su caché local. A continuación, el servidor entrega mensajes a los clientes desde su caché local.

Para obtener más información sobre cómo funciona el backplane de SignalR, lea este artículo.

Nota:

Hay algunos escenarios en los que un backplane puede convertirse en un cuello de botella. Estos son algunos escenarios típicos de SignalR:

  • Difusión de servidor (por ejemplo, teletipo de bolsa): los backplanes funcionan bien en este escenario, ya que el servidor controla la velocidad a la que se envían los mensajes.
  • Cliente a cliente (por ejemplo, chat): en este escenario, el backplane podría convertirse en un cuello de botella si el número de mensajes se escala con el número de clientes; es decir, si la tasa de mensajes crece proporcionalmente a medida que se unen más clientes.
  • Tiempo real de alta frecuencia (por ejemplo, juegos en tiempo real): no se recomienda un backplane para este escenario.

En este ejercicio, usará SQL Server para distribuir los mensajes a través de la aplicación Geek Quiz. Ejecutará estas tareas en una sola máquina de prueba para aprender a establecer la configuración; no obstante, para obtener el efecto completo, deberá implementar la aplicación SignalR en dos o más servidores. También debe instalar SQL Server en uno de los servidores o en un servidor dedicado independiente.

Scale Out Using SQL Server Diagram

Tarea 1: comprensión del escenario

En esta tarea, ejecutará dos instancias de Geek Quiz simulando varias instancias de IIS en el equipo local. En este escenario, al responder a preguntas de cultura general en una aplicación, la actualización no se notifica en la página de estadísticas de la segunda instancia. Esta simulación es similar a un entorno en el que la aplicación se implementa en varias instancias y usa un equilibrador de carga para comunicarse con ellos.

  1. Abra la solución Begin.sln ubicada en la carpeta Source/Ex2-ScalingOutWithSQLServer/Begin. Una vez cargada, observará en el explorador de servidores que la solución tiene dos proyectos con estructuras idénticas, pero con nombres diferentes. Esto simulará la ejecución de dos instancias de la misma aplicación en la máquina local.

    Begin Solution Simulating 2 Instances of Geek Quiz

    Inicio de la solución de simulación de dos instancias de Geek Quiz

  2. Abra la página de propiedades de la solución; para ello, haga clic con el botón derecho en el nodo de la solución y seleccione Propiedades. En la sección de proyecto de inicio, seleccione Varios proyectos de inicio y cambie el valor de la acción para ambos proyectos a inicio.

    Starting Multiple Projects

    Inicio de varios proyectos

  3. Presione F5 para ejecutar la solución. La aplicación iniciará dos instancias de Geek Quiz en puertos diferentes, simulando varias instancias de la misma aplicación. Ancle uno de los exploradores a la izquierda y el otro a la derecha de la pantalla. Inicie sesión con sus credenciales o registre un nuevo usuario. Una vez que haya iniciado sesión, mantenga la página de preguntas a la izquierda y acceda a la página de estadísticas en el explorador de la derecha.

    Geek Quiz Side by Side

    Geek Quiz en paralelo

    Geek Quiz in Different Ports

    Geek Quiz en diferentes puertos

  4. Comience a responder preguntas en el explorador izquierdo; observará que la página de estadísticas del explorador de la derecha no se actualiza. Esto se debe a que SignalR usa una caché local para distribuir mensajes entre sus clientes y este escenario simula varias instancias, por lo que la memoria caché no se comparte entre ellos. Para comprobar que SignalR funciona, lleve a cabo los mismos pasos, pero use una sola aplicación. En las siguientes tareas, configurará un backplane para replicar los mensajes entre instancias.

  5. Regrese a Visual Studio y detenga la depuración.

Tarea 2: creación del backplane de SQL Server

En esta tarea, creará una base de datos que servirá como un backplane para la aplicación Geek Quiz. Usará el Explorador de objetos de SQL Server para examinar el servidor e inicializar la base de datos. Además, habilitará Service Broker.

  1. En Visual Studio, abra el menú Vista y seleccione el Explorador de objetos de SQL Server.

  2. Haga clic con el botón derecho en el nodo de SQL Server y seleccione la opción Agregar SQL Server... para conectarse a la instancia LocalDB.

    Adding a SQL Server Instance

    Adición de una instancia de SQL Server al Explorador de objetos de SQL Server

  3. Establezca el nombre del servidor como (localdb)\v11.0 y deje la autenticación de Windows como modo de autenticación. Haga clic en Conectar para continuar.

    Connecting to LocalDB

    Conexión a LocalDB

  4. Ahora que se ha conectado a la instancia de LocalDB, deberá crear una base de datos que represente el backplane de SQL Server para SignalR. Para ello, haga clic con el botón derecho en el nodo de bases de datos y seleccione Agregar nueva base de datos.

    Adding a new database

    Adición de una nueva base de datos

  5. Nombre la base de datos como SignalR y haga clic en Aceptar para crearla.

    Creating the SignalR database

    Creación de la base de datos SignalR

    Nota:

    Puede elegir cualquier nombre para la base de datos.

  6. Para recibir actualizaciones de forma más eficaz desde el backplane, se recomienda habilitar Service Broker para la base de datos. Service Broker ofrece compatibilidad nativa para las aplicaciones de mensajería y de cola en SQL Server. El backplane también funciona sin Service Broker. Para abrir una nueva consulta, haga clic con el botón derecho en la base de datos y seleccione Nueva consulta.

    Opening a New Query

    Apertura de una nueva consulta

  7. Para comprobar si está habilitado Service Broker, consulte la columna is_broker_enabled en la vista de catálogo sys.databases. Ejecute el siguiente script en la ventana de consulta que acaba de abrir.

    SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
    

    Querying the Service Broker Status

    Consulta del estado de Service Broker

  8. Si el valor de la columna is_broker_enabled de la base de datos es "0", use el siguiente comando para habilitarla. Sustituya <YOUR-DATABASE> por el nombre que haya establecido al crear la base de datos (por ejemplo, SignalR).

    ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
    

    Enabling Service Broker

    Habilitación de Service Broker

    Nota:

    Si parece que la consulta lleva a un interbloqueo, asegúrese de que no haya aplicaciones conectadas a la base de datos.

Tarea 3: configuración de la aplicación SignalR

En esta tarea, configurará Geek Quiz para que se conecte al backplane de SQL Server. Primero, agregará el paquete NuGet SignalR.SqlServer y establecerá el cadena de conexión en la base de datos de backplane.

  1. Abra la consola del administrador de paquetes desde Herramientas>Administrador de paquetes NuGet. Asegúrese de que esté seleccionado el proyecto GeekQuiz en la lista desplegable Proyecto predeterminado. Escriba el siguiente comando para instalar el paquete NuGet Microsoft.AspNet.SignalR.SqlServer.

    Install-Package Microsoft.AspNet.SignalR.SqlServer
    
  2. Repita el paso anterior, pero esta vez para el proyecto GeekQuiz2.

  3. Para configurar el backplane de SQL Server, abra el archivo Startup.cs del proyecto GeekQuiz y agregue el código siguiente al método de configuración. Sustituya <YOUR-DATABASE> por el nombre de la base de datos que usó al crear el backplane de SQL Server. Repita este paso para el proyecto GeekQuiz2.

    (Fragmento de código: RealTimeSignalR - Ex2 - StartupConfiguration)

    public class Startup 
    {   
        public void Configuration(IAppBuilder app) 
        {           
            var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;";
            GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); 
            this.ConfigureAuth(app);
            app.MapSignalR();
        }
    }
    
  4. Ahora que ambos proyectos están configurados para usar el backplane de SQL Server, pulse F5 para ejecutarlos simultáneamente.

  5. De nuevo, Visual Studio iniciará dos instancias de Geek Quiz en puertos diferentes. Ancle uno de los exploradores de la izquierda y el otro a la derecha de la pantalla, e inicie sesión con sus credenciales. Mantenga la página con las preguntas a la izquierda y acceda a la página de estadísticas en el explorador derecho.

  6. Comience a responder preguntas en el explorador izquierdo. Esta vez, la página de estadísticas se actualiza gracias al backplane. Cambie entre aplicaciones (las estadísticas están ahora a la izquierda y las preguntas de cultura general a la derecha) y repita la prueba para comprobar que funciona para ambas instancias. El backplane actúa como una caché compartida de mensajes para cada servidor conectado, y cada servidor almacenará los mensajes en su propia caché local para distribuirlos a los clientes conectados.

  7. Regrese a Visual Studio y detenga la depuración.

  8. El componente backplane de SQL Server genera automáticamente las tablas necesarias en la base de datos especificada. En el panel Explorador de objetos de SQL Server, abra la base de datos que creó para el backplane (por ejemplo: SignalR) y expanda sus tablas. Deberían aparecer las tablas siguientes:

    Backplane Generated Tables

    tablas generadas por backplane

  9. Haga clic con el botón derecho en la tabla SignalR.Messages_0 y seleccione Ver datos.

    View SignalR Backplane Messages Table

    Ver tabla de mensajes de backplane de SignalR

  10. Puede ver los distintos mensajes enviados al concentrador al responder a las preguntas de cultura general. El backplane distribuye estos mensajes a cualquier instancia conectada.

    Backplane Messages Table

    Tabla de mensajes de backplane


Resumen

En este laboratorio práctico, ha aprendido a agregar SignalR a la aplicación y a enviar notificaciones desde el servidor a los clientes conectados mediante concentradores. Además, ha aprendido a escalar horizontalmente la aplicación mediante un componente de backplane cuando la aplicación se ejecuta en varias instancias de IIS.