サーバーからメッセージをプッシュする

2024-12-13

使い慣れた HTTP 要求/応答モデルは、使いやすくスケーラブルであるように設計されています。ただし、今日のエンドユーザーは、当初の設計よりも多くを Web に対して求めています。 HTTP プロトコルでは、応答を受信するためにユーザーが要求を開始する必要があります。しかし、開発者は、要求しなくてもサーバーからクライアントにデータを送信する方法を必要としています。つまり、オークションサイトにおける製品の最新の入札価格や金融アプリケーションでの動きの速い株価をプッシュするなど、クライアントにデータを "プッシュ" する必要があります。

データを接続されているクライアントにデータをプッシュするアプリケーションサーバーの GIF。

このクイックスタートガイドでは、次の方法を示します

アプリケーションサーバーからのメッセージをサブスクライブする
アプリケーションサーバーから接続されているすべてのクライアントにデータをプッシュする

重要

この記事に示す生の接続文字列は、デモンストレーションのみを目的としています。

接続文字列には、アプリケーションが Azure Web PubSub サービスにアクセスするために必要な認可情報が含まれています。接続文字列内のアクセスキーは、サービスのルートパスワードに似ています。運用環境では、常にアクセスキーを保護してください。 Azure Key Vault を使ってキーの管理とローテーションを安全に行い、WebPubSubServiceClient を使って接続をセキュリティ保護します。

アクセスキーを他のユーザーに配布したり、ハードコーディングしたり、他のユーザーがアクセスできるプレーンテキストで保存したりしないでください。キーが侵害された可能性があると思われる場合は、キーをローテーションしてください。

前提条件

Web PubSub リソース。作成していない場合は、「クイックスタート: Azure portal から Web PubSub インスタンスを作成する」に従います
コードエディター (Visual Studio Code など)。
使用する予定の言語の依存関係をインストールする

Node.js

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

アプリケーションサーバーからプッシュされたメッセージにサブスクライブするには、クライアント (ブラウザー、モバイルアプリ、IoT デバイスなど) を最初に Web PubSub リソースに接続する必要があり、クライアントで適切なメッセージイベントがリッスンされます。

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

mkdir subscriber
cd subscriber
npm init -y
    
# The client SDK is available as a module on NPM
npm install @azure/web-pubsub-client

Web PubSub リソースに接続し、`server-message` イベントのリスナーを登録する

クライアントは、"クライアントアクセス URL" を使用してリソースに接続して認証します。この URL は、wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token> のパターンに従います。クライアントには、クライアントアクセス URL を取得するいくつかの方法があります。このクイックスタートでは、次の図に示す Azure portal からコピーして貼り付けることができます。コードでクライアントアクセス URL をハードコーディングしないことをお勧めします。運用環境では、通常、この URL をオンデマンドで返すようにアプリサーバーを設定します。「クライアントアクセス URL を生成する」で手順について詳しく説明します。

この図は、クライアントアクセス URL を取得する方法を示しています。

上の図に示すように、クライアントは myHub1 という名前のハブに参加しています。

subscriber プロジェクトフォルダーで、次のコードを含む subscribe.js という名前のファイルを作成します

const { WebPubSubClient } = require("@azure/web-pubsub-client");

// Instantiates the client object
// <client-access-url> is copied from Azure portal mentioned above
const client = new WebPubSubClient("<client-access-url>")

// Registers a handler for the "server-message" event
client.on("server-message", (e) => {
    console.log(`Received message ${e.message.data}`)
});

// Before a client can receive a message, 
// you must invoke start() on the client object.
client.start();

プログラムを実行する

node subscribe.js

これで、このクライアントでは Web PubSub リソースとの接続を確立し、アプリケーションサーバーからプッシュされたメッセージを受信する準備ができました。

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

mkdir subscriber
cd subscriber
# Create a .net console app
dotnet new console

# Add the client SDK
dotnet add package Azure.Messaging.WebPubSub.Client --prerelease

Web PubSub リソースに接続し、`ServerMessageReceived` イベントのリスナーを登録する

