チュートリアル: WebSocket API と Azure Web PubSub サービス SDK を使用してメッセージの発行とサブスクライブを行う

Azure Web PubSub サービスは、リアルタイムの Web メッセージング アプリケーションを簡単に構築するのに役立ちます。 このチュートリアルでは、WebSocket API を使用してサービスにサブスクライブし、Web PubSub サービス SDK を使用してメッセージを発行する方法について説明します。

このチュートリアルでは、次の作業を行う方法について説明します。

  • Azure Web PubSub サービス インスタンスを作成する
  • 完全な URL を生成して WebSocket 接続を確立する
  • Web PubSub サブスクライバー クライアントを作成し、標準の WebSocket プロトコルを使用してメッセージを受信する
  • Web PubSub パブリッシャー クライアントを作成し、Web PubSub サービス SDK を使用してメッセージを発行する

前提条件

  • Azure サブスクリプション。無料アカウントを作成します。
  • Bash コマンド シェル。 ローカル シェルを使用するか、Azure Cloud Shell で Bash 環境を使用します。
  • ローカル コンピューターで実行している場合、Azure CLI をインストールします

このチュートリアルのコマンドは、Bash シェルの代わりに Windows cmd.exe コマンド シェルを使用して実行できます。

ローカル コンピューターでプロジェクトを作成する場合は、以下のように使用している言語の依存関係をインストールする必要があります。

環境を準備する

ローカル開発のための Azure CLI のセットアップ

次の手順に従って、Azure CLI とプロジェクト環境をセットアップします。

  1. コマンド シェルを開きます。

  2. Azure CLI の最新バージョンにアップグレードします。

    az upgrade
    
  3. Web PubSub 用の Azure CLI 拡張機能をインストールします。

    az extension add --name webpubsub
    
  4. Azure CLI にサインインします。 プロンプトに従って、Azure 資格情報を入力します。

    az login
    

リソース グループを作成する

リソース グループとは、Azure リソースのデプロイと管理に使用する論理コンテナーです。 az group create コマンドを使用して、myResourceGroup という名前のリソース グループを eastus の場所に作成します。

az group create --name myResourceGroup --location EastUS

1. Azure Web PubSub インスタンスを作成する

Web PubSub インスタンスを作成する

Azure CLI の az webpubsub create コマンドを使用して、作成したリソース グループに Web PubSub を作成します。 次のコマンドは、EastUS のリソース グループ myResourceGroup の下に "無料の" Web PubSub リソースを作成します。

Web PubSub リソースには、それぞれ一意の名前を付ける必要があります。 次のコマンドの <your-unique-resource-name> を、実際の Web PubSub インスタンスの名前に置き換えてください。

az webpubsub create --resource-group myResourceGroup --name <your-unique-resource-name> --location EastUS --sku Free_F1

このコマンドの出力では、新しく作成したリソースのプロパティが表示されます。 次の 2 つのプロパティをメモしておきます。

  • name: 上記の --name パラメーターで指定した Web PubSub 名。
  • hostName: この例では、ホスト名は <your-unique-resource-name>.webpubsub.azure.com/ です。

この時点で、お使いの Azure アカウントのみが、この新しいリソースで任意の操作を実行することを許可されています。

接続文字列を取得する

重要

接続文字列には、アプリケーションが Azure Web PubSub サービスにアクセスするために必要な認可情報が含まれています。 接続文字列内のアクセス キーは、サービスのルート パスワードに似ています。 運用環境では、アクセス キーは常に慎重に保護してください。 キーを安全に管理およびローテーションするには、Azure Key Vault を使用します。 アクセス キーを他のユーザーに配布したり、ハードコーディングしたり、他のユーザーがアクセスできるプレーンテキストで保存したりしないでください。 キーが侵害された可能性があると思われる場合は、キーをローテーションしてください。

Azure CLI の az webpubsub key コマンドを使用して、サービスの ConnectionString を取得します。 プレースホルダー <your-unique-resource-name> を実際の Azure Web PubSub インスタンスの名前に置き換えます。

az webpubsub key show --resource-group myResourceGroup --name <your-unique-resource-name> --query primaryConnectionString --output tsv

後で使うために接続文字列をコピーします。

サブスクライバー クライアントを作成する

