SignalR を使用して SharePoint アプリ パーツを接続する

  • [アーティクル]

SignalR を使用して、SharePoint アプリ パーツ間のリアルタイム通信を実装します。

適用対象: SharePoint 用アドイン | SharePoint 2013 | SharePoint Online

Core.ConnectedAppParts サンプルでは、プロバイダーホスト型アプリをメッセージ ブローカーまたはチャット ハブとして使用して、チャット ハブに接続されているすべてのアプリ パーツからメッセージを送受信する方法を示します。 このソリューションは、既存の SharePoint Web パーツをアプリ パーツに変換していて、アプリ パーツが相互に通信する必要がある場合に使用できます。

はじめに

開始するには、GitHub の Office 365 Developer パターンとプラクティス プロジェクトから Core.ConnectedAppParts サンプル アプリをダウンロードします。

接続されたアプリ パーツとチャット ハブのアーキテクチャ

図 1 は、接続されたアプリ パーツとチャット ハブのアーキテクチャを示しています。

図 1. 接続されたアプリ パーツとチャット ハブのアーキテクチャ

Core.ConnectedAppParts コード サンプルのアーキテクチャを示す図

接続されたアプリ パーツとチャット ハブのアーキテクチャには、次のコンポーネントが含まれています。

  1. アプリ パーツを含む SharePoint ページ。 アプリ パーツは SignalR jQuery ライブラリを使用します。 アプリ パーツには、プロバイダーホスト型アドインで実行されているチャット ハブからメッセージを送受信する JavaScript コードが含まれています。 各アプリ パーツは、まずチャット ハブに接続する必要があります。 チャット ハブに接続すると、アプリ パーツは他の接続されたアプリ パーツからメッセージを送受信できます。

  2. SignalR ハブ プロキシ (チャット ハブとのソケット接続を確立します)。 SignalR ハブ プロキシ ブローカーは、アプリ パーツの JavaScript コードとチャット ハブの C# コードとの間のメッセージをやりとりします。

  3. チャット ハブ (アプリ パーツが送受信するメッセージをルーティングするために SignalR ライブラリを使用します)。 このコード サンプルでは、メッセージを送信したアプリ パーツを含む、すべてのアプリ パーツがチャット ハブからメッセージを受信します。

注:

アプリ パーツは IFRAME で実行されるため、アプリ パーツ間の通信に JavaScript だけを使うことはできません。

Core.ConnectedAppParts アプリを使用する

SignalR を使用して 2 つのアプリ パーツが通信するデモを見るには、次の手順を実行します。

  1. アプリを実行し、スタート ページが表示されたら、[ サイトに戻る] を選択します。

  2. [設定][ページの追加] の順に選択します>。

  3. [新しいページ名] に「ConnectedAppParts」と入力してから、[作成] を選択します。

  4. [アプリ パーツの挿入]を選択します>。

  5. [接続済みパーツ ] - [1 つの追加] を>選択します。

  6. [アプリ パーツの挿入]を選択します>。

  7. [接続済みパーツ ] - [2 つの追加] を>選択します。

  8. 保存] を選択します。

  9. [接続済みパーツ - 1] に、「App Part 1 からHello World」と入力し、[送信] を選択します。

  10. アプリ パート 1 からHello Worldメッセージが、接続済みパーツ - 1 と接続済みパーツ -2 つのアプリ パーツの両方に表示されることを確認します。

このコード サンプルでは、Core.ConnectedAppParts プロジェクトに 2 つのアプリ パーツ (ConnectedPartOne と ConnectedPartTwo) が含まれており、ホスト Web に配置されます。 ConnectedPartOne と ConnectedPartTwo は IFRAME 内で実行されます。 ConnectedPartOne と ConnectedPartTwo の Web ページ コンテンツは、Pages\ConnectedPartOne.aspx と Pages\ConnectedPartTwo.aspx の Core.ConnectedAppPartsWeb プロジェクトに定義されています。 どちらのページも、プロバイダー ホスト型アプリ内でチャット ハブ (ChatHub.cs) と一緒に実行され、インライン JavaScript を使用して次の処理を行います。

  1. SignalR jQuery ライブラリを組み込みます。

  2. connection.chatHub を使用して SignalR ハブ プロキシに接続します。

  3. chat.client.broadcastMessage を使用して、チャット ハブから送信されたブロードキャスト メッセージを受信する関数を定義します。 このコード サンプルでは、アプリ パーツの名前とブロードキャストされているメッセージを、ディスカッション リストに表示します。

  4. $.connection.hub.start().done を使用してチャット ハブへの接続を開始します。 接続が確立されると、 sendmessage ボタンの click イベントに対するイベント ハンドラーが定義されます。 このイベント ハンドラーは、chat.server.send を呼び出して、アプリ パーツの名前と、ユーザーがチャット ハブに入力したメッセージを送信します。

注:

この記事で提供されるコードは、明示または黙示のいかなる種類の保証なしに現状のまま提供されるものであり、特定目的への適合性、商品性、権利侵害の不存在についての暗黙的な保証は一切ありません。

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

ConnectedPartOne.aspx のインライン JavaScript コードが chat.server.send を実行すると、ChatHub.cs の Send メソッドに対して呼び出しが行われます。 ChatHub.cs の Send メソッドは、ブロードキャスト アプリ パーツの名前とメッセージを受け取り、 Clients.All.broadcastMessage を使用して接続されているすべてのアプリ パーツに情報をブロードキャストします。 Clients.All.broadcastMessage は 、 chat.client.broadcastMessage を使用して定義された JavaScript 関数 (接続されているすべてのアプリ パーツ内) を呼び出します。

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

大事な このコード サンプルでは、チャット ハブに接続されているすべてのアプリ パーツが、チャット ハブを介して送信されたすべてのメッセージを受信します。 どのアプリ パーツがどのメッセージを受信する必要があるかを判断するため、セッション ID に基づいてメッセージをフィルター処理することを検討してください。

関連項目