次の方法で共有

方法: Azure API Management で Web PubSub for Socket.IO を使用する

Azure API Management サービスは、あらゆる環境にわたる API のためのハイブリッドなマルチクラウド管理プラットフォームです。 この記事では、Azure API Management と Web PubSub for Socket.IO を使用して、アプリケーションにリアルタイム機能を追加する方法について説明します。

API Management で Web PubSub for Socket.IO を使用するアーキテクチャを示すダイアグラム。

制限事項

Socket.IO クライアントは WebSocket と Long Polling をサポートしており、クライアントの既定では、長いポーリングを使ってサービスに接続してから WebSocket にアップグレードします。 ただし、現在のところ、API Management は、同じパスをたどるさまざまな API (WebSocket または HTTP) をまだサポートしていません。 クライアント設定で websocket または polling を設定する必要があります。

リソースを作成する

このステップ バイ ステップ ガイドに従うには、次のものが必要です。

API Management を設定する

クライアントが websocket トランスポートに接続するときに API を構成する

このセクションでは、Socket.IO クライアントが websocket トランスポートに接続するときに API Management を構成する手順について説明します。

  1. API Management インスタンスのポータルで [API] タブに移動し、[API の追加]、[WebSocket] の順に選択し、次のパラメーターを指定して [作成] します。

    • 表示名: Web PubSub for Socket.IO
    • Web サービスの URL: wss://<your-webpubsubforsocketio-service-url>/clients/socketio/hubs/eio_hub
    • API URL サフィックス: clients/socketio/hubs/eio_hub

    ハブ名はアプリケーションに合わせて変更できます。

  2. [作成] を押して API を作成し、作成が完了したら、簡単なデモ用途なので、[設定] タブに切り替えて、[サブスクリプションは必須です] チェックボックスをオフにします

クライアントが polling トランスポートに接続するときに API を構成する

このセクションでは、Socket.IO クライアントが websocket トランスポートに接続するときに API Management を構成する手順について説明します。

  1. API Management インスタンスのポータルで [API] タブに移動し、[API の追加]、[WebSocket] の順に選択し、次のパラメーターを指定して [作成] します。

    • 表示名: Web PubSub for Socket.IO
    • Web サービスの URL: https://<your-webpubsubforsocketio-service-url>/clients/socketio/hubs/eio_hub
    • API URL サフィックス: clients/socketio/hubs/eio_hub

    ハブ名はアプリケーションに合わせて変更できます。

  2. [設定] タブに切り替え、デモ用なので、[サブスクリプションは必須です] をオフにします

  3. [設計] タブに切り替えて、[操作の追加] を選択し、次のパラメーターを指定して保存します。

    post データの操作を追加する

    • 表示名: connect
    • URL: POST /

    データを取得するための操作を追加する

    • 表示名: connect get
    • GET /

サンプルを試す

これで、トラフィックは API Management 経由で Web PubSub for Socket.IO に到達できるようになります。 アプリケーションには構成がいくつかあります。 例としてチャット アプリケーションを使ってみましょう。

GitHub リポジトリ https://github.com/Azure/azure-webpubsub をクローンし、sdk/webpubsub-socketio-extension/examples/chat フォルダーを調べます

次に、このサンプルが API Management で機能するようにいくつかの変更を加えます

  1. public/main.js を開きます。これは Socket.IO クライアント側コードです。

    Socket.IO のコンストラクターを編集します。 トランスポートとして websocket または polling を選択する必要があります。

    const webPubSubEndpoint = "https://<api-management-url>";
var socket = io(webPubSubEndpoint, {
   transports: ["websocket"], // Depends on your transport choice. If you use WebSocket in API Management, set it to "websocket". If choosing Long Polling, set it to "polling"
   path: "/clients/socketio/hubs/eio_hub", // The path also need to match the settings in API Management
});

  2. Web PubSub for Socket.IO の [キー] タブ。 [接続文字列] をコピーし、次のコマンドを使用してサーバーを実行します。

    npm install
npm run start -- <connection-string>

  3. 出力に従って、ブラウザーを使用してエンドポイントにアクセスします

    Visit http://localhost:3000

  4. このサンプルでは、他のユーザーとチャットできます。

次のステップ

他の Socket.IO サンプルを確認する