クライアントは、JSON Web Token (JWT) 認証を使用して、標準の WebSocket プロトコルにより Azure Web PubSub サービスに接続します。 サービス SDK には、トークンを生成するヘルパー メソッドがあります。 このチュートリアルでは、サブスクライバーによって ConnectionString からトークンが直接生成されます。 実際のアプリケーションでは、認証や認可のワークフローは通常、サーバー側のアプリケーションによって処理されます。 ワークフローについての理解を深めるには、チュートリアル「チャット アプリを構築する」を参照してください。

  1. まず、このプロジェクト用に subscriber という名前のプロジェクト ディレクトリを作成し、必要な依存関係をインストールします。

    • パッケージ Websocket.Client は、WebSocket 接続をサポートするサードパーティーのパッケージです。 WebSocket をサポートする任意の API またはライブラリを使用できます。
    • SDK パッケージ Azure.Messaging.WebPubSub を使用すると、JWT トークンを生成できます。
    mkdir subscriber
    cd subscriber
    dotnet new console
    dotnet add package Websocket.Client --version 4.3.30
    dotnet add package Azure.Messaging.WebPubSub --version 1.0.0
    
  2. Program.cs 内のコードを、サービスに接続する次のコードに置き換えます。

    using System;
    using System.Threading.Tasks;
    
    using Azure.Messaging.WebPubSub;
    
    using Websocket.Client;
    
    namespace subscriber
    {
        class Program
        {
            static async Task Main(string[] args)
            {
                if (args.Length != 2)
                {
                    Console.WriteLine("Usage: subscriber <connectionString> <hub>");
                    return;
                }
                var connectionString = args[0];
                var hub = args[1];
    
                // Either generate the URL or fetch it from server or fetch a temp one from the portal
                var serviceClient = new WebPubSubServiceClient(connectionString, hub);
                var url = serviceClient.GetClientAccessUri();
    
                using (var client = new WebsocketClient(url))
                {
                    // Disable the auto disconnect and reconnect because the sample would like the client to stay online even no data comes in
                    client.ReconnectTimeout = null;
                    client.MessageReceived.Subscribe(msg => Console.WriteLine($"Message received: {msg}"));
                    await client.Start();
                    Console.WriteLine("Connected.");
                    Console.Read();
                }
            }
        }
    }
    
    

    このコードでは、Web PubSub のハブに接続される WebSocket 接続を作成します。 ハブは Web PubSub の論理ユニットです。ここで、クライアントのグループにメッセージを発行できます。 主要な概念に関するページには、Web PubSub で使用される用語に関する詳細な説明があります。

    Web PubSub サービスでは、JSON Web Token (JWT) 認証が使用されます。 サンプル コードでは、Web PubSub SDK で WebPubSubServiceClient.GetClientAccessUri() を使用して、有効なアクセス トークンを持つ完全な URL を含むサービスへの URL を生成します。

    接続が確立されると、クライアントは WebSocket 接続を介してメッセージを受信します。 クライアントでは client.MessageReceived.Subscribe(msg => ...)); を使用して受信メッセージをリッスンします。

  3. サブスクライバーを開始するには、<Web-PubSub-connection-string> を前にコピーした接続文字列に置き換えて、次のコマンドを実行します。

    dotnet run <Web-PubSub-connection-string> "myHub1"
    

2. サービス SDK を使用してメッセージを発行する

Azure Web PubSub SDK を使用してパブリッシャーを作成し、接続されているクライアントにメッセージを発行します。 このプロジェクトでは、別のコマンド シェルを開く必要があります。

  1. まず、publisher という名前のプロジェクト ディレクトリを作成し、必要な依存関係をインストールします。

    mkdir publisher
    cd publisher
    dotnet new console
    dotnet add package Azure.Messaging.WebPubSub
    
  2. Program.cs ファイルを更新し、WebPubSubServiceClient クラスを使用してクライアントにメッセージを送信します。

    using System;
    using System.Threading.Tasks;
    using Azure.Messaging.WebPubSub;
    
    namespace publisher
    {
        class Program
        {
            static async Task Main(string[] args)
            {
                if (args.Length != 3) {
                    Console.WriteLine("Usage: publisher <connectionString> <hub> <message>");
                    return;
                }
                var connectionString = args[0];
                var hub = args[1];
                var message = args[2];
    
                // Either generate the token or fetch it from server or fetch a temp one from the portal
                var serviceClient = new WebPubSubServiceClient(connectionString, hub);
                await serviceClient.SendToAllAsync(message);
            }
        }
    }
    
    

    SendToAllAsync() の呼び出しでは、単純にハブ内の接続されているすべてのクライアントにメッセージが送信されます。

  3. 次のコマンドを実行して、メッセージを送信します。 <Web-PubSub-connection-string> を先ほどコピーした接続文字列で置き換えます。

    dotnet run <Web-PubSub-connection-string> "myHub1" "Hello World"
    
  4. サブスクライバーのコマンド シェルを調べて、メッセージを受信したことを確認します。

    Message received: Hello World
    

クリーンアップ

このクイック スタートで作成したリソースは、それらを含むリソース グループを削除することで削除できます。

az group delete --name myResourceGroup --yes

Azure Cloud Shell を引き続き使用する予定がない場合は、関連付けられているストレージ アカウントを含むリソース グループを削除することで、コストの蓄積を回避できます。 リソース グループの名前は cloud-shell-storage-<your-region> です。 次のコマンドを実行します。<CloudShellResourceGroup> は Cloud Shell グループの名前に置き換えてください。

az group delete --name <CloudShellResourceGroup> --yes

注意事項

リソース グループを削除すると、このチュートリアルのスコープの外で作成されたリソースを含むすべてのリソースが削除されます。

次の手順

このチュートリアルでは、Web PubSub サービスに接続し、接続されているクライアントにメッセージを発行する方法の基本的な考え方について説明しています。

サービスの使用方法の詳細については、他のチュートリアルを参照してください。