Azure Digital Twins を Azure SignalR Service と統合する

[アーティクル]
03/31/2023

この記事では、Azure Digital Twins と Azure SignalR Service を統合する方法について説明します。

この記事で説明するソリューションでは、1 つの Web ページやモバイルアプリケーションなどのデジタルツインのテレメトリデータを、接続されたクライアントにプッシュすることができます。その結果、クライアントは、サーバーをポーリングしたり更新プログラムについて新しい HTTP 要求を送信したりしなくても、IoT デバイスからのリアルタイムのメトリックと状態で更新されます。

前提条件

操作を続行する前に完了しておく前提条件を次に示します。

この記事でソリューションを Azure SignalR Service と統合する前に、Azure Digital Twins のエンドツーエンドのソリューションの接続に関するチュートリアルを完了する必要があります。それに基づいてこの操作方法の記事が作成されているからです。そのチュートリアルでは、仮想 IoT デバイスで動作してデジタルツインの更新をトリガーする Azure Digital Twins インスタンスを設定する手順が示されています。この操作方法の記事では、Azure SignalR Service を使用してそれらの更新プログラムをサンプル Web アプリに接続します。
そのチュートリアルから次の値が必要になります。
- Event Grid トピック
- リソースグループ
- App Service/関数アプリの名前
お使いのコンピューターに Node.js がインストールされている必要があります。

このガイドで使用する必要があるため、自分の Azure アカウントを使用して Azure portal にサインインしてください。

ソリューションのアーキテクチャ

以下のパスを使用して、Azure SignalR Service を Azure Digital Twins に接続します。図の A、B、C の各セクションは、エンドツーエンドのチュートリアルの事前準備のアーキテクチャ図から引用したものです。この操作方法に関する記事では、SignalR およびクライアントアプリと通信する 2 つの新しい Azure 関数を含む既存のアーキテクチャにセクション D を作成します。

サンプルアプリケーションのダウンロード

最初に、必要なサンプルアプリをダウンロードします。次の両方のサンプルが必要です。

Azure Digital Twins のエンドツーエンドサンプル: このサンプルには、Azure Digital Twins インスタンス内でデータを移動するための 2 つの Azure 関数を保持する AdtSampleApp が含まれています (このシナリオの詳細については、エンドツーエンドのソリューションの接続に関するチュートリアルで学習できます)。また、IoT デバイスをシミュレートし、1 秒ごとに新しい温度値を生成する DeviceSimulator サンプルアプリケーションも含まれています。
- 「前提条件」にあるチュートリアルの一部としてサンプルをまだダウンロードしていない場合は、サンプルにアクセスし、タイトルの下にある [コードの参照] ボタンを選択してください。これにより、サンプル用の GitHub リポジトリに移動します。[Code]\(コード\) ボタンと、[Download ZIP]\(ZIP のダウンロード\) を選択することによって、.zip 形式でこれをダウンロードできます。
このボタンにより、お使いのマシンにサンプルリポジトリのコピーが digital-twins-samples-main.zip としてダウンロードされます。フォルダーを解凍します。
SignalR 統合 Web アプリのサンプル: このサンプルの React Web アプリでは、Azure SignalR Service からの Azure Digital Twins テレメトリデータが使用されます。
- サンプルリンクに移動し、同じダウンロードプロセスを使用してサンプルのコピーをお使いのコンピューターに digitaltwins-signalr-webapp-sample-main.zip としてダウンロードします。フォルダーを解凍します。

このセクションでは、アプリに使う基本的な Azure SignalR インスタンスを作成します。次の手順では、Azure portal を使って新しいインスタンスを作成しますが、Azure CLI を使うこともできます。詳細については、Azure SignalR Service CLI リファレンスの az signalr create コマンドを参照してください。

