イベントを Azure SignalR Service から Event Grid に送信する方法How to send events from Azure SignalR Service to Event Grid

Azure Event Grid は、pub-sub モデルを使用した画一的なイベント使用を提供する、完全に管理されたイベント ルーティング サービスです。Azure Event Grid is a fully managed event routing service that provides uniform event consumption using a pub-sub model. このガイドでは、Azure CLI を使用して Azure SignalR Service を作成し、接続イベントをサブスクライブして、イベントを受信するサンプル Web アプリケーションをデプロイします。In this guide, you use the Azure CLI to create an Azure SignalR Service, subscribe to connection events, then deploy a sample web application to receive the events. 最後に、接続および接続解除し、サンプル アプリケーションでイベントのペイロードを確認します。Finally, you can connect and disconnect and see the event payload in the sample application.

Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。If you don't have an Azure subscription, create a free account before you begin.

Azure Cloud Shell を使用するUse Azure Cloud Shell

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell では、bashPowerShell のいずれかを使用して Azure サービスを操作できます。Cloud Shell lets you use either bash or PowerShell to work with Azure services. ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell を起動するには:To launch Azure Cloud Shell:

オプションOption 例とリンクExample/Link
コード ブロックの右上隅にある [使ってみる] を選択します。Select Try It in the upper-right corner of a code block. [試してみる] を選択しても、コードは Cloud Shell に自動的にコピーされません。Selecting Try It doesn't automatically copy the code to Cloud Shell. Azure Cloud Shell の [使ってみる] の例
https://shell.azure.com に移動するか、 [Cloud Shell を起動する] ボタンを選択して、ブラウザーで Cloud Shell を開きます。Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. 新しいウィンドウで Cloud Shell を起動するLaunch Cloud Shell in a new window
Azure portal の右上にあるメニュー バーの [Cloud Shell] ボタンを選択します。Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure Portal の [Cloud Shell] ボタン

Azure Cloud Shell でこの記事のコードを実行するには:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell を起動します。Launch Cloud Shell.

  2. [コピー] ボタンを選択して、コード ブロックをコードにコピーします。Select the Copy button on a code block to copy the code.

  3. Windows と Linux では Ctrl + Shift + V キー、macOS では Cmd + Shift + V キーを使用して、コードを Cloud Shell セッションに貼り付けます。Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.

  4. Enter キーを押して、コードを実行します。Press Enter to run the code.

この記事の Azure CLI コマンドは、Bash シェル用にフォーマットされています。The Azure CLI commands in this article are formatted for the Bash shell. PowerShell、コマンド プロンプトなど、別のシェルを使用している場合は、必要に応じて、行連結文字または変数代入行を適切に調整する必要があります。If you're using a different shell like PowerShell or Command Prompt, you may need to adjust line continuation characters or variable assignment lines accordingly. この記事では変数を使用して、必要なコマンド編集を最小限に抑えています。This article uses variables to minimize the amount of command editing required.

リソース グループの作成Create a resource group

Azure リソース グループとは、Azure リソースのデプロイと管理に使用する論理コンテナーです。An Azure resource group is a logical container in which you deploy and manage your Azure resources. 次の az group create コマンドでは、myResourceGroup という名前のリソース グループが eastus リージョンに作成されます。The following az group create command creates a resource group named myResourceGroup in the eastus region. ご自身のリソース グループに別の名前を使用する場合は、RESOURCE_GROUP_NAME を別の値に設定してください。If you want to use a different name for your resource group, set RESOURCE_GROUP_NAME to a different value.

RESOURCE_GROUP_NAME=myResourceGroup

az group create --name $RESOURCE_GROUP_NAME --location eastus

SignalR Service の作成Create a SignalR Service

次に、以下のコマンドを使用して、Azure SignalR Service をリソース グループにデプロイします。Next, deploy an Azure Signalr Service into the resource group with the following commands.

SIGNALR_NAME=SignalRTestSvc

az signalr create --resource-group $RESOURCE_GROUP_NAME --name $SIGNALR_NAME --sku Free_F1

SignalR Service が作成されると、Azure CLI により次のような出力が返されます。Once the SignalR Service has been created, the Azure CLI returns output similar to the following:

{
  "externalIp": "13.76.156.152",
  "hostName": "clitest.servicedev.signalr.net",
  "hostNamePrefix": "clitest",
  "id": "/subscriptions/28cf13e2-c598-4aa9-b8c8-098441f0827a/resourceGroups/clitest1/providers/Microsoft.SignalRService/SignalR/clitest",
  "location": "southeastasia",
  "name": "clitest",
  "provisioningState": "Succeeded",
  "publicPort": 443,
  "resourceGroup": "clitest1",
  "serverPort": 443,
  "sku": {
    "capacity": 1,
    "family": null,
    "name": "Free_F1",
    "size": "F1",
    "tier": "Free"
  },
  "tags": null,
  "type": "Microsoft.SignalRService/SignalR",
  "version": "1.0"
}

イベント エンドポイントの作成Create an event endpoint

このセクションでは、GitHub リポジトリにある Resource Manager テンプレートを使用して、構築済みサンプル Web アプリケーションを Azure App Service にデプロイします。In this section, you use a Resource Manager template located in a GitHub repository to deploy a pre-built sample web application to Azure App Service. その後、レジストリの Event Grid イベントをサブスクライブし、このアプリを、イベントの送信先エンドポイントとして指定します。Later, you subscribe to your registry's Event Grid events and specify this app as the endpoint to which the events are sent.

