Azure Web PubSub のクイックスタートを試す。

はじめに

Azure Web PubSub のクイックスタートを試し見ました。

Web PubSub については下記を確認してください。

クイックスタート

CLIでクイックスタートを試していきます。

下記を参考にして進めます。

ここらからはCloud Shellを起動して実行していきます。

リソースグループの作成

リソースグループを作成します。

az group create --name "myResourceGroup" -l "EastUS"

kudo@Azure:~$ az group create --name "myResourceGroup" -l "EastUS"
{
  "id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/myResourceGroup",
  "location": "eastus",
  "managedBy": null,
  "name": "myResourceGroup",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": null,
  "type": "Microsoft.Resources/resourceGroups"

Web PubSubの作成

最初にAzure CLIにおいてwebpubsubの拡張機能をインストールもしくはアップグレードします。

az extension add --upgrade --name webpubsub

kudo@Azure:~$ az extension add --upgrade --name webpubsub
Extension 'webpubsub' 1.1.0 is already installed.
Latest version of 'webpubsub' is already installed.

これはインストール済みで、最新版です。

Web PubSubの作成を作成します。

<your-unique-resource-name>は一意の値です。

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

実際のコマンドです。

az webpubsub create --name "pubsub12416" --resource-group "myResourceGroup" --location "EastUS" --sku Free_F1

kudo@Azure:~$ az webpubsub create --name "pubsub12416" --resource-group "myResourceGroup" --location "EastUS" --sku Free_F1
{
  "disableAadAuth": false,
  "disableLocalAuth": false,
  "externalIp": "20.88.154.167",
  "hostName": "pubsub12416.webpubsub.azure.com",
  "hostNamePrefix": "pubsub12416",
  "id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/myResourceGroup/providers/Microsoft.SignalRService/WebPubSub/pubsub12416",
  "identity": null,
  "liveTraceConfiguration": null,
  "location": "eastus",
  "name": "pubsub12416",
  "networkAcLs": {
    "defaultAction": "Deny",
    "privateEndpoints": [],
    "publicNetwork": {
      "allow": [
        "ServerConnection",
        "ClientConnection",
        "RESTAPI",
        "Trace"
      ],
      "deny": null
    }
  },
  "privateEndpointConnections": [],
  "provisioningState": "Succeeded",
  "publicNetworkAccess": "Enabled",
  "publicPort": 443,
  "resourceGroup": "myResourceGroup",
  "resourceLogConfiguration": null,
  "serverPort": 443,
  "sharedPrivateLinkResources": [],
  "sku": {
    "capacity": 1,
    "family": null,
    "name": "Free_F1",
    "size": "F1",
    "tier": "Free"
  },
  "systemData": {
    "createdAt": "2023-01-14T12:42:22.211170+00:00",
    "createdBy": "xxxxx@gmail.com",
    "createdByType": "User",
    "lastModifiedAt": "2023-01-14T12:42:22.211170+00:00",
    "lastModifiedBy": "xxxxx@gmail.com",
    "lastModifiedByType": "User"
  },
  "tags": null,
  "tls": {
    "clientCertEnabled": false
  },
  "type": "Microsoft.SignalRService/WebPubSub",
  "version": "1.0"
}

以上でWeb PubSubの作成は完了です。

ここからWeb PubSubの動作を確認していきます。

動作確認

動作確認はCloud Shell ①、②を二つ用意します。

ハブ名: myHub1
リソース グループ名: myResourceGroup
ユーザーID: user1

az webpubsub client start --name "<your-unique-resource-name>" --resource-group "myResourceGroup" --hub-name "myHub1" --user-id "user1"

Cloud Shell ①でコマンド実行します。

az webpubsub client start --name "pubsub12416" --resource-group "myResourceGroup" --hub-name "myHub1" --user-id "user1"

kudo@Azure:~$ az webpubsub client start --name "pubsub12416" --resource-group "myResourceGroup" --hub-name "myHub1" --user-id "user1"

----------Usage-----------
help                                : Print help messages
joingroup <group-name>              : Join the connection to group
leavegroup <group-name>             : Leave the connection from group
sendtogroup <group-name> <message>  : Send message to group
event <event-name> <message>        : Send event to event handler
--------------------------
        
{"type":"system","event":"connected","userId":"user1","connectionId":"OWBeH6h7HGtDxrvoA7hXUQ08ab62941"}

グループに参加してメッセージを送信します。

joingroup group1

{"type":"ack","ackId":1,"success":true}

sendtogroup group1 hello

{"type":"message","from":"group","fromUserId":"user1","group":"group1","dataType":"json","data": "hello"}
{"type":"ack","ackId":2,"success":true}

Cloud Shell ② でメッセージをbroadcastします。

az webpubsub service broadcast --name "<your-unique-resource-name>" --resource-group "myResourceGroup" --hub-name "myHub1" --payload "Hello World"

下記を実行します。

kudo@Azure:~$ az webpubsub service broadcast --name "pubsub12416" --resource-group "myResourceGroup" --hub-name "myHub1" --payload "Hello World"

Cloud Shell ① で以下が確認できます。

{"type":"message","from":"server","dataType":"text","data":"Hello World"}

また、Cloud Shell ②で下記のように接続します。

ハブ名: myHub1
リソース グループ名: myResourceGroup
ユーザーID: user2

接続後にグループに参加してメッセージを送信します。

kudo@Azure:~$ az webpubsub client start --name "pubsub12416" --resource-group "myResourceGroup" --hub-name "myHub1" --user-id "user2"

----------Usage-----------
help                                : Print help messages
joingroup <group-name>              : Join the connection to group
leavegroup <group-name>             : Leave the connection from group
sendtogroup <group-name> <message>  : Send message to group
event <event-name> <message>        : Send event to event handler
--------------------------
        
{"type":"system","event":"connected","userId":"user2","connectionId":"PXMnCUZwTIrmPyXq6MeH1g08ab62941"}

joingroup group1
{"type":"ack","ackId":2,"success":true}
sendtogroup group1 hello
{"type":"message","from":"group","fromUserId":"user2","group":"group1","dataType":"json","data": "hello"}
{"type":"ack","ackId":3,"success":true}

メッセージはCloud Shell ①で受信することができます。

{"type":"message","from":"group","fromUserId":"user2","group":"group1","dataType":"json","data": "hello"}

以上のようにWeb PubSubを利用することでクライアント間でのメッセージのやり取りが安易いに行えます。

まとめ

Web PubSubはあまりメジャーなサービスではないかもしれません。Google Cloudではメジャーなサービスですね。

ただAzureにはSignalRがあります。そこらへんの使い分けも必要かと思います。