MRが楽しい

MRやVRについて学習したことを書き残す

AzureのSignalRServiceを使ってサーバからHoloLens2にデータを送信する その3(クライアントアプリの作成)

本日は Azure と HoloLens2 の技術調査枠です。
Azure の SignalRService を使ってサーバから HoloLens2 にデータを送信する方法を試したので作業記録を記事にします。
f:id:bluebirdofoz:20210627224717j:plain

前回記事の続きです。
bluebirdofoz.hatenablog.com

クライアントアプリの作成

Azure Function のAPIを実行し、SignalR からの通知を受信するサンプルのクライアントアプリを作成します。
初めに参照の記事と同様に WPF アプリケーションのプロジェクトを作成します

プロジェクトの作成

VisualStudio2019 を起動し、[新しいプロジェクトの作成]から[WPF アプリケーション(C#)]を選択します。
f:id:bluebirdofoz:20210627224744j:plain

プロジェクト名と作成ディレクトリを指定します。
f:id:bluebirdofoz:20210627224756j:plain

[ターゲットフレームワーク]には[.NET Core 3.1]を選択し、[作成]をクリックします。
f:id:bluebirdofoz:20210627224807j:plain

WPF アプリケーションのテンプレートプロジェクトが作成されます。
f:id:bluebirdofoz:20210627224819j:plain

参照の記事に合わせて MainWindow.xaml ファイルを編集します。
f:id:bluebirdofoz:20210627224831j:plain

MainWindow.xaml.cs ファイルも同様に編集して実行関数を追加します。
ただしデフォルトでは Microsoft.AspNetCore.SignalR.Client の参照がないため、エラーが表示されます。
f:id:bluebirdofoz:20210627224844j:plain

ライブラリ参照の追加

Microsoft.AspNetCore.SignalR.Client の参照を追加します。
メニューから[プロジェクト -> NuGetパッケージの管理]を選択します。
f:id:bluebirdofoz:20210627224857j:plain

[参照]タブを開き、[パッケージソース]に[nuget.org]を指定します。
[Microsoft.AspNetCore.SignalR.Client]を検索し、[インストール]を実行します。
f:id:bluebirdofoz:20210627224910j:plain

変更のプレビューダイアログとライセンスへの同意ダイアログが表示されるので確認して進めます。
f:id:bluebirdofoz:20210627224922j:plain
f:id:bluebirdofoz:20210627224935j:plain

これで Microsoft.AspNetCore.SignalR.Client の参照が追加できました。
f:id:bluebirdofoz:20210627224948j:plain

アプリケーションのビルド

MainWindow.xaml.cs ファイルに Azure Function へのアクセスURLを設定します。
f:id:bluebirdofoz:20210627225001j:plain

メニューから[ビルド -> ソリューションのビルド]を実行してビルドします。
f:id:bluebirdofoz:20210627225015j:plain

作成した exe ファイルを起動します。
f:id:bluebirdofoz:20210627225027j:plain

通知と受信の確認をするため、アプリを2つ起動して[Connect]ボタンをクリックします。
SignalR Service への接続が成功すると[Connected!]の文字列が表示されます。
f:id:bluebirdofoz:20210627225039j:plain

片方のアプリで[Broadcast]ボタンをクリックしてみます。
SignalR Service に時刻情報が通知され、両方のアプリに受信した文字列が表示されます。
f:id:bluebirdofoz:20210627225051j:plain

長くなったので分けます。
次は Authorization level を Function にした場合の設定方法です。
bluebirdofoz.hatenablog.com