Azure portal にサインインします。
ページの左上にある [+ リソースの作成] を選択します。
[リソースの作成] ページで、[Search services and marketplace](サービスとマーケットプレースを検索) テキストボックスに「signalr」と入力し、リストから [SignalR Service] を選びます。
[SignalR Service] ページで [作成] を選びます。
[基本] タブで、新しい SignalR Service のインスタンスに必要な情報を入力します。次の値を入力します。

フィールド	推奨値	説明
サブスクリプション	サブスクリプションの選択	新しい SignalR Service インスタンスを作成するために使うサブスクリプションを選びます。
リソースグループ	SignalRTestResources というリソースグループを作成する	SignalR リソースのリソースグループを選択または作成します。既存のリソースグループを使う代わりに、このチュートリアルのために新しいリソースグループを作成すると便利です。チュートリアルの終了後にリソースを解放するには、リソースグループを削除します。リソースグループを削除すると、そのグループに所属するすべてのリソースも削除されます。この削除操作は元に戻すことができません。保存するリソースが含まれていないことを確認してから、リソースグループを削除してください。詳細については、リソースグループを使用した Azure リソースの管理に関するページを参照してください。
リソース名	testsignalr	SignalR リソースに使用する一意のリソース名を入力します。 testsignalr がお使いのリージョンに既に導入されている場合は、数字や文字を追加して名前が一意になるようにします。名前は 1 ～ 63 文字の文字列で、数字、英字、ハイフン (`-`) 文字のみを使用する必要があります。名前の先頭と末尾にはハイフン文字を使用できません。また、連続するハイフン文字は無効です。
[リージョン]	自分のリージョンを選択します	新しい SignalR Service インスタンスに適切なリージョンを選びます。 Azure SignalR Service は、現在すべてのリージョンで使用できるわけではありません。詳細については、Azure SignalR Service リージョンの可用性に関するページを参照してください
価格レベル	[変更] を選び、[Free (Dev/Test Only)](無料 (Dev/Test のみ)) を選びます。 [選択] を選び、価格レベルを確認します。	Azure SignalR Service には、Free、Standard、Premium という 3 つの価格レベルがあります。チュートリアルでは、前提条件で特に明記されない限り、[Free] レベルを使います。レベルと価格による機能の違いの詳細については、「Azure SignalR Service の価格」を参照してください
サービスモード	適切なサービスモードを選びます	Web アプリで SignalR のハブロジックをホストしていて、SignalR Service をプロキシとして使う場合は、[既定] を使います。 Azure Functions などのサーバーレステクノロジを使って SignalR のハブロジックをホストする場合は、[サーバーレス] を使います。 [クラシック] モードは下位互換性のためだけにあり、使わないことをお勧めします。詳細については、「Azure SignalR Service のサービスモード」を参照してください。

SignalR チュートリアルでは、[ネットワーク] と [タグ] タブの設定を変更する必要はありません。

[基本] タブの下部にある [確認と作成] ボタンを選びます。
[確認と作成] タブで、値を確認し [作成] を選びます。デプロイが完了するまでしばらくかかります。
デプロイが完了したら、[リソースに移動] ボタンを選びます。
SignalR リソースページで、左側のメニューから、[設定] の下にある [キー] を選びます。
主キーの [接続文字列] をコピーします。この接続文字列は、このチュートリアルで後ほどアプリを構成するために必要です。

次のセクションでもう一度使用するので、Azure portal のブラウザーウィンドウは開いたままにしておきます。

Azure Functions アプリの発行と構成

このセクションでは、次の 2 つの Azure 関数を設定します。

negotiate - HTTP トリガー関数。 SignalRConnectionInfo 入力バインドを使用して有効な接続情報を生成し、返します。
broadcast - Event Grid トリガー関数。 Event Grid から Azure Digital Twins テレメトリデータを受信し、前の手順で作成した SignalR インスタンスの出力バインドを使用して、接続されているすべてのクライアントアプリケーションにメッセージをブロードキャストします。

Visual Studio または任意の別のコードエディターを起動し、digital-twins-samples-main\ADTSampleApp フォルダー内のコードソリューションを開きます。その後、次の手順を実行して関数を作成します。