この図は、クライアントアクセス URL を取得する方法を示しています。

上の図に示すように、クライアントは myHub1 という名前のハブに参加しています。

`Program.cs` 内のコードを次のコードに置き換えます

using Azure.Messaging.WebPubSub.Clients;

// Instantiates the client object
// <client-access-uri> is copied from Azure portal mentioned above
var client = new WebPubSubClient(new Uri("<client-access-uri>"));
client.ServerMessageReceived += eventArgs =>
{
    Console.WriteLine($"Receive message: {eventArgs.Message.Data}");
    return Task.CompletedTask;
};

client.Connected += eventArgs =>
{
    Console.WriteLine("Connected");
    return Task.CompletedTask;
};

await client.StartAsync();


// This keeps the subscriber active until the user closes the stream by pressing Ctrl+C
var streaming = Console.ReadLine();
while (streaming != null)
{
    if (!string.IsNullOrEmpty(streaming))
    {
        await client.SendToGroupAsync("stream", BinaryData.FromString(streaming + Environment.NewLine), WebPubSubDataType.Text);
    }

    streaming = Console.ReadLine();
}

await client.StopAsync();

次のコマンドを実行します。

dotnet run

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

mkdir subscriber
cd subscriber

# Create venv
python -m venv env
# Activate venv
source ./env/bin/activ

pip install azure-messaging-webpubsubservice
pip install websockets

WebSocket API を使用して Web PubSub リソースに接続します。次のコードを使用して、`subscribe.py` ファイルを作成する

import asyncio
import sys
import websockets

from azure.messaging.webpubsubservice import WebPubSubServiceClient


async def connect(url):
    async with websockets.connect(url) as ws:
        print('connected')
        while True:
            print('Received message: ' + await ws.recv())

if __name__ == '__main__':

    if len(sys.argv) != 3:
        print('Usage: python subscribe.py <connection-string> <hub-name>')
        exit(1)

    connection_string = sys.argv[1]
    hub_name = sys.argv[2]

    service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)
    token = service.get_client_access_token()

    try:
        asyncio.get_event_loop().run_until_complete(connect(token['url']))
    except KeyboardInterrupt:
        pass

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

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

接続が確立されると、クライアントは WebSocket 接続を介してメッセージを受信します。 await ws.recv() を使用して受信メッセージをリッスンします。

次のコマンドを実行します。

python subscribe.py $connection_string "myHub1"

`pubsub` という名前のプロジェクトディレクトリを作成する

mkdir pubsub
cd pubsub

Maven を使用して、`webpubsub-quickstart-subscriber` という名前の新しいコンソールアプリを作成します。

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.quickstart --define artifactId=webpubsub-quickstart-subscriber --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4

cd webpubsub-quickstart-subscriber

`pom.xml` の `dependencies` ノードに WebSocket と Azure Web PubSub SDK を追加します。

azure-messaging-webpubsub: Java 用 Web PubSub サービス SDK
Java-WebSocket: Java 用 WebSocket クライアント SDK

<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.0.0</version>
</dependency>
<dependency>
    <groupId>org.java-websocket</groupId>
    <artifactId>Java-WebSocket</artifactId>
    <version>1.5.1</version>
</dependency>

Web PubSub では、サービスに接続し、WebSocket 接続を介してメッセージにサブスクライブできます。 WebSocket は全二重通信チャネルなので、サービスはリアルタイムでクライアントにメッセージをプッシュできます。 WebSocket をサポートする任意の API またはライブラリを使用できます。このサンプルでは、パッケージ Java-WebSocket を使用します。

/src/main/java/com/webpubsub/quickstart ディレクトリに移動します。

App.java ファイルの内容を編集し、次のコードに置き換えます。

package com.webpubsub.quickstart;

import com.azure.messaging.webpubsub.*;
import com.azure.messaging.webpubsub.models.*;

import org.java_websocket.client.WebSocketClient;
import org.java_websocket.handshake.ServerHandshake;

import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;

