Compartir a través de

Conectar elementos de aplicación de SharePoint con SignalR

Implemente la comunicación en tiempo real entre elementos de aplicación de SharePoint con SignalR.

Se aplica a: Complementos de SharePoint | SharePoint 2013 | SharePoint Online

El ejemplo Core.ConnectedAppParts muestra cómo usar una aplicación hospedada por el proveedor como agente de mensajes o centro de chat para enviar y recibir mensajes de todos los elementos de la aplicación conectados al centro de chat. Use esta solución si va a convertir los elementos web de SharePoint a elementos de aplicación y necesita que los elementos de aplicación se comuniquen entre sí.

Antes de empezar

Para empezar, descargue la aplicación de ejemplo Core.ConnectedAppParts del proyecto Office 365 Patrones y prácticas para desarrolladores en GitHub.

Elementos de aplicación conectados y arquitectura de hub de chat

La ilustración 1 muestra los elementos de aplicación conectados y arquitectura de hub de chat.

Figura 1. Elementos de aplicación conectados y arquitectura de hub de chat

Ilustración que muestra la arquitectura del ejemplo de código Core.ConnectedAppParts

Los elementos de aplicación conectados y la arquitectura de hub de chat incluyen los siguientes componentes:

  1. Páginas de SharePoint que incluyen los elementos de la aplicación. Los elementos de la aplicación usan la biblioteca de jQuery SignalR. Los elementos de la aplicación contienen código de JavaScript, envían y reciben mensajes desde el hub de chat que se ejecuta en el complemento hospedado por el proveedor. Cada elemento de aplicación primero debe conectarse al hub de chat. Después de conectarse con el hub de chat, los elementos de aplicación pueden enviar y recibir mensajes de otros elementos de aplicación conectados.

  2. Un proxy Hub SignalR que establece una conexión de socket al hub de chat. El proxy Hub SignalR hace de agente entre el código de JavaScript del elemento de aplicación y el código de C# del hub de chat.

  3. El hub de chat, que usa la biblioteca SignalR para redirigir mensajes desde el envío hasta la recepción de elementos de aplicación. En este ejemplo de código, todos los elementos de aplicación reciben mensajes desde el hub de chat, incluido el elemento de aplicación que envió el mensaje.

Nota:

Como los elementos de aplicación se ejecutan en un IFRAME, no se puede usar JavaScript solo para la comunicación entre elementos de aplicación.

Usar la aplicación Core.ConnectedAppParts

Para ver una demostración de dos elementos de aplicación que se comunican mediante SignalR:

  1. Cuando ejecute la aplicación y se muestre la página de inicio, elija Volver al sitio.

  2. Elija Configuración>Agregar una página.

  3. En Nuevo nombre de página, escriba ConnectedAppParts y, a continuación, elija Crear.

  4. Elija Insertar>elemento de aplicación.

  5. Elija Elemento conectado- Un>agregar.

  6. Elija Insertar>elemento de aplicación.

  7. Elija Elemento conectado : dos>agregar.

  8. Seleccione Guardar.

  9. En Elemento conectado - Uno, escriba Hola mundo de la parte 1 de la aplicación y, a continuación, elija Enviar.

  10. Compruebe que el mensaje Hola mundo de la parte 1 de la aplicación aparece en las partes de la aplicación Connected Part - One y Connected Part - Two.

En este ejemplo de código, el proyecto Core.ConnectedAppParts contiene dos elementos de aplicación (ConnectedPartOne y ConnectedPartTwo) que se implementan en la web del host. ConnectedPartOne y ConnectedPartTwo se ejecutan en un IFRAME. El contenido de la página Web ConnectedPartOne y ConnectedPartTwo se define en el proyecto Core.ConnectedAppPartsWeb en Pages\ConnectedPartOne.aspx y Pages\ConnectedPartTwo.aspx. Ambas páginas se ejecutan en la aplicación hospedada por el proveedor con el hub de chat (ChatHub.cs) y usa JavaScript insertado para:

  1. Incluir la biblioteca de jQuery SignalR.

  2. Conéctese al proxy de SignalR Hub mediante connection.chatHub.

  3. Use chat.client.broadcastMessage para definir una función para recibir mensajes transmitidos enviados por el centro de chat. En este ejemplo de código, se muestra el nombre del elemento de la aplicación y el mensaje que se transmite en la lista discusión.

  4. Inicie la conexión al centro de chat mediante $.connection.hub.start().done. Cuando se establece la conexión, se define un controlador de eventos en el evento click del botón sendmessage . Este controlador de eventos llama a chat.server.send para enviar el nombre del elemento de aplicación y el mensaje especificado por el usuario en el hub de chat.

Nota:

El código de este artículo se proporciona tal cual, sin garantía de ningún tipo, expresa o implícita, incluidas las garantías implícitas de aptitud para un propósito particular, comerciabilidad o ausencia de infracción.

    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="../Scripts/jquery-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="../Scripts/jquery.signalR-2.0.3.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="../signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&amp;nbsp;&amp;nbsp;' + encodedMsg + '</li>');
            };
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>

Cuando el código JavaScript insertado en ConnectedPartOne.aspx ejecuta chat.server.send, se realiza una llamada al método Send en ChatHub.cs. El método Send de ChatHub.cs recibe el mensaje y el nombre del elemento de aplicación de difusión y luego, transmite la información a todos los elementos de aplicación conectados con Clients.All.broadcastMessage. Clients.All.broadcastMessage llama a la función de JavaScript (en todos los elementos de aplicación conectados) que se define con chat.client.broadcastMessage.

 public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update the app parts.
            Clients.All.broadcastMessage(name, message);
        }

Importante En este ejemplo de código, todos los elementos de aplicación conectados al centro de chat reciben todos los mensajes enviados a través del centro de chat. Puede filtrar los mensajes por el id. de sesión para determinar qué elementos de aplicación deben recibir ciertos mensajes.

Vea también