SampleFunctionsApp プロジェクトに SignalRFunctions.cs と呼ばれる新しい C# クラスを作成します。

このクラスファイルの内容を次のコードに置き換えます。

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Azure.WebJobs.Extensions.EventGrid;
using Microsoft.Azure.WebJobs.Extensions.SignalRService;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Azure.Messaging.EventGrid;

namespace SignalRFunction
{
    public static class SignalRFunctions
    {
        public static double temperature;

        [FunctionName("negotiate")]
        public static SignalRConnectionInfo GetSignalRInfo(
            [HttpTrigger(AuthorizationLevel.Anonymous, "post")] HttpRequest req,
            [SignalRConnectionInfo(HubName = "dttelemetry")] SignalRConnectionInfo connectionInfo)
        {
            return connectionInfo;
        }

        [FunctionName("broadcast")]
        public static Task SendMessage(
            [EventGridTrigger] EventGridEvent eventGridEvent,
            [SignalR(HubName = "dttelemetry")] IAsyncCollector<SignalRMessage> signalRMessages,
            ILogger log)
        {
            JObject eventGridData = (JObject)JsonConvert.DeserializeObject(eventGridEvent.Data.ToString());

            log.LogInformation($"Event grid message: {eventGridData}");

            var patch = (JObject)eventGridData["data"]["patch"][0];
            if (patch["path"].ToString().Contains("/Temperature"))
            {
                temperature = Math.Round(patch["value"].ToObject<double>(), 2);
            }

            var message = new Dictionary<object, object>
            {
                { "temperatureInFahrenheit", temperature},
            };

            return signalRMessages.AddAsync(
                new SignalRMessage
                {
                    Target = "newMessage",
                    Arguments = new[] { message }
                });
        }
    }
}

