Verbinden von SharePoint-App-Teilen mithilfe von SignalR

Implementieren Sie die Echtzeitkommunikation zwischen SharePoint-App-Teilen mithilfe von SignalR.

Gilt für: Add-Ins für SharePoint | SharePoint 2013 | SharePoint Online

Im Core.ConnectedAppParts-Beispiel wird gezeigt, wie Sie eine vom Anbieter gehostete App als Nachrichtenbroker oder Chathub verwenden, um Nachrichten von allen App-Teilen zu senden und zu empfangen, die mit dem Chat-Hub verbunden sind. Verwenden Sie diese Lösung, wenn Sie Ihre SharePoint-Webparts in App-Parts konvertieren und Ihre App-Teile für die Kommunikation untereinander benötigen.

Bevor Sie beginnen

Laden Sie zunächst die Core.ConnectedAppParts-Beispiel-App aus dem Projekt Office 365 Entwicklermuster und -methoden auf GitHub herunter.

Verbundene App-Teile und Chat-Hub-Architektur

Abbildung 1 zeigt die verbundenen App-Teile und die Chat-Hub-Architektur.

Abbildung 1: Verbundene App-Teile und Chat-Hub-Architektur

Die Verbundenen App-Teile und die Chat-Hub-Architektur umfassen die folgenden Komponenten:

1. SharePoint-Seiten, die App-Teile enthalten. Die App-Teile verwenden die SignalR jQuery-Bibliothek. Die App-Teile enthalten JavaScript-Code, der Nachrichten vom Chathub senden und empfangen kann, der im vom Anbieter gehosteten Add-In ausgeführt wird. Jedes App-Teil muss zuerst eine Verbindung mit dem Chat-Hub herstellen. Nach dem Herstellen einer Verbindung mit dem Chat-Hub können App-Teile Nachrichten von anderen verbundenen App-Teilen senden und empfangen.

2. Ein SignalR Hub-Proxy, der eine Socketverbindung mit dem Chathub herstellt. Der SignalR Hub-Proxy vermittelt Nachrichten zwischen dem JavaScript-Code des App-Teils und dem C#-Code des Chathubs.

3. Der Chathub, der die SignalR-Bibliothek verwendet, um Nachrichten vom Senden an empfangende App-Teile weiterzuleiten. In diesem Codebeispiel empfangen alle App-Teile Nachrichten vom Chat-Hub, einschließlich des App-Teils, der die Nachricht gesendet hat.

Verwenden der Core.ConnectedAppParts-App

So sehen Sie sich eine Demo zweier App-Teile an, die mithilfe von SignalR kommunizieren:

1. Wenn Sie die App ausführen und die Startseite angezeigt wird, wählen Sie Zurück zur Website aus.

2. Wählen Sie Einstellungen>Seite hinzufügen aus.

3. Geben Sie unter Neuer Seitenname den NamenConnectedAppParts ein, und wählen Sie dann Erstellen aus.

4. Wählen SieApp-Parteinfügen> aus.

5. Wählen Sie Connected Part - One Add (Verbundenes Teil – One>Add) aus.

6. Wählen SieApp-Parteinfügen> aus.

7. Wählen Sie Verbundenes Teil – Zwei>Hinzufügen aus.

8. Wählen Sie Speichern aus.

9. Geben Sie unter Verbundenes Teil – 1Hallo Welt aus App-Teil 1 ein, und wählen Sie dann Senden aus.

10. Vergewissern Sie sich, dass die Meldung Hallo Welt aus App-Teil 1 in den App-Teilen Connected Part – One und Connected Part – Two angezeigt wird.

In diesem Codebeispiel enthält das Core.ConnectedAppParts-Projekt zwei App-Teile (ConnectedPartOne und ConnectedPartTwo), die im Hostweb bereitgestellt werden. ConnectedPartOne und ConnectedPartTwo werden in einem IFRAME ausgeführt. Die Webseiteninhalte für ConnectedPartOne und ConnectedPartTwo werden im Core.ConnectedAppPartsWeb-Projekt in Pages\ConnectedPartOne.aspx und Pages\ConnectedPartTwo.aspx definiert. Beide Seiten werden in der vom Anbieter gehosteten App mit dem Chathub (ChatHub.cs) ausgeführt und verwenden Inline-JavaScript für Folgendes:

1. Schließen Sie die SignalR jQuery-Bibliothek ein.

2. Stellen Sie mithilfe von connection.chatHub eine Verbindung mit dem SignalR Hub-Proxy her.

3. Verwenden Sie chat.client.broadcastMessage , um eine Funktion zum Empfangen von gesendeten Nachrichten zu definieren, die vom Chathub gesendet werden. In diesem Codebeispiel werden der Name des App-Teils und die gesendete Nachricht in der Diskussionsliste angezeigt.

4. Starten Sie die Verbindung mit dem Chathub mithilfe von $.connection.hub.start().done. Wenn die Verbindung hergestellt wird, wird ein Ereignishandler für das Click-Ereignis der Schaltfläche sendmessage definiert. Dieser Ereignishandler ruft chat.server.send auf, um den Namen des App-Teils und die vom Benutzer eingegebene Nachricht an den Chathub zu senden.

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

Wenn der Inline-JavaScript-Code in ConnectedPartOne.aspx chat.server.send ausführt, wird die Send-Methode in ChatHub.cs aufgerufen. Die Send-Methode in ChatHub.cs empfängt den Namen und die Nachricht des Broadcast-App-Teils und sendet dann die Informationen mithilfe von Clients.All.broadcastMessage an alle verbundenen App-Teile. Clients.All.broadcastMessage ruft die JavaScript-Funktion (in allen verbundenen App-Teilen) auf, die mithilfe von chat.client.broadcastMessage definiert wurde.

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

Wichtig In diesem Codebeispiel empfangen alle App-Teile, die mit dem Chat-Hub verbunden sind, alle Nachrichten, die über den Chathub gesendet werden. Filtern Sie Nachrichten anhand der Sitzungs-ID, um zu bestimmen, welche App-Teile welche Nachrichten empfangen sollen.

Siehe auch

• Lösungsleitfaden für Office 365-Entwicklungsmuster und -Vorgehensweisen

• Einführung in SignalR

• Tutorial: Erste Schritte mit SignalR 2