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

Node.js 12.x 以降

1. クライアント アプリのディレクトリを作成する

mkdir eventHandlerDemo
cd eventHandlerDemo

# The SDK is available as an NPM module.
npm install @azure/web-pubsub-client

2. Web PubSub に接続する

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

client.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 to the "connected" event
client.on("connected", (e) => {
  console.log(`Connection ${e.connectionId} is connected.`);
});

// You must invoke start() on the client object 
// to establish connection with your Web PubSub resource
client.start();

1. express.js と Web PubSub サーバー SDK をインストールする

npm init -y
npm install --save express

# Installs the middleware from Web PubSub. This middleware will set up an endpoint for you.
npm install --save @azure/web-pubsub-express 

2. 空の express アプリを設定する "server.js" という名前の新しいファイルを作成する

const express = require("express");

const app = express();

app.listen(8080, () => console.log('Server started, listening on port 8080'));

3. イベントを処理する

Web PubSub では、クライアント側で特定のアクティビティが発生した場合 (たとえば、クライアントが Web PubSub リソースと connected または disconnected の場合)、アプリケーション サーバーで、これらのイベントに対応するハンドラーを設定できます。

2 つの重要なユース ケース:

• クライアントが接続されている場合は、接続されているすべてのクライアントにこの状態をブロードキャストできます
• クライアントが Web PubSub リソースにメッセージを送信するときに、任意のデータベースにメッセージを保持できます

const express = require("express");
const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");

const app = express();

const HUB_NAME = "myHub1";

let handler = new WebPubSubEventHandler(HUB_NAME, {
  path: '/eventhandler', // Exposes an endpoint 
  onConnected: async (req) => {
    console.log(`${req.context.userId} connected`);
  }, 
});

// Registers the middleware with the express app
app.use(handler.getMiddleware());

app.listen(8080, () => console.log('Server started, listening on port 8080'));

上記のコードで構成したように、クライアントが Web PubSub リソースに接続すると、Web PubSub により、パス /eventhandler でアプリケーション サーバーから提供される Webhook が呼び出されます。 ここでは、ユーザーが接続しているときに userId をコンソールに出力するだけです。

1. awps-tunnel をダウンロードしてインストールする

このツールは、Node.js バージョン 16 以降で実行されます。

npm install -g @azure/web-pubsub-tunnel-tool

2. サービス接続文字列を使って実行する

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

export WebPubSubConnectionString="<your connection string>"
awps-tunnel run --hub myHub1 --upstream http://localhost:8080

1. メニューから [設定] を選択して、[追加] を選択します

2. ハブ名を入力します。 ここでは、「myHub1」と入力し、[追加] を選択します

3. イベント ハンドラー ページで、次のフィールドを構成します。awps-tunnel ツールを使用する場合、URL テンプレートでは、tunnel スキームの後にパスが使用されます: tunnel:///eventhandler

4. 構成を保存します

az webpubsub hub update --group "<your-resource-group-name>" --name "<your-unique-resource-name>" --hub-name "myHub1" --event-handler url-template="https://<domain-name>.ngrok.io/eventHandler" user-event-pattern="*" system-event="connected"

アプリケーション サーバーを起動する

node server.js

クライアント プログラムを起動する

node client.js

結果を観察する

コンソールに userId が出力されていることがわかります。