Visual Studio の [パッケージマネージャーコンソール] ウィンドウ、またはお使いのマシンの任意のコマンドウィンドウで、フォルダー digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp に移動し、次のコマンドを実行して SignalRService NuGet パッケージをプロジェクトにインストールします。
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.2.0
```
このコマンドを実行すると、そのクラスに含まれる依存関係の問題が解決されます。
任意の方法を使用して、関数を Azure に発行します。

Visual Studio を使用して関数を発行する方法については、「Visual Studio を使用する Azure Functions の開発」を参照してください。 Visual Studio Code を使用して関数を発行する方法については、「Visual Studio Code を使用して Azure に C# 関数を作成する」を参照してください。 Azure CLI を使用して関数を発行する方法については、「Azure でコマンドラインから C# 関数を作成する」を参照してください。

関数を構成する

次に、Azure SignalR インスタンスと通信するように関数を構成します。まず、SignalR インスタンスの接続文字列を収集し、関数アプリの設定に追加します。

Azure portal にアクセスし、ポータルの上部にある検索バーで SignalR インスタンスの名前を検索します。インスタンスを選択して開きます。
インスタンスのメニューから [キー] を選択して、SignalR Service インスタンスの接続文字列を表示します。
[コピー] アイコンを選び、[プライマリ接続文字列] をコピーします。
最後に、次の Azure CLI コマンドを使用して、Azure SignalR の接続文字列を関数のアプリ設定に追加します。また、プレースホルダーを、チュートリアルの前提条件のリソースグループと App Service/関数アプリの名前に置き換えます。このコマンドは、Azure Cloud Shell で実行するか、Azure CLI がマシンにインストールされている場合はローカルで実行できます。
```
az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
```
このコマンドの出力では、Azure 関数用に設定されたすべてのアプリ設定が出力されます。一覧の下部で AzureSignalRConnectionString を検索して、それが追加されていることを確認します。

Event Grid に関数を接続する

次に、チュートリアルの 前提条件の間に作成した Event Grid トピックにブロードキャスト Azure 関数をサブスクライブします。このアクションにより、テレメトリデータは thermostat67 ツインから Event Grid トピックを経て関数へと流れることができます。ここから、この関数によってすべてのクライアントにそのデータをブロードキャストできます。

データをブロードキャストするには、Event Grid トピックからエンドポイントとしてのブロードキャスト Azure 関数へのイベントサブスクリプションを作成します。

Azure portal の上部の検索バーで、Event Grid トピックの名前を検索してそのトピックに移動します。 [+ イベントサブスクリプション] を選択します。

Screenshot of how to create an event subscription in the Azure portal.

[イベントサブスクリプションの作成] ページで、各フィールドに次のように入力します (既定値が入力されるフィールドは省略しています)。

[イベントサブスクリプションの詳細]>[名前]: イベントサブスクリプションに名前を付けます。
[エンドポイントの詳細]>[エンドポイントの種類]: メニューオプションから [Azure 関数] を選択します。
エンドポイントの詳細>エンドポイント: [エンドポイントの選択] リンクを選択すると、[Azure 関数の選択] ウィンドウが開きます。
- [サブスクリプション]、[リソースグループ]、[関数アプリ]、[関数] (broadcast) を入力します。これらのフィールドの一部は、サブスクリプションの選択後に自動的に設定される場合があります。
- [選択の確認] を選択します。

Screenshot of the form for creating an event subscription in the Azure portal.

再び [イベントサブスクリプションの作成] ページで、 [作成] を選択します。

この時点で、[Event Grid Topic]\(Event Grid トピック\) ページに 2 つのイベントサブスクリプションが表示されます。

Web アプリの構成と実行

このセクションでは、動作中の結果を見ていきます。まず、設定しておいた Azure SignalR のフローに接続するようにサンプルクライアント Web アプリを構成します。次に、Azure Digital Twins インスタンスを介してデバイステレメトリデータを送信するシミュレートされたデバイスサンプルアプリを起動します。その後、サンプル Web アプリを表示して、サンプル Web アプリをリアルタイムで更新するシミュレートされたデバイスデータを確認します。

サンプルクライアント Web アプリを構成する

次に、サンプルクライアント Web アプリを構成します。まず、ネゴシエート関数の HTTP エンドポイント URL を収集し、それを使用してコンピューター上のアプリコードを構成します。

Azure portal の [関数アプリ] ページにアクセスし、一覧から関数アプリを選択します。アプリメニューで、[関数] を選択し、negotiate 関数を選択します。
[Get function URL]\(関数 URL の取得\) を選択し、/api を使用して値をコピーします (最後の /negotiate は含まれません)。 次の手順でこの値を使用します。
Visual Studio または任意のコードエディターを使用して、「サンプルアプリケーションのダウンロード」セクションでダウンロードした解凍済みの digitaltwins-signalr-webapp-sample-main フォルダーを開きます。
src/App.js ファイルを開き、HubConnectionBuilder 内の関数 URL を、前の手順で保存した negotiate 関数の HTTP エンドポイント URL に置き換えます。
```
    const hubConnection = new HubConnectionBuilder()
        .withUrl('<Function-URL>')
        .build();
