Partager via

Connecter des parties d’application SharePoint à l’aide de SignalR

  • Article

Implémentez la communication en temps réel entre les parties de l’application SharePoint à 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 répartiteur de messages ou hub de conversation pour envoyer et recevoir des messages de toutes les parties d’application connectées au hub de conversation. Utilisez cette solution si vous convertissez vos composants WebPart SharePoint en composants d’application et que vos composants d’application doivent communiquer entre eux.

Avant de commencer

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

Composants d’applications connectées et architecture du hub de conversation

La figure 1 montre les parties d’application connectées et l’architecture du hub de conversation.

Figure 1. Composants d’applications connectées et architecture du hub de conversation

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

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

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

  2. Un proxy SignalR Hub, qui établit une connexion de socket au hub de conversation. Le proxy SignalR Hub répartit les messages entre le code JavaScript du composant d’application et le code C# du hub de conversation.

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

Remarque

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

Utiliser l’application Core.ConnectedAppParts

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

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

  2. Choisissez Paramètres>Ajouter une page.

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

  4. Choisissez Insérer uncomposant d’application>.

  5. Choisissez Composant connecté - Un>ajout.

  6. Choisissez Insérer uncomposant d’application>.

  7. Choisissez Composant connecté - Deux>ajouter.

  8. Cliquez sur Enregistrer.

  9. Dans Composant connecté - 1, 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 s’affiche à la fois dans Partie connectée - Un et Partie connectée - Deux parties de l’application.

Dans cet exemple de code, le projet Core.ConnectedAppParts contient deux parties d’application (ConnectedPartOne et ConnectedPartTwo) qui sont déployées 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 inline pour :

  1. Incluez la bibliothèque jQuery SignalR.

  2. Connectez-vous au proxy SignalR Hub à l’aide de connection.chatHub.

  3. Utilisez chat.client.broadcastMessage pour définir une fonction pour recevoir les messages diffusés envoyés par le hub de conversation. Dans cet exemple de code, le nom de la partie d’application et le message en cours de diffusion s’affichent 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 gestionnaire d’événements est défini sur l’événement click du bouton sendmessage . Ce gestionnaire d’événements appelle chat.server.send pour envoyer le nom du composant d’application et le message entré par l’utilisateur au hub de conversation.

Remarque

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 inline 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 du composant d’application de diffusion et le message, puis diffuse les informations à tous les composants d’application connectés à l’aide de Clients.All.broadcastMessage. Clients.All.broadcastMessage appelle la fonction JavaScript (dans tous les composants de l’application connectée) 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, toutes les parties d’application connectées 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 parties de l’application qui doivent recevoir les messages.

Voir aussi