サンプル アプリをデプロイするには、SITE_NAME をご自身の Web アプリの一意の名前に設定し、次のコマンドを実行します。To deploy the sample app, set SITE_NAME to a unique name for your web app, and execute the following commands. サイト名は Web アプリの完全修飾ドメイン名 (FQDN) の一部であるため、Azure 内で一意にする必要があります。The site name must be unique within Azure because it forms part of the fully qualified domain name (FQDN) of the web app. 後のセクションで、Web ブラウザーを使用してアプリの FQDN に移動し、ご自身のレジストリのイベントを表示します。In a later section, you navigate to the app's FQDN in a web browser to view your registry's events.

SITE_NAME=<your-site-name>

az group deployment create \
    --resource-group $RESOURCE_GROUP_NAME \
    --template-uri "https://raw.githubusercontent.com/Azure-Samples/azure-event-grid-viewer/master/azuredeploy.json" \
    --parameters siteName=$SITE_NAME hostingPlanName=$SITE_NAME-plan

デプロイが成功したら (数分をかかる場合があります)、ブラウザーを開いて、ご自身の Web アプリに移動し、アプリが実行中であることを確認します。Once the deployment succeeds (it might take a few minutes), open a browser and navigate to your web app to make sure it's running:

http://<your-site-name>.azurewebsites.net

Event Grid リソース プロバイダーを有効にするEnable Event Grid resource provider

Azure サブスクリプションで Event Grid を使用したことがない場合は、Event Grid リソース プロバイダーを登録する必要がある可能性があります。If you haven't previously used Event Grid in your Azure subscription, you may need to register the Event Grid resource provider. 以下のプロバイダーを登録するコマンドを実行します。Run the following command to register the provider:

az provider register --namespace Microsoft.EventGrid

登録完了まで少し時間がかかることがあります。It may take a moment for the registration to finish. 状態をチェックするには、次を実行します。To check the status, run:

az provider show --namespace Microsoft.EventGrid --query "registrationState"

registrationStateRegistered になったら、次に進めることができます。When registrationState is Registered, you're ready to continue.

レジストリ イベントのサブスクライブSubscribe to registry events

Event Grid では、"トピック" をサブスクライブすることで、どのイベントを追跡し、どこにイベントを送信するかをその Event Grid に伝えます。In Event Grid, you subscribe to a topic to tell it which events you want to track, and where to send them. 次の az eventgrid event-subscription create コマンドでは、作成した Azure SignalR Service をサブスクライブして、ご自身の Web アプリの URL を、イベントの送信先エンドポイントとして指定します。The following az eventgrid event-subscription create command subscribes to the Azure SignalR Service you created, and specifies your web app's URL as the endpoint to which it should send events. 前のセクションで設定した環境変数はここで再利用されます。したがって、編集は不要です。The environment variables you populated in earlier sections are reused here, so no edits are required.

SIGNALR_SERVICE_ID=$(az signalr show --resource-group $RESOURCE_GROUP_NAME --name $SIGNALR_NAME --query id --output tsv)
APP_ENDPOINT=https://$SITE_NAME.azurewebsites.net/api/updates

az eventgrid event-subscription create \
    --name event-sub-signalr \
    --source-resource-id $SIGNALR_SERVICE_ID \
    --endpoint $APP_ENDPOINT

サブスクリプションが完了すると、次のような出力が表示されます。When the subscription is completed, you should see output similar to the following:

{
  "deadLetterDestination": null,
  "destination": {
    "endpointBaseUrl": "https://$SITE_NAME.azurewebsites.net/api/updates",
    "endpointType": "WebHook",
    "endpointUrl": null
  },
  "filter": {
    "includedEventTypes": [
      "Microsoft.SignalRService.ClientConnectionConnected",
      "Microsoft.SignalRService.ClientConnectionDisconnected"
    ],
    "isSubjectCaseSensitive": null,
    "subjectBeginsWith": "",
    "subjectEndsWith": ""
  },
  "id": "/subscriptions/28cf13e2-c598-4aa9-b8c8-098441f0827a/resourceGroups/myResourceGroup/providers/Microsoft.SignalRService/SignalR/SignalRTestSvc/providers/Microsoft.EventGrid/eventSubscriptions/event-sub-signalr",
  "labels": null,
  "name": "event-sub-signalr",
  "provisioningState": "Succeeded",
  "resourceGroup": "myResourceGroup",
  "retryPolicy": {
    "eventTimeToLiveInMinutes": 1440,
    "maxDeliveryAttempts": 30
  },
  "topic": "/subscriptions/28cf13e2-c598-4aa9-b8c8-098441f0827a/resourceGroups/myResourceGroup/providers/microsoft.signalrservice/signalr/SignalRTestSvc",
  "type": "Microsoft.EventGrid/eventSubscriptions"
}

レジストリ イベントのトリガーTrigger registry events

サービス モードを Serverless Mode に切り替え、SignalR Service へのクライアント接続をセットアップします。Switch to the service mode to Serverless Mode and setup a client connection to the SignalR Service. サーバーレス サンプルを参考にすることができます。You can take Serverless Sample as a reference.

git clone git@github.com:aspnet/AzureSignalR-samples.git

cd samples/Management

# Start the negotiation server
# Negotiation server is responsible for generating access token for clients
cd NegotitationServer
dotnet user-secrets set Azure:SignalR:ConnectionString "<Connection String>"
dotnet run

# Use a seperate command line
# Start a client
cd SignalRClient
dotnet run

レジストリ イベントの表示View registry events

クライアントを SignalR Service に接続できました。You have now connected a client to the SignalR Service. Event Grid ビューアー Web アプリに移動すると、ClientConnectionConnected イベントが表示されています。Navigate to your Event Grid Viewer web app, and you should see a ClientConnectionConnected event. クライアントを終了すると、ClientConnectionDisconnected イベントも表示されます。If you terminate the client, you will also see a ClientConnectionDisconnected event.