```
Visual Studio の "開発者コマンドプロンプト" またはコンピューター上の任意のコマンドウィンドウで、digitaltwins-signalr-webapp-sample-main\src フォルダーに移動します。次のコマンドを実行して、依存ノードパッケージをインストールします。
```
npm install
```

次に、Azure Portal で関数アプリでのアクセス許可を設定します。

Azure portal の [関数アプリ] ページで、関数アプリインスタンスを選択します。
インスタンスのメニューを下にスクロールし、[CORS] を選択します。 [CORS] ページで、空のボックスに http://localhost:3000 を入力して、許可された配信元として追加します。 [Access-Control-Allow-Credentials を有効にする] ボックスをオンにして、[保存] を選択します。

デバイスシミュレーターを実行する

エンドツーエンドのチュートリアルの事前準備では、IoT Hub を介してデータを Azure Digital Twins インスタンスに送信するようにデバイスシミュレーターを構成しました。

ここでは、digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln にあるシミュレータープロジェクトを開始します。 Visual Studio を使用している場合は、プロジェクトを開いてから、ツールバーにあるこのボタンを使用して実行できます。

コンソールウィンドウが開き、シミュレートされたデバイス温度テレメトリメッセージが表示されます。これらのメッセージは Azure Digital Twins インスタンスを介して送信され、そこでその後、Azure 関数と SignalR によって取得されます。

このコンソールで行うべき作業は他にありませんが、次のステップに取り組む間、コンソールは実行したままにしておいてください。

結果の表示

動作中の結果を確認するには、SignalR 統合 Web アプリのサンプルを起動します。そのためには、任意のコンソールウィンドウから、digitaltwins-signalr-webapp-sample-main\src の場所で、次のコマンドを実行します。

npm start

このコマンドを実行すると、サンプルアプリが実行されているブラウザーウィンドウが開き、ビジュアル温度計が表示されます。アプリが実行されると、Azure Digital Twins を介して伝達されるデバイスシミュレーターからの温度テレメトリの値が、Web アプリによってリアルタイムで反映されるのを確認できるようになります。

Screenshot of the sample client web app, showing a visual temperature gauge. The temperature reflected is 67.52.

リソースをクリーンアップする

この記事で作成したリソースがもう必要ない場合は、次の手順に従って削除します。

Azure Cloud Shell またはローカルの Azure CLI から az group delete コマンドを使用すると、リソースグループ内の Azure リソースをすべて削除できます。リソースグループを削除すると、以下も削除されます。

Azure Digital Twins インスタンス (エンドツーエンドのチュートリアルから)
IoT Hub とハブのデバイス登録 (エンドツーエンドのチュートリアルから)
Event Grid トピックと関連付けられているサブスクリプション
Azure Functions アプリ (3 つのすべての関数と、ストレージなどの関連リソースを含む)
Azure SignalR インスタンス

重要

リソースグループを削除すると、元に戻すことができません。リソースグループとそこに含まれるすべてのリソースは完全に削除されます。間違ったリソースグループやリソースをうっかり削除しないようにしてください。

az group delete --name <your-resource-group>

最後に、ローカルコンピューターにダウンロードしたプロジェクトのサンプルフォルダー (digital-twins-samples-main.zip、digitaltwins-signalr-webapp-sample-main.zip と、これらを解凍したもの) を削除します。

次のステップ

この記事では、Azure Digital Twins のテレメトリイベントをサンプルクライアントアプリケーションにブロードキャストするように、SignalR で Azure 関数を設定しました。

次に、Azure SignalR Service の詳細を確認します。

Azure SignalR サービスとは

または、Azure Functions を使用した Azure SignalR Service 認証の詳細を確認します。

Azure SignalR Service の認証

Share via

Azure Digital Twins を Azure SignalR Service と統合する

前提条件

ソリューションのアーキテクチャ

サンプルアプリケーションのダウンロード

Azure Functions アプリの発行と構成

関数を構成する

Event Grid に関数を接続する

Web アプリの構成と実行

サンプルクライアント Web アプリを構成する

デバイスシミュレーターを実行する

結果の表示

リソースをクリーンアップする

次のステップ

その他のリソース

Share via

Azure Digital Twins を Azure SignalR Service と統合する

前提条件

ソリューションのアーキテクチャ

サンプル アプリケーションのダウンロード

Azure Functions アプリの発行と構成

関数を構成する

Event Grid に関数を接続する

Web アプリの構成と実行

サンプル クライアント Web アプリを構成する

デバイス シミュレーターを実行する

結果の表示

リソースをクリーンアップする

次のステップ

その他のリソース

サンプルアプリケーションのダウンロード

サンプルクライアント Web アプリを構成する

デバイスシミュレーターを実行する