/**
* Connect to Azure Web PubSub service using WebSocket protocol
*/
public class App 
{
    public static void main( String[] args ) throws IOException, URISyntaxException
    {
        if (args.length != 2) {
            System.out.println("Expecting 2 arguments: <connection-string> <hub-name>");
            return;
        }

        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
            .connectionString(args[0])
            .hub(args[1])
            .buildClient();

        WebPubSubClientAccessToken token = service.getClientAccessToken(new GetClientAccessTokenOptions());

        WebSocketClient webSocketClient = new WebSocketClient(new URI(token.getUrl())) {
            @Override
            public void onMessage(String message) {
                System.out.println(String.format("Message received: %s", message));
            }

            @Override
            public void onClose(int arg0, String arg1, boolean arg2) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onError(Exception arg0) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onOpen(ServerHandshake arg0) {
                // TODO Auto-generated method stub
            }

        };

        webSocketClient.connect();
        System.in.read();
    }
}

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

接続が確立されると、クライアントは WebSocket 接続を介してメッセージを受信します。 onMessage(String message) を使用して受信メッセージをリッスンします。

次のコマンドでアプリを実行する

mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.quickstart.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="$connection_string 'myHub1'"

アプリケーションサーバーからメッセージをプッシュする

クライアントが Web PubSub リソースに接続されたので、Web PubSub によって提供されるサーバー SDK を使用して、アプリケーションサーバーからメッセージをいつでもプッシュできます。

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

mkdir publisher
cd publisher

npm init

# This command installs the server SDK from NPM, 
# which is different from the client SDK you used in subscribe.js
npm install --save @azure/web-pubsub

次のコードを使用して、`publish.js` ファイルを作成する

const { WebPubSubServiceClient } = require('@azure/web-pubsub');

// This is the hub name we used on Azure portal when generating the Client Access URL. 
// It ensures this server can push messages to clients in the hub named "myHub1".
const hub = "myHub1";
    
let server = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);

// By default, the content type is `application/json`. 
// Specify contentType as `text/plain` for this demo.
server.sendToAll(process.argv[2], { contentType: "text/plain" });

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

接続文字列を取得する

重要

接続文字列には、アプリケーションが Web PubSub サービスにアクセスするために必要な認可情報が含まれています。接続文字列内のアクセスキーは、サービスのルートパスワードに似ています。

このクイックスタートガイドでは、次に示すように、Azure portal から取得します。図には、クライアントアクセス URL を取得する方法が示されています。

サーバープログラムを実行する

"新しい" コマンドシェルで、次のコマンドを実行します。

この記事では、デモ目的でのみ生の接続文字列が表示されます。運用環境では、常にアクセスキーを保護してください。 Azure Key Vault を使ってキーの管理とローテーションを安全に行い、WebPubSubServiceClient を使って接続をセキュリティ保護します。

# Set the environment variable for your connection string.
export WebPubSubConnectionString="<Put your connection string here>" 

node publish.js "Hello World"

クライアント側で受信したメッセージを確認する

接続されているクライアントにデータをプッシュするアプリサーバーの GIF。

複数のコマンドシェルで同じ "サブスクライブ" プログラムを実行して、複数のクライアントを刺激してみてください。 "発行" プログラムが実行されるとすぐに、これらのクライアントすべてにリアルタイムで配信されているメッセージが表示されます。

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

mkdir publisher
cd publisher
dotnet new console
dotnet add package Azure.Messaging.WebPubSub

`Program.cs` ファイルを次のコードに置き換える

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() の呼び出しでは、ハブ内の接続されているすべてのクライアントにメッセージが送信されます。

サーバープログラムを実行して、接続されているすべてのクライアントにメッセージをプッシュする

$connection_string="<connection-string>"
dotnet run $connection_string "myHub1" "Hello World"

クライアント側で受信したメッセージを確認する

# On the command shell used for running the "subscribe" program, you should see the received the messaged logged there. 
# Try running the same "subscribe" program in multiple command shells, which simulates more than clients. 
# Try running the "publish" program several times and you see messages being delivered in real-time to all these clients.   
Message received: Hello World

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

