Microsoftが提供している Node.js 版のAzure IoT Hub のサンプルアプリを、Blazorで作ってみています。
Azure Portal を使用して IoT Hub を作成する
Visual Studio 2019 で「app-service-blazor-iot-hub-data-visualization.sln」を開いてビルドします。
Visual Studio を使用して Azure App Service に Web アプリを発行する
WebSocketを有効にする必要があります。
Azure Portalで対象のApp Serviceを選択し、「構成」から、「全体設定」タブを選択し、「Web ソケット」をONにします。
「MessageSample」プロジェクトは、Azure IoT Hub のドキュメントで紹介されているサンプルアプリの1つで、C#を使ってAzure IoT Hubにメッセージを送ることが出来ます。
このプロジェクトを起動してメッセージを送ると、ブラウザで「Fetch data」のページを表示していると、メッセージが追加されます。
環境変数のIOTHUB_DEVICE_CONN_STRINGにデバイスの接続文字列を設定する必要があります。
プロジェクトの設定にある「デバッグ」の「環境変数」で設定することが出来ます。
元のアプリでは、サーバー側は Node.js の Express でWebサーバーを実行し、クライアント側はHTMLとJavaScriptで実行し、WebSocketで IoT Hub に送られたデータを Chart.js で表示するものになっています。
サーバー側では、クライアント側のWebSocketの接続を待つのと同時に、IoT Hub と接続しデバイスからのメッセージの受信も待っています。IoT Hubからメッセージを受信したときに接続されているWebSocketに送信する、中継ぎ処理を行っています。
このアプリでは、Blazorを使って同じ構成のアプリを作りたいと思っています。
| 機能 | Node.js/HTML | Blazor |
|---|---|---|
| グラフ表示 | Chart.js | ChartJs.Blazor |
| WebSocketクライアント | ブラウザのAPI | System.Net.WebSockets.ClientWebSocket |
| WebSocketサーバー | socket.io | System.Net.WebSockets.WebSocket |
| IoT Hub コンシューマー | @azure/event-hubsのEventHubClientクラス |
Azure.Messaging.EventHubsのEventHubConsumerClientクラス |
接続文字列の保存にユーザーシークレットを使っています。
Azure App Servie に公開した場合は、Azure Key Vaultに保存して運用します。