Azure IoT Hub に送られたデータを表示する Blazor アプリケーション

Microsoftが提供している Node.js 版のAzure IoT Hub のサンプルアプリを、Blazorで作ってみています。

使い方

Azure IoT Hub の設定

Azure Portal を使用して IoT Hub を作成する

Visual Studio 2019 でビルド

Visual Studio 2019 で「app-service-blazor-iot-hub-data-visualization.sln」を開いてビルドします。

Visual Studio 2019 で公開

Visual Studio を使用して Azure App Service に Web アプリを発行する

Azure App Service の設定

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に保存して運用します。