mkdir publisher
cd publisher
# Create venv
python -m venv env
# Active venv
source ./env/bin/activate

pip install azure-messaging-webpubsubservice

Azure Web PubSub SDK を使用して、サービスにメッセージを発行します。下のコードを使用して publish.py ファイルを作成します。

import sys
from azure.messaging.webpubsubservice import WebPubSubServiceClient

if __name__ == '__main__':

    if len(sys.argv) != 4:
        print('Usage: python publish.py <connection-string> <hub-name> <message>')
        exit(1)

    connection_string = sys.argv[1]
    hub_name = sys.argv[2]
    message = sys.argv[3]

    service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)
    res = service.send_to_all(message, content_type='text/plain')
    print(res)

send_to_all() では、ハブ内の全ての接続済みクライアントにメッセージが送信されます。

次のコマンドを実行します。

python publish.py $connection_string "myHub1" "Hello World"

前のコマンドシェルを調べて、サブスクライバーがメッセージを受信したことを確認します。
```
Received message: Hello World
```

pubsub ディレクトリに移動します。 Maven を使用してパブリッシャーコンソールアプリ webpubsub-quickstart-publisher を作成し、webpubsub-quickstart-publisher ディレクトリに移動します。

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.quickstart --define artifactId=webpubsub-quickstart-publisher --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4
cd webpubsub-quickstart-publisher

Azure Web PubSub SDK の依存関係を pom.xml の dependencies ノードに追加します。

<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.0.0</version>
</dependency>

Azure Web PubSub SDK を使用して、サービスにメッセージを発行します。 /src/main/java/com/webpubsub/quickstart ディレクトリに移動し、App.java ファイルをエディターで開いて、その内容を次のコードに置き換えます。


package com.webpubsub.quickstart;

import com.azure.messaging.webpubsub.*;
import com.azure.messaging.webpubsub.models.*;

/**
* Publish messages using Azure Web PubSub service SDK
*
*/
public class App 
{
    public static void main( String[] args )
    {
        if (args.length != 3) {
            System.out.println("Expecting 3 arguments: <connection-string> <hub-name> <message>");
            return;
        }

        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
            .connectionString(args[0])
            .hub(args[1])
            .buildClient();
        service.sendToAll(args[2], WebPubSubContentType.TEXT_PLAIN);
    }
}

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

webpubsub-quickstart-publisher ディレクトリに移動し、次のコマンドを使用してプロジェクトを実行します。

mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.quickstart.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="$connection_string 'myHub1' 'Hello World'"

前のサブスクライバーが次のメッセージを受信したのを確認できます。
```
Message received: Hello World
```

まとめ

このクイックスタートでは、アプリケーションサーバーからハブ内の接続されているすべてのクライアントにメッセージをプッシュする簡単な方法について説明しました。さらに、Web PubSub を使用すると、メッセージを次にプッシュできます

ハブ内のクライアントのサブセット
ハブ内の特定のグループ
グループ内のクライアントのサブセット

これらの API を使用すると、大量のユースケースに対応でき、開発者は独自のビジネスロジックに集中しながら、Web PubSub により低待機時間 (<100 ミリ秒)、高可用性、大規模なスケール (100 万以上の同時接続) が確保されます。

次のステップ

次の手順では、完全な Web アプリケーションを構築するために必要な Web PubSub のイベントシステムを操作する方法について説明します。

クライアントからのイベント通知

次の方法で共有

サーバーからメッセージをプッシュする

前提条件

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

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

Web PubSub リソースに接続し、server-message イベントのリスナーを登録する

プログラムを実行する

アプリケーション サーバーからメッセージをプッシュする

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

次のコードを使用して、publish.js ファイルを作成する

接続文字列を取得する

サーバー プログラムを実行する

クライアント側で受信したメッセージを確認する

まとめ

次のステップ

フィードバック

その他のリソース

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

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

Web PubSub リソースに接続し、`server-message` イベントのリスナーを登録する

アプリケーションサーバーからメッセージをプッシュする

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

次のコードを使用して、`publish.js` ファイルを作成する

サーバープログラムを実行する