Connecter SharePoint composants d’application à l’aide de SignalR

Implémenter la communication en temps réel SharePoint composants d’application à l’aide de SignalR.

S’applique à : compléments pour SharePoint | SharePoint 2013 | SharePoint Online

L’exemple Core.ConnectedAppParts vous montre comment utiliser une application hébergée par un fournisseur en tant que courtier de messages ou concentrateur de conversation pour envoyer et recevoir des messages à partir de tous les composants d’application connectés au hub de conversation. Utilisez cette solution si vous convertissez vos composants Web SharePoint en composants d’application et que vous avez besoin que vos composants d’application communiquent entre eux.

Avant de commencer

Pour commencer, téléchargez l’exemple d’application Core.ConnectedAppParts à partir du projet pratiques et modèles Office 365 développeur sur GitHub.

Composants d’application connectés et architecture de hub de conversation

La figure 1 illustre les composants d’application connectés et l’architecture du hub de conversation.

Figure 1. Composants d’application connectés et architecture de hub de conversation

Illustration affichant l’architecture de l’exemple de code Core.ConnectedAppParts

Les composants d’application connectée et l’architecture de hub de conversation incluent les composants suivants :

  1. SharePoint pages qui incluent des composants d’application. Les composants d’application utilisent la bibliothèque jQuery SignalR. Les composants d’application contiennent du code JavaScript, qui envoie et reçoit des messages à partir du hub de conversation en cours d’exécution dans le add-in hébergé par un fournisseur. Chaque partie d’application doit d’abord se connecter au hub de conversation. Une fois connectés au hub de conversation, les composants d’application peuvent envoyer et recevoir des messages à partir d’autres composants d’application connectés.

  2. Proxy signalr hub, qui établit une connexion de socket au hub de conversation. Le proxy SignalR Hub courtier les messages entre le code JavaScript du partie d’application et le code C# de conversation.

  3. Hub de conversation, qui utilise la bibliothèque SignalR pour router les messages de l’envoi vers les composants d’application de réception. Dans cet exemple de code, tous les composants d’application reçoivent des messages du hub de conversation, y compris le composant d’application qui a envoyé le message.

Notes

Étant donné que les composants d’application s’exécutent dans un IFRAME, vous ne pouvez pas utiliser JavaScript uniquement pour communiquer entre les composants d’application.

Utiliser l’application Core.ConnectedAppParts

Pour voir une démonstration de deux composants d’application communiquant à l’aide de SignalR :

  1. Lorsque vous exécutez l’application et que la page de démarrage s’affiche, choisissez Retour au site.

  2. Choisissez Paramètres > ajouter une page.

  3. Dans le nouveau nom de page, entrez ConnectedAppParts, puis choisissez Créer.

  4. Choose Insert > App Part.

  5. Choose Connected Part - One > Add.

  6. Choose Insert > App Part.

  7. Choose Connected Part - Two > Add.

  8. Choisissez Enregistrer.

  9. Dans la partie connectée - Un, entrez Hello World à partir de la partie 1 de l’application, puis choisissez Envoyer.

  10. Vérifiez que le message Hello World de la partie 1 de l’application apparaît à la fois dans le composant connecté ( un et le composant connecté) et dans les deux composants d’application.

Dans cet exemple de code, le projet Core.ConnectedAppParts contient deux composants d’application (ConnectedPartOne et ConnectedPartTwo) qui sont déployés sur le site web hôte. ConnectedPartOne et ConnectedPartTwo s’exécutent dans un IFRAME. Le contenu de la page web pour ConnectedPartOne et ConnectedPartTwo est défini dans le projet Core.ConnectedAppPartsWeb dans Pages\ConnectedPartOne.aspx et Pages\ConnectedPartTwo.aspx. Les deux pages s’exécutent dans l’application hébergée par un fournisseur avec le hub de conversation (ChatHub.cs) et utilisent JavaScript en ligne pour :

  1. Incluez la bibliothèque jQuery signalR.

  2. Connecter proxy signalr hub à l’aide de connection.chatHub.

  3. Utilisez chat.client.broadcastMessage pour définir une fonction pour recevoir des messages diffusés envoyés par le hub de conversation. Dans cet exemple de code, le nom du partie d’application et le message en cours de diffusion sont affichés dans la liste de discussion.

  4. Démarrez la connexion au hub de conversation à l’aide de $.connection.hub.start().done. Lorsque la connexion est établie, un handler d’événements est défini sur l’événement click du bouton sendmessage. Ce handler d’événement appelle chat.server.send pour envoyer le nom du partie d’application et le message entré par l’utilisateur au hub de conversation.

Notes

Le code dans cet article est fourni tel quel, sans garantie d’aucune sorte, expresse ou implicite, y compris mais sans s’y limiter, aucune garantie implicite d’adéquation à un usage particulier, à une qualité marchande ou une absence de contrefaçon.

    <!--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>

Lorsque le code JavaScript en ligne dans ConnectedPartOne.aspx exécute chat.server.send, un appel est effectué à la méthode Send dans ChatHub.cs. La méthode Send dans ChatHub.cs reçoit le nom et le message du composant d’application de diffusion, puis diffuse les informations sur tous les composants d’application connectés à l’aide de Clients.All.broadcastMessage. Clients.All.broadcastMessage appelle la fonction JavaScript (dans tous les composants d’application connectés) qui a été définie à l’aide de chat.client.broadcastMessage.

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

Important Dans cet exemple de code, tous les composants d’application connectés au hub de conversation reçoivent tous les messages envoyés via le hub de conversation. Envisagez de filtrer les messages en fonction de l’ID de session pour déterminer les composants d’application qui doivent recevoir les messages